Date picker: Update keyboard navigation
Problem
- Related to gitlab-org/gitlab-services/design.gitlab.com#1142 (closed)
- Currently, we can't access the month arrows or MM / YYYY dropdowns in date picker component via keyboard
- When navigating up and down on the dates, the screen also scrolls
Proposal
- Update tab sequence to something similar to this accessible date picker:
If gitlab-org/gitlab-services/design.gitlab.com#1142 (closed) goes ahead...
- Tab 1 = highlight text input
- Tab 2 = highlight month-back-arrow button [hit enter to go to previous month]
- Tab 3 = highlight month dropdown [hit enter to activate, up/down arrows to navigate months, enter to select month]
- Tab 4 = highlight year dropdown [hit enter to activate, up/down arrows to navigate years, enter to select year]
- Tab 5 = highlight month-forward-arrow button [hit enter to go to next month]
- Tab 6 = highlight today's date in the calendar [arrows to navigate days/months and enter to submit]
- Tab 7 = exits date picker without selecting date
If not...
- Tab 1 = highlight text input
- Tab 2 = highlight calendar button [hit enter to open calendar]
- Tab 3 = highlight month-back-arrow button [hit enter to go to previous month]
- Tab 4 = highlight month dropdown [hit enter to activate, up/down arrows to navigate months, enter to select month]
- Tab 5 = highlight year dropdown [hit enter to activate, up/down arrows to navigate years, enter to select year]
- Tab 6 = highlight month-forward-arrow button [hit enter to go to next month]
- Tab 7 = highlight today's date in the calendar [arrows to navigate days/months and enter to submit]
- Tab 8 = exits date picker without selecting date
- Stop the scrolling when moving up and down on the date picker days
Edited by Nick Post
