From df7d7b6f6f2830573393560f4a1ec35234889947 Mon Sep 17 00:00:00 2001
From: Charles <cc.lee@live.com.au>
Date: Fri, 11 Jun 2021 14:05:45 +1000
Subject: [PATCH] label and assorted a11y fixes to timestamp field (#5893)

* label and assorted a11y fixes to timestamp field

* chnageset
---
 .changeset/clean-mugs-drum.md                       |  5 +++++
 .changeset/sharp-beans-tie.md                       |  5 +++++
 .../src/DatePicker/components/InputButton.tsx       |  3 ++-
 .../fields/src/types/timestamp/views/index.tsx      | 13 ++++++++++---
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/clean-mugs-drum.md
 create mode 100644 .changeset/sharp-beans-tie.md

diff --git a/.changeset/clean-mugs-drum.md b/.changeset/clean-mugs-drum.md
new file mode 100644
index 00000000000..2481a51432a
--- /dev/null
+++ b/.changeset/clean-mugs-drum.md
@@ -0,0 +1,5 @@
+---
+'@keystone-ui/fields': patch
+---
+
+Applied a11y fixes to DatePicker component.
diff --git a/.changeset/sharp-beans-tie.md b/.changeset/sharp-beans-tie.md
new file mode 100644
index 00000000000..f6d482edefd
--- /dev/null
+++ b/.changeset/sharp-beans-tie.md
@@ -0,0 +1,5 @@
+---
+'@keystone-next/fields': patch
+---
+
+Fixed labels in timestamp field for better screen reader experience.
diff --git a/design-system/packages/fields/src/DatePicker/components/InputButton.tsx b/design-system/packages/fields/src/DatePicker/components/InputButton.tsx
index 6546010a1d7..23abe06742f 100644
--- a/design-system/packages/fields/src/DatePicker/components/InputButton.tsx
+++ b/design-system/packages/fields/src/DatePicker/components/InputButton.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 
 import { ButtonHTMLAttributes, forwardRef } from 'react';
-import { jsx, useTheme } from '@keystone-ui/core';
+import { jsx, useTheme, VisuallyHidden } from '@keystone-ui/core';
 import { XIcon } from '@keystone-ui/icons/icons/XIcon';
 import { CalendarIcon } from '@keystone-ui/icons/icons/CalendarIcon';
 import { useInputTokens, useInputStyles } from '../..';
@@ -77,6 +77,7 @@ const ClearButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
       }}
       {...props}
     >
+      <VisuallyHidden as="span">clear date value</VisuallyHidden>
       <XIcon size="small" />
     </Adornment>
   );
diff --git a/packages-next/fields/src/types/timestamp/views/index.tsx b/packages-next/fields/src/types/timestamp/views/index.tsx
index a5a0720114b..0c04f4ac682 100644
--- a/packages-next/fields/src/types/timestamp/views/index.tsx
+++ b/packages-next/fields/src/types/timestamp/views/index.tsx
@@ -9,7 +9,7 @@ import {
   FieldControllerConfig,
   FieldProps,
 } from '@keystone-next/types';
-import { jsx, Inline, Stack } from '@keystone-ui/core';
+import { jsx, Inline, Stack, VisuallyHidden } from '@keystone-ui/core';
 import { FieldContainer, FieldLabel, TextInput, DatePicker, DateType } from '@keystone-ui/fields';
 import { TextInputProps } from '@keystone-ui/fields/src/TextInput';
 import {
@@ -27,6 +27,7 @@ interface TimePickerProps extends TextInputProps {
 }
 
 const TimePicker = ({
+  id,
   autoFocus,
   onBlur,
   disabled,
@@ -36,6 +37,7 @@ const TimePicker = ({
 }: TimePickerProps) => {
   return (
     <TextInput
+      id={id}
       autoFocus={autoFocus}
       maxLength={format === '24hr' ? 5 : 7}
       disabled={disabled}
@@ -74,8 +76,8 @@ export const Field = ({
   };
 
   return (
-    <FieldContainer>
-      <FieldLabel>{field.label}</FieldLabel>
+    <FieldContainer as="fieldset">
+      <FieldLabel as="legend">{field.label}</FieldLabel>
       {onChange ? (
         <Stack>
           <Inline gap="small">
@@ -93,7 +95,12 @@ export const Field = ({
               {showValidation && showDateError(value.dateValue)}
             </Stack>
             <Stack>
+              <VisuallyHidden
+                as="label"
+                htmlFor={`${field.path}--time-input`}
+              >{`${field.label} time field`}</VisuallyHidden>
               <TimePicker
+                id={`${field.path}--time-input`}
                 onBlur={() => setTouchedSecondInput(true)}
                 disabled={onChange === undefined}
                 format="24hr"