Problem/Motivation
Problem 1: jQueryUI is going to be deprecated
As part of this deprecation, the jQueryUI datepicker is among the components that need to be removed/replaced.
As mentioned in the parent issue: #3067261: [Plan] Remove jQuery UI components used by Drupal core and replace with a set of supported solutions
The OpenJS Foundation lists jQuery UI as an Emeritus project in https://openjsf.org/projects/ which is described as:
Emeritus projects are those which the maintainers feel have reached or are nearing end-of-life
Some kind of replacement is necessary, be it another library, or relying on native. Relying on native should be a last resort due to problem 2...
Problem 2: Core currently uses native datepickers when browsers support it. This approach introduces accessibility and consistency problems
Some context: 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.
Because of these inconsistencies and a11y issues, the library that replaces jQuery datepicker should be used in all browsers, not just the 9% that don't provide native datepickers.
Proposed resolution
Determine the accessibility requirements of the datepicker and timepicker (there is no official spec on this - at one point there was...)
Evaluate libraries, first against the agreed accessibility requirements. If more than one option exists after the accessibility evaluation, create comparison tables.
Prototype and manually test
Once a choice has been tested/vetted/signed-off my maintainers/managers, open implementation followup issue
Remaining tasks
Get input/agreement that the reported accessibility issues with native datepickers necessitate using a library in all browsers.
Determine the accessibility requirements, particularly since an official spec is not available.
Get a list of libraries that might meet these requirements and evaluate.
User interface changes
Different datepicker
API changes
...
Data model changes
N/A
Release notes snippet
...