react-dates uses an aria-describedby on the input attribute that points to a p element with the following content within it. "Press the down arrow key to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates."
- Focusing on the input reads, "Date, edit text" followed by the aria-describedby content.
- Pressing ? key opens a modal with the following keyboard shortcuts:
- ↵ Select the date in focus.
- ←/→ Move backward (left) and forward (right) by one day.
- ↑/↓ Move backward (up) and forward (down) by one week.
- PGUP/PGDN Switch months.
- HOME/END Go to the first or last day of a week.
- ESC Return to the date input field.
- ? Open this panel.
Each table cell containing a day in the date picker has an aria-label, "Thursday, December 13, 2018" along with tabIndex set to "-1". This label is read as the user moves through the date picker via a keyboard.