duetds / date-picker

Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
https://www.duetds.com
MIT License
1.73k stars 68 forks source link

Focus management on out-of-range dates #94

Open jonnystening opened 3 years ago

jonnystening commented 3 years ago

Is your feature request related to a problem? Please describe. When navigating the date picker with JAWS/Chrome, the keyboard focus jumps to the top of the page if an out of range date (such as a disabled or date outside of the min/max values) is chosen by clicking the button.

Steps to reproduce

  1. Turn on JAWS
  2. Open https://duetds.github.io/date-picker/ in Chrome
  3. Navigate to the 'Minimum and maximum date' heading (H key shortcut)
  4. Arrow forward to the date-picker button and click Enter
  5. Navigate to the month selector which is on August, and arrow down to select September.
  6. Tab forward until you reach the table
  7. Arrow forward until you reach the button for the 19th, or any out of range date, and click Enter

Expected result No click action (as per disabled dates), or focus returns to date-picker control next to the input (which is what happens in NVDA/Firefox).

Actual result The 19th day is clicked, and focus moves to the top of the page. Using the Tab or arrow keys to move forward takes you to the page heading.

Tested