search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.59k stars 1.76k forks source link

[a11y]: Date picker calendar, if dismissed with Esc without interacting, cannot be retriggere #14772

Open mbgower opened 9 months ago

mbgower commented 9 months ago

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

https://react.carbondesignsystem.com/?path=/story/components-datepicker--single-with-calendar#storybook-preview-wrapper

React version

https://react.carbondesignsystem.com/?path=/story/components-datepicker--single-with-calendar#storybook-preview-wrapper

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

Although the function to dismiss the calendar with Esc was implemented in https://github.com/carbon-design-system/carbon/pull/12567 there is a new bug as a result of that.

Basically, if I immediately dismiss the calendar by pressing Esc, without actually going into the calendar, it seems impossible to make the calendar reappear with a keyboard. I'm still able to with a mouse by:

  1. clicking away from the date picker
  2. clicking back onto the date picker
image

NOTE that if I first arrow into the calendar before dismissing, the functionality is fine. So whatever is triggering the calendar to 'reset' after being dismissed is somehow failing if the focus isn't first moved to the calendar before it is dismissed.

WCAG 2.1 Violation

2.1.1 Keyboard

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-datepicker--single-with-calendar#storybook-preview-wrapper

Steps to reproduce

  1. Launch any of the data pickers with calendars in Carbon's storybook, such as https://react.carbondesignsystem.com/?path=/story/components-datepicker--single-with-calendar#storybook-preview-wrapper
  2. Navigate by Tab into the main storybook panel until the focus lands on the date input. A focus indicator will appear around the input, and a calendar opens up image
  3. Press Esc. The calendar disappears
  4. Tab away from the date input, then Shift+Tab back again. The calendar does not appear
  5. Press Enter, Down Arrow, Space bar, and any combination of these with modifier keys. Nothing seems to cause the calendar to appear.
  6. Refresh the page (i.e., with Ctrl+R) and then navigate by Tab to the date picker. The calendar reappears.

Note that if I use a mouse or actually navigate to the calendar before dismissing with Esc, the calendar will appear when it gets focus again:

  1. Repeat step 1 above
  2. Arrow down into the calendar, then press Esc. The calendar collapses and the input has the focus again
  3. Tab away from the input and then Shift_Tab back. The calendar once again appears. The same behaviour can be realized with a mouse
  4. Click on the input. A calendar appears.
  5. Press Esc. The calendar collapses.
  6. Click the input. Nothing happens, HOWEVER.
  7. Click any area outside the input, then click the input again. The calendar reappears.

Code of Conduct

OleksandrDzindziura commented 3 months ago

Hey! Any updates about it?