Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

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:

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.