fix: date picker a11y bug (#16219)

* fix: date picker a11y bug * fix: update tests * fix: update tests avt * fix: update avt tests
carbon-design-system · May 8, 2024 · f006025 · f006025
1 parent 5f35edd
commit f006025
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 29 deletions.
diff --git a/e2e/components/DatePicker/DatePicker-test.avt.e2e.js b/e2e/components/DatePicker/DatePicker-test.avt.e2e.js
@@ -87,7 +87,7 @@ test.describe('@avt DatePicker', () => {
       },
     });
 
-    // for some reason the firs tab is not working to focus the first tabstop, so focusing manually
+    // for some reason the first tab is not working to focus the first tabstop, so focusing manually
     await page.getByRole('textbox', { name: 'Date Picker label' }).focus();
     await expect(
       page.getByRole('textbox', { name: 'Date Picker label' })
@@ -96,9 +96,6 @@ test.describe('@avt DatePicker', () => {
     await page.keyboard.press('ArrowDown');
     await expect(page.locator('span.today')).toBeFocused();
     await page.keyboard.press('Escape');
-    await expect(
-      page.getByRole('textbox', { name: 'Date Picker label' })
-    ).toBeFocused();
     await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
       /open/
     );
@@ -126,18 +123,7 @@ test.describe('@avt DatePicker', () => {
     await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('Enter');
-    await expect(
-      page.locator('input#date-picker-input-id-start')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
-      /open/
-    );
-    await page.keyboard.press('Tab');
-    await expect(
-      page.locator('input#date-picker-input-id-finish')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
-    await page.keyboard.press('Escape');
+    await page.keyboard.press('Enter');
     await expect(
       page.locator('input#date-picker-input-id-finish')
     ).toBeFocused();

diff --git a/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js b/e2e/components/FluidDatePicker/FluidDatePicker-test.avt.e2e.js
@@ -70,7 +70,6 @@ test.describe('@avt FluidDatePicker', () => {
     await page.keyboard.press('ArrowDown');
     await expect(page.locator('span.today')).toBeFocused();
     await page.keyboard.press('Escape');
-    await expect(page.getByRole('textbox', { name: 'Label' })).toBeFocused();
     await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
       /open/
     );
@@ -98,18 +97,6 @@ test.describe('@avt FluidDatePicker', () => {
     await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('Enter');
-    await expect(
-      page.locator('input#date-picker-input-id-start')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).not.toHaveClass(
-      /open/
-    );
-    await page.keyboard.press('Tab');
-    await expect(
-      page.locator('input#date-picker-input-id-finish')
-    ).toBeFocused();
-    await expect(page.locator('div.flatpickr-calendar')).toHaveClass(/open/);
-    await page.keyboard.press('Escape');
     await expect(
       page.locator('input#date-picker-input-id-finish')
     ).toBeFocused();

diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx
@@ -444,6 +444,8 @@ const DatePicker = React.forwardRef(function DatePicker(
 
   // fix datepicker deleting the selectedDate when the calendar closes
   const onCalendarClose = (selectedDates, dateStr) => {
+    endInputField?.current?.focus();
+    calendarRef.current.calendarContainer.classList.remove('open');
     setTimeout(() => {
       if (
         lastStartValue.current &&
@@ -670,6 +672,9 @@ const DatePicker = React.forwardRef(function DatePicker(
       }
 
       if (match(event, keys.ArrowDown)) {
+        if (event.target == endInputField.current) {
+          calendar.calendarContainer.classList.add('open');
+        }
         const {
           calendarContainer,
           selectedDateElem: fpSelectedDateElem,