Skip to content

[EuiSuperDatePicker][A11y] Ensure accessible date/time selection #9085

@mgadewoll

Description

@mgadewoll

Description

Relates to:

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

  1. month/year selection

    • the dropdown toggle element requires a role="button" and aria-controls (linking to the popover)
    • the listbox requires role="listbox" and aria-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
  2. day selection

    • the listbox requires aria-activedescendant
  3. time selection

    • the listbox requires aria-activedescendant
  • 🐛 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

Impact and severity

🔴 High: The component does not fulfill the WCAG A requirements.

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

Screen.Recording.2025-10-07.at.13.59.38.mov

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions