label and assorted a11y fixes to timestamp field (#5893)

* label and assorted a11y fixes to timestamp field

* chnageset

.changeset/clean-mugs-drum.md

@@ -0,0 +1,5 @@
+---
+'@keystone-ui/fields': patch
+---
+
+Applied a11y fixes to DatePicker component.

.changeset/sharp-beans-tie.md

@@ -0,0 +1,5 @@
+---
+'@keystone-next/fields': patch
+---
+
+Fixed labels in timestamp field for better screen reader experience.

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>
   );

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"