fix(a11y): set role and aria attributes for pickers (#128)

Author: ValeraS

src/components/DatePicker/hooks/useDatePickerProps.ts

@@ -105,7 +105,10 @@ export function useDatePickerProps<T extends DateTime | RangeValue<DateTime>>(
             state.dateFieldState.isEmpty && !isActive && props.placeholder
                 ? {value: ''}
                 : undefined,
-            {controlRef: handleRef},
+            {
+                controlRef: handleRef,
+                controlProps: {role: 'combobox', 'aria-expanded': state.isOpen},
+            },
         ),
         calendarButtonProps: {
             ref: calendarButtonRef,

src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts

@@ -83,6 +83,8 @@ export function useRelativeDatePickerProps(
                     setOpen(true);
                 }
             },
+            role: 'combobox',
+            'aria-expanded': isOpen,
         },
     };
 

src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx

@@ -33,6 +33,7 @@ import type {Preset} from './components/Presets/defaultPresets';
 import type {PresetTab} from './components/Presets/utils';
 import {useRelativeRangeDatePickerState} from './hooks/useRelativeRangeDatePickerState';
 import type {RelativeRangeDatePickerStateOptions} from './hooks/useRelativeRangeDatePickerState';
+import {i18n} from './i18n';
 import {getDefaultTitle} from './utils';
 
 import './RelativeRangeDatePicker.scss';
@@ -136,7 +137,7 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                     }
                 }}
                 controlProps={{
-                    'aria-haspopup': 'dialog',
+                    role: 'combobox',
                     'aria-expanded': open,
                     disabled: isMobile,
                     className: b('input', {mobile: isMobile}),
@@ -181,6 +182,7 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                         extraProps={{
                             'aria-haspopup': 'dialog',
                             'aria-expanded': open,
+                            'aria-label': i18n('Range date picker'),
                         }}
                         onClick={() => {
                             setIsActive(true);

src/components/RelativeRangeDatePicker/__tests__/form.test.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import {dateTime} from '@gravity-ui/date-utils';
 import userEvent from '@testing-library/user-event';
 
-import {render, screen, within} from '../../../../test-utils/utils';
+import {act, render, screen, within} from '../../../../test-utils/utils';
 import type {Value} from '../../RelativeDatePicker';
 import type {RangeValue} from '../../types';
 import {RelativeRangeDatePicker} from '../RelativeRangeDatePicker';
@@ -126,9 +126,11 @@ describe('RelativeRangeDatePicker: form', () => {
         expect(inputs[3]).toHaveValue('now');
 
         await userEvent.tab();
-        const fields = within(document.activeElement as HTMLElement).getAllByRole('textbox');
+        const fields = within(document.activeElement as HTMLElement).getAllByRole('combobox');
         expect(fields.length).toBe(2);
-        fields[0].focus();
+        act(() => {
+            fields[0].focus();
+        });
         await userEvent.keyboard('{ArrowUp}');
 
         expect(inputs[0]).toHaveValue('absolute');

src/components/RelativeRangeDatePicker/i18n/en.json

@@ -4,5 +4,6 @@
   "\"To\"": "\"To\"",
   "\"To\" is required.": "\"To\" is required.",
   "\"From\" can't be after \"To\".": "\"From\" can't be after \"To\".",
-  "to": "to"
+  "to": "to",
+  "Range date picker": "Range date picker"
 }

src/components/RelativeRangeDatePicker/i18n/ru.json

@@ -4,5 +4,6 @@
   "\"To\"": "«До»",
   "\"To\" is required.": "«До» обязательно.",
   "\"From\" can't be after \"To\".": "«От» не может быть позже чем «До».",
-  "to": "до"
+  "to": "до",
+  "Range date picker": "Выбор диапазона дат"
 }