Accessibility of Date Picker Widget: ARIA Widget Roles and Keyboard Support

[jongund]

Support the following widget roles:

• Dialog
• Buttons for previous and next month
• Calendar Grid (contained in role application) for navigating dates
• Need to add a button to close dialog

Keyboard Support

Open Date Picker

• Tab into date textbox automatically opens and moves focus to Date Picker Dialog box
• Focus should be on the current date gridcell in the calendar grid after the dialog box opens; or If a date had already been entered in the textbox focus should be in the date gridcell identified in the texbox

Close Date Picker and no change to textbox

• ESCape closes Date Picker Dialog box and moves focus to text box with no change to the date in the textbox
• Enter key on the Close Button closes Date Picker Dialog box and moves focus to text box with no change to the date in the textbox

Close Date Picker and update date in textbox

• Enter key when focus is on a date gridcell in the calendard grid closes Date Picker Dialog box and moves focus to text box with the last selected date from the calendar grid populating the textbox

Navigate dates (Calendar Grid)

• up, down, left and right keys move focus and selected date between gridcells in the calendar grid

Tab Navigation in Date Picker Dialog Box

• Keyboard focus stays in date picker dialog box until dialog box closes
• Tab moves between:
  • Close button
  • Month navigation buttons (next month, previous month)
  • Calendar grid

[jongund]

Here is a link to an example Date Picker with ARIA support and Keyboard/Focus management Support: ​http://oaa-accessibility.org/example/15/

[Scott González]

Duplicate of #9298.
Thanks for the detailed list, but we already have an open ticket for datepicker accessibility (#9298), documentation on what affects datepicker's accessibility on the ​planning wiki, and have started a complete rewrite in the ​datepicker branch.