search

gpbl / react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.
https://daypicker.dev
MIT License
6.09k stars 732 forks source link

Accessibility not working on Month and Years dropdown #2587

Open tresorama opened 2 days ago

tresorama commented 2 days ago

Expected Behavior

On tab navigation we should be able to reach the "select", then on "enter / space" press we should open the "select" and moving between "options" with "arrows" press.

Actual Behavior

The "select" of the drop-down is hidden under the drop-down label ( that shows current selected option). Because of this the "select" is not reachable with Tab navigation.

Example

https://daypicker.dev/docs/navigation#hidenavigation

Version Affected: 9.3.0

gpbl commented 21 hours ago

Thank you for your feedback. It appears that the select is not receiving the focus outline, but it is actually focused.

To open the select element, you can press the “space” key when tabbing on it (after the "Next Month" button):

To resolve this issue, we need to apply a border as outline to the caption when the select element is focused. I believe the outline was working before, but it appears to have been removed for some reason.