fix(DateInput): fix DateInput and DateRangeInput a11y (#7953)

VKCOM · Dec 11, 2024 · 642925b · 642925b
1 parent a1285fe
commit 642925b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/packages/vkui/src/components/DateInput/DateInput.tsx b/packages/vkui/src/components/DateInput/DateInput.tsx
@@ -19,6 +19,7 @@ import { InputLike } from '../InputLike/InputLike';
 import { InputLikeDivider } from '../InputLike/InputLikeDivider';
 import { Popper } from '../Popper/Popper';
 import { Text } from '../Typography/Text/Text';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import '../InputLike/InputLike.module.css'; // Reorder css
 import styles from './DateInput.module.css';
 
@@ -193,6 +194,7 @@ export const DateInput = ({
   yearFieldTestId,
   hourFieldTestId,
   minuteFieldTestId,
+  id,
   onApply,
   ...props
 }: DateInputProps): React.ReactNode => {
@@ -320,8 +322,9 @@ export const DateInput = ({
       onFocus={callMultiple(handleFieldEnter, onFocus)}
       {...props}
     >
-      <input
-        type="hidden"
+      <VisuallyHidden
+        id={id}
+        Component="input"
         name={name}
         value={value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : ''}
       />

diff --git a/packages/vkui/src/components/DateInput/Readme.md b/packages/vkui/src/components/DateInput/Readme.md
@@ -82,10 +82,11 @@ const Example = () => {
           ]}
         />
       </FormItem>
-      <FormItem>
+      <FormItem top="Результат" htmlFor="date">
         <Flex>
           <LocaleProvider value={locale}>
             <DateInput
+              id="date"
               value={value}
               onChange={setValue}
               enableTime={enableTime}

diff --git a/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx b/packages/vkui/src/components/DateRangeInput/DateRangeInput.tsx
@@ -180,6 +180,7 @@ export const DateRangeInput = ({
   calendarTestsProps,
   startDateTestsProps,
   endDateTestsProps,
+  id,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
@@ -300,8 +301,9 @@ export const DateRangeInput = ({
       onFocus={callMultiple(handleFieldEnter, onFocus)}
       {...props}
     >
-      <input
-        type="hidden"
+      <VisuallyHidden
+        id={id}
+        Component="input"
         name={name}
         value={
           value

diff --git a/packages/vkui/src/components/DateRangeInput/Readme.md b/packages/vkui/src/components/DateRangeInput/Readme.md
@@ -69,10 +69,11 @@ const Example = () => {
           ]}
         />
       </FormItem>
-      <FormItem>
+      <FormItem top="Результат" htmlFor="date-range">
         <Flex>
           <LocaleProvider value={locale}>
             <DateRangeInput
+              id="date-range"
               value={value}
               onChange={setValue}
               disablePast={disablePast}