Skip to content

Instantly share code, notes, and snippets.

@bjankord

bjankord/a11y-datepicker-notes.md

Created December 7, 2018 16:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bjankord/3407b556b29c2e5fc9954aec50ebc7b3 to your computer and use it in GitHub Desktop.
Save bjankord/3407b556b29c2e5fc9954aec50ebc7b3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
a11y-datepicker-notes.md

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