Problem/Motivation
Discovered while working on
📌
Deprecate and remove jQuery UI datepicker
Fixed
Core currently uses native datepickers when browsers support them. This approach introduces accessibility and consistency problems
Currently, If a browser supports native datepicker, then that is used instead of the jQueryUI datepicker. date.es6.js uses Modernizr to determine native datepicker support, and only applies jQueryUI to the ~9% of browsers that do not support it.
The accessibility capabilities and overall experience of native datepickers vary greatly depending on the browser. For example:
(Win 10) Edge:
- no indication of day of week (not a11y necessarily, but not consistent with other browsers).
- Can't exit datepicker with escape key, only the close button.
-Testing with NVDA. Datepicker will open with return key if field is in focus. Nothing is announced to make this evident (but unsure if SR users expect this behavior). Once opened, screenreader does not inform the user that it has been opened. Within the datepicker, screenreader does not announce any activity. Tab/Arrow activity has no response from screenreader. The only way to exit is to tab to the close button and hit return. This is unlikely to occur since the screenreader does not inform the user of what element they are on within the datepicker.
- While this technically meets contrast/not color-only requirements, it's awfully difficult to distinguish which column is focused.
(OSX) Opera & Firefox:
-Can't open datepicker with keyboard navigation
-An interactable "clear all" button is provided that can't be accessed via keyboard navigation
(OSX) Opera & Chrome
-Screenreader says that values in the stepper can be increased/decreased with control-option-arrow up/down. This key combination does not change the value. Arrow keys on their own do (which is better than nothing, but contradicts the instructions read to the user)
(OSX) Chrome
-Datepicker not at all usable for screenreader users, and the results too inconsistent to accurately summarize as text.
It's also worth noting that the accessibility of jQueryUI's datepicker is quite good, but that is unfortunately being deprecated due to jQueryUI end of life. It's still serves as a good reference
Proposed resolution
Find an accessible datepicker library or create a custom one that provides better accessibility.
Libraries evaluated:
- Screenreader does not read dates when focused - just reads the month/year twice and "Previous Button Next Button"
- - poor keyboard navigation
- (not to be confused with AirBnB's datepicker) - Screenreader does not repond to any actions within Datepicker
- . However, it is part of a much larger library, it was not clear how to install it, the code is obfuscated, and the repos have very little activity (it's been almost two years since anything other than minor changes were implemented)
- Does not work with IE11
- screenreader does not acknowledge any activity within datepicker
- The smallest the minified library can get is 425k, even after stripping out momentjs locale files. That's a few K shy of the all of jQueryUI. There are also a few styling conflicts with Drupal core that could probably be addressed but likely not worth the effort for such a giant library.
- http://www.oaa-accessibility.org/examplep/datepicker1/ Keyboard nav is good. Screenreader is not perfect but responds where it should - changing what it says is not too difficult. However, from what I can tell there is no repo, just an online example (would love to find out otherwise). If no other good options come up, this could be used as a starting point for a custom one.
Another possibility is removing datepickers altogether, which I don't suspect would get full buy-in since there are benefits to datepickers that can't be replicated in other ways, and it would be taking it away from users accustomed to having it.
Remaining tasks
Add research findings from #20 to the issue summary.
Find a good library or created one
User interface changes
New datepicker.
API changes
Quite likely
Data model changes
n/a
Release notes snippet
n/a