Add a new, accessible datepicker library to avoid using native browser datepickers for accessibility and consistency

Created on 16 September 2019, almost 5 years ago
Updated 5 July 2024, 2 months ago

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

๐Ÿ› Bug report
Status

Active

Version

11.0 ๐Ÿ”ฅ

Component
Datetimeย  โ†’

Last updated about 9 hours ago

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Needs accessibility review

    Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024