Date picker component limited keyboard support

[jeffreychen-eightfold]

The date picker components do not have keyboard support for the next month and next year arrow buttons at the top of the component or other buttons like the Today button. This is desired for accessibility.

Related links JIRA https://eightfoldai.atlassian.net/browse/ENG-38676 Guidelines https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog

[dkilgore-eightfold]

Tracking with ENG-41361

[dkilgore-eightfold]

@jeffreychen-eightfold Here are the keyboard shortcuts:

Tab - Places focus on the calendar in the dropdown

Date mode: Arrow left - Previous day Arrow right - Next day Arrow down - Next week Arrow up - Previous week Page down - Next month Page up - previous month CTRL + Arrow left - Previous year CTRL + Arrow right - Next year

Week mode: Arrow left - N/A Arrow right - N/A Arrow down - Next week Arrow up - Previous week Page down - Next month Page up - previous month CTRL + Arrow left - Previous year CTRL + Arrow right - Next year

Month mode: Arrow left - Previous month Arrow right - Next month Arrow down - Next month row Arrow up - Previous month row CTRL + Arrow left - Previous year CTRL + Arrow right - Next year Page down - N/A Page up - N/A

Year mode: Missing selected style, should map to the same pattern as Decade mode.

Decade mode: Arrow left - Previous decade Arrow right - Next decade Arrow down - Next decade row Arrow up - Previous decade row CTRL + Arrow left - Previous century CTRL + Arrow right - Next century Page down - N/A Page up - N/A

So there is a bug in Year mode where the selected style is missing, it should map to the same pattern used by Decade. Will fix this and consider focus on the buttons as well to provide additional A11y functionality.