Date picker: Update keyboard navigation
# Problem - Related to gitlab-org/gitlab-services/design.gitlab.com#1142 - 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 ![Screenshot_2021-09-30_at_16.07.](/uploads/7f07cbf3141506f0d5a4c8522b99b39d/Screenshot_2021-09-30_at_16.07..gif) # Proposal 1. Update tab sequence to something similar to this [accessible date picker](hhttps://duetds.github.io/date-picker/): If gitlab-org/gitlab-services/design.gitlab.com#1142 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 2. Stop the scrolling when moving up and down on the date picker days
issue