-
Notifications
You must be signed in to change notification settings - Fork 858
Open
Labels
Description
Description
Relates to:
- [Search:Behavioral Analytics page]Not fully accessible date pickers for Month and time via keyboard kibana#201951
- [Search:Behavioral Analytics page]Days are not announced for date picker kibana#202145
The EuiSuperDatePicker
currently does not fulfill all Accessibility requirements for the different date/time selections.
While the selections work for standard keyboard navigation, they are not working correctly nor semantically for screen reader usage.
ℹ️ The issues stem from the underlying react-datepicker
component (code).
Screen.Recording.2025-10-07.at.22.43.26.mov
Requires changes
-
month/year selection
- the dropdown toggle element requires a
role="button"
andaria-controls
(linking to the popover) - the listbox requires
role="listbox"
andaria-activedescendant
on the list element to ensure correct focus behavior and announcement - the selectable items require
role="option"
- requires manual
scrollIntoView
for the options to ensure keyboard navigation scrolls the listbox
- the dropdown toggle element requires a
-
day selection
- the listbox requires
aria-activedescendant
- the listbox requires
-
time selection
- the listbox requires
aria-activedescendant
- the listbox requires
- 🐛 once a time is selected the
this.state.preSelection
doesn't update anymore and no new time can be selected- we should remove this update on
componentDidUpdated
to fix this
- we should remove this update on
Impact and severity
🔴 High: The component does not fulfill the WCAG A requirements.
- 2.1.1: Keyboard (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html)
- 4.1.2: Name, Role, Value (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html)
- 1.3.1: Info and Relationships (Level A)(https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)
Expected behavior
The selections should be fully keyboard navigable and the selections should be correctly announced.
Month selection
Screen.Recording.2025-10-07.at.12.40.00.mov
Day selection
Screen.Recording.2025-10-07.at.14.21.45.mov
Time selection