Material-ui-pickers: [DatePicker] Improve accessibility

Created on 20 Jan 2020 · 2Comments · Source: mui-org/material-ui-pickers

Testing!

I'm not an a11y expert but I was comparing the performance of the MUI datepicker with an accessible version (https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with a couple of different screenreaders, and it doesn't seem to be very usable with the following screenreader/browser combinations:

VoiceOver & Safari, Mac OS Catalina 10.15.2
ChromeVox Classic Extension 53.0.2784.6 & Chrome 79.0.3945.130, Mac OS Catalina 10.15.2
JAWS 2019.1912.1 & Chrome 79.0.3945.130, Windows 10
NVDA 2019.2.1 & Firefox 68.4.1esr, Windows 10

Environment

https://material-ui.com/components/pickers/#material-ui-pickers
VoiceOver & Safari, Mac OS Catalina 10.15.2
ChromeVox Classic Extension 53.0.2784.6 & Chrome 79.0.3945.130, Mac OS Catalina 10.15.2
JAWS & Chrome, Windows 10
NVDA & Firefox, Windows 10

Steps to reproduce

Test https://material-ui.com/components/pickers/#material-ui-pickers "Date picker inline" example with the screenreader combinations.
Test https://material-ui.com/components/pickers/#material-ui-pickers "Date picker dialog" example with the screenreader combinations.

Expected behavior

I'd expect to see behaviour like:
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html
as per the standards described in https://www.w3.org/TR/wai-aria-practices/#dialog_modal

Actual behavior

MUI datepicker - inline option:

JAWS + Chrome, Windows 10:

Tab navigation to the calendar button does not announce the chosen date.
Selecting the calendar button does not announce that a modal dialog has been opened.
Selecting the calendar button announces all the text and day buttons in the calendar immediately.
Next month buttons are announced as “unlabelled button”.
Using SPACE or ENTER key on the number buttons does not close the datepicker dialog window.

NVDA + Firefox, Windows 10:

Tab navigation to the calendar button does not announce the chosen date.
Selecting the calendar button does not announce that a modal dialog has been opened, in fact, it announces nothing.
Next month buttons are announced as “button” only.
Using SPACE or ENTER key on the number buttons does not close the datepicker dialog window.

VoiceOver + Safari, Mac OS:

Selecting the calendar button announces “and 10 more items (group)“, which doesn’t make sense.
The focus is not brought to the current date when opening the table by selecting the calendar button.
Next month buttons are announced as “button” only.
Using SPACE or ENTER key on the number buttons does not close the datepicker dialog window.

VoiceOver + Chrome, Mac OS:

Selecting the calendar button announces “and 4 more items (group)“, which doesn’t make sense.
The focus is not brought to the current date when opening the table by selecting the calendar button.
Next month buttons are announced as “button” only.
Using SPACE on the number buttons does not close the datepicker dialog window.

ChromeVox + Chrome, Mac OS:

Selecting the calendar button announces nothing.
The focus is not brought to the current date when opening the calendar by selecting the calendar button, instead the focus is on the whole dialog.
Next month buttons are announced as “button” only.
Using arrow keys changes the date but does not announce anything or change the focus.
Using SPACE on the number buttons does not close the datepicker dialog window.

MUI datepicker - dialog option:

JAWS + Chrome, Windows 10:

Tab navigation to the calendar button does not announce the chosen date.
Selecting the calendar button announces a dialog has been opened but does not bring the focus to the current date.
Next month buttons are announced as “unlabelled button”.
Using SPACE or ENTER key on the number buttons does not close the datepicker dialog window.

NVDA + Firefox, Windows 10:

Tab navigation to the calendar button does not announce the chosen date.
Selecting the calendar button announces a clickable dialog, but focus is not on the current date, only the whole dialog.
Next month buttons are announced as “button” only.
Using SPACE or ENTER key on the number buttons does not close the datepicker dialog window.

VoiceOver + Safari, Mac OS:

Selecting the calendar button announces “2014 and 14 more items (group)“, which doesn’t make sense.
The focus is not brought to the current date when opening the table by selecting the calendar button.
Next month buttons are announced as “button” only.
Using SPACE key on the number buttons does not close the datepicker dialog window.

VoiceOver + Chrome, Mac OS:

Selecting the calendar button announces that the current date is selected, but doesn’t announce a dialog has been opened.
The focus is not brought to the current date when opening the table by selecting the calendar button.
Next month buttons are announced as “button” only.
Using SPACE on the number buttons does not close the datepicker dialog window.

ChromeVox + Chrome, Mac OS:

Selecting the calendar button announces “enter dialog, dialog” only.
The focus is not brought to the current date when opening the calendar by selecting the calendar button, instead the focus is on the whole dialog, and the first tab navigation brings you to the year, which is announced as a button, but ENTER on this button closes the dialog.
SPACE on the year button allows you to change the year, but the focus is not brough to the current year option, and tab navigation brings you to the first year entry option - 1899.
Tabbing from the year button brings you to the current date, which is announced as a button, but SPACE does nothing and ENTER closes the dialog.
Next month buttons are announced as “button” only.
Using arrow keys changes the date but does not announce anything or change the focus.
Using SPACE on the number buttons does not close the datepicker dialog window.