[EuiSelectable][A11y] Search input is not read out by screen readers by jorgeoliveira117 · Pull Request #9223 · elastic/eui

jorgeoliveira117 · 2025-11-18T17:47:16Z

Summary

Updates focus behavior in EuiSelectable and ARIA attributes to match best practices. When focusing the search input, the active option remains visually focused, and aria-activedescendant is only added when an option is active.

Why are we making this change?

To preserve focus: Moving focus between the search input and the item list should keep the active option visually focused, improving keyboard navigation.
ARIA compliance: aria-activedescendant should only be present when there is an active descendant. An empty string is invalid.

Screenshots

Before:
When we open the popover/dialog and focus inside the Selectable component, the first item on the list is also focused

Before.mp4

After:
When we focus inside the Selectable component, now the first item isn't focused, only the search input

After.mp4

Impact to users

🟢 No breaking changes. No code updates are required on consumer side.

ℹ️ This fix has been run in Kibana CI and required test changes have been prepared here.

✨ User value

Better keyboard navigation as active option remains visible when focusing the search input
Improved accessibility as ARIA attributes follow best practices
More consistent UX when switching between search and list

QA

General checklist

Browser QA
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Code quality checklist
- Added or updated jest and cypress tests
Release checklist
- A changelog entry exists and is marked appropriately
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)

… input for better screen reader support

…focus for improved behavior

…m snapshots for improved accessibility

…read-out

…o enhance accessibility

… test for improved accuracy

…read-out

mgadewoll

Thanks for picking up this A11y fix!
I left a couple small comments for improvements, but in general the proposed update works as expected (tested in Jaws, NVDA and VoiceOver). 🎉

⚠️ Let's make sure to run the changes in Kibana CI and wait for the results to understand what might break and if there is anything else we might need to address.

packages/eui/changelogs/upcoming/9223.md

packages/eui/src/components/selectable/selectable.tsx

…roved readability

…ibility in story and docs example

…read-out

This reverts commit dcdfa9c.

…read-out

mgadewoll · 2025-11-26T21:39:56Z

ℹ️ @jorgeoliveira117 I merged main into your branch to have it updated before merging.
I also confirmed that the latest run of these changes on Kibana CI looked clean 👍

mgadewoll

🟢 The changes work as expected and fix the A11y issue.
Thank you for contributing! 🎉

elasticmachine · 2025-11-26T21:42:00Z

💚 Build Succeeded

History

💚 Build #2040 succeeded f865f0c
💔 Build #2038 failed dcdfa9c
💚 Build #2033 succeeded 2b4af79
💚 Build #2030 succeeded 2ce4f0d
💚 Build #2006 succeeded 750cbde
💚 Build #2003 succeeded 70a556e

elasticmachine · 2025-11-26T21:55:16Z

💚 Build Succeeded

Buildkite Build
Commit: b5de3ca

History

💚 Build #5297 succeeded f865f0c
💔 Build #5296 failed dcdfa9c
💚 Build #5293 succeeded 2b4af79
💚 Build #5290 succeeded 2ce4f0d
💚 Build #5285 succeeded 10eca7e
💚 Build #5269 succeeded 750cbde

## Dependency updates - `@elastic/eui`: `v109.2.0` ⏩ `v110.0.0` --- ## Changes - Updates usages of the `message` prop on `EuiInMemoryTable` to `noItemsMessage` - Updates usages of `EuiSearchBar`'s `onChange` prop to check for the `query` argument, as it may be `null` now - Removes obsolete `color` props on implementations of `EuiPageTemplate` and `EuiPageTemplate.Header` (`color` prop wasn't applied before either) ## Package updates ### `@elastic/eui` v110.0.0 - Updated `EuiSuperDatePicker` to expose plain text `utcOffset` and `timeZoneName` in `timeZoneDisplayProps.customRender` render function ([#9245](elastic/eui#9245)) - Updated `EuiHeaderLogo` to add a hover style ([#9240](elastic/eui#9240)) - Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package ([#9239](elastic/eui#9239)) - Updated `EuiAvatar` to support Emoji Sequence ("advanced") in the `initials` prop ([#9227](elastic/eui#9227)) - Added `color` prop on `EuiPageHeader` to support `transparent` (default) and `plain` backgrounds. ([#9220](elastic/eui#9220)) - Added `color` prop on `EuiPage` to support `transparent` (default) and `plain` backgrounds. ([#9220](elastic/eui#9220)) - Updated `EuiPageTemplate` to ensure `panelled=true` renders a `EuiPageHeader` with a plain background by default ([#9220](elastic/eui#9220)) - Removed the default background style on `EuiPageTemplate`'s outer wrapper ([#9220](elastic/eui#9220)) **Bug fixes** - Fixed icon size in `EuiSuperDatePicker`'s time window buttons when `compressed={true}` ([#9245](elastic/eui#9245)) - Fixed `EuiIcon` visibility issue with `logoElastic` when `color` is set to `text` or `ghost` in light mode ([#9247](elastic/eui#9247)) - Fixed `EuiInMemoryTable` support for controlled search for plain text (when `searchFormat="text"`) by properly handling `search.query` and `search.defaulQuery` ([#9142](elastic/eui#9142)) **Breaking changes** - Removed deprecated `message` prop from `EuiInMemoryTable`, use `noItemsMessage` instead ([#9234](elastic/eui#9234)) **Accessibility** - Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them ([#9239](elastic/eui#9239)) - Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers ([#9223](elastic/eui#9223)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

## Dependency updates - `@elastic/eui`: `v109.2.0` ⏩ `v110.0.0` --- ## Changes - Updates usages of the `message` prop on `EuiInMemoryTable` to `noItemsMessage` - Updates usages of `EuiSearchBar`'s `onChange` prop to check for the `query` argument, as it may be `null` now - Removes obsolete `color` props on implementations of `EuiPageTemplate` and `EuiPageTemplate.Header` (`color` prop wasn't applied before either) ## Package updates ### `@elastic/eui` v110.0.0 - Updated `EuiSuperDatePicker` to expose plain text `utcOffset` and `timeZoneName` in `timeZoneDisplayProps.customRender` render function ([elastic#9245](elastic/eui#9245)) - Updated `EuiHeaderLogo` to add a hover style ([elastic#9240](elastic/eui#9240)) - Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package ([elastic#9239](elastic/eui#9239)) - Updated `EuiAvatar` to support Emoji Sequence ("advanced") in the `initials` prop ([elastic#9227](elastic/eui#9227)) - Added `color` prop on `EuiPageHeader` to support `transparent` (default) and `plain` backgrounds. ([elastic#9220](elastic/eui#9220)) - Added `color` prop on `EuiPage` to support `transparent` (default) and `plain` backgrounds. ([elastic#9220](elastic/eui#9220)) - Updated `EuiPageTemplate` to ensure `panelled=true` renders a `EuiPageHeader` with a plain background by default ([elastic#9220](elastic/eui#9220)) - Removed the default background style on `EuiPageTemplate`'s outer wrapper ([elastic#9220](elastic/eui#9220)) **Bug fixes** - Fixed icon size in `EuiSuperDatePicker`'s time window buttons when `compressed={true}` ([elastic#9245](elastic/eui#9245)) - Fixed `EuiIcon` visibility issue with `logoElastic` when `color` is set to `text` or `ghost` in light mode ([elastic#9247](elastic/eui#9247)) - Fixed `EuiInMemoryTable` support for controlled search for plain text (when `searchFormat="text"`) by properly handling `search.query` and `search.defaulQuery` ([elastic#9142](elastic/eui#9142)) **Breaking changes** - Removed deprecated `message` prop from `EuiInMemoryTable`, use `noItemsMessage` instead ([elastic#9234](elastic/eui#9234)) **Accessibility** - Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them ([elastic#9239](elastic/eui#9239)) - Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers ([elastic#9223](elastic/eui#9223)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

jorgeoliveira117 and others added 8 commits November 17, 2025 17:44

fix(EuiSelectable): clear active option index when focus is on search…

4998a58

… input for better screen reader support

fix(EuiSelectable): remove active option index reset on search input …

bf47cf1

…focus for improved behavior

fix(EuiSelectable): remove empty aria-activedescendant attributes fro…

59d3bd4

…m snapshots for improved accessibility

Merge branch 'main' into 9161-euiselectable-a11y-search-input-is-not-…

5dd142a

…read-out

test(EuiSelectable): add keyboard navigation test for ArrowDown key t…

648849d

…o enhance accessibility

fix(EuiFilterGroup): adjust ArrowDown key navigation in accessibility…

ffc6eac

… test for improved accuracy

Merge branch 'main' into 9161-euiselectable-a11y-search-input-is-not-…

70a556e

…read-out

chore: add changelog

750cbde

jorgeoliveira117 marked this pull request as ready for review November 20, 2025 11:26

jorgeoliveira117 requested a review from a team as a code owner November 20, 2025 11:26

mgadewoll self-requested a review November 20, 2025 15:25

mgadewoll requested changes Nov 21, 2025

View reviewed changes

packages/eui/changelogs/upcoming/9223.md Outdated Show resolved Hide resolved

packages/eui/src/components/selectable/selectable.tsx Show resolved Hide resolved

packages/eui/src/components/selectable/selectable.tsx Outdated Show resolved Hide resolved

mgadewoll added the accessibility label Nov 21, 2025

jorgeoliveira117 and others added 4 commits November 21, 2025 10:05

chore: tweak changelog

10eca7e

fix(EuiSelectable): simplify aria-activedescendant assignment for imp…

2ce4f0d

…roved readability

fix(EuiSelectable): add aria-label to searchProps for improved access…

40c0f19

…ibility in story and docs example

Merge branch 'main' into 9161-euiselectable-a11y-search-input-is-not-…

2b4af79

…read-out

jorgeoliveira117 requested a review from mgadewoll November 21, 2025 14:36

jorgeoliveira117 and others added 3 commits November 21, 2025 16:47

fix packa name

dcdfa9c

Revert "fix packa name"

f865f0c

This reverts commit dcdfa9c.

Merge branch 'main' into 9161-euiselectable-a11y-search-input-is-not-…

b5de3ca

…read-out

mgadewoll approved these changes Nov 26, 2025

View reviewed changes

mgadewoll merged commit 5dcdde8 into elastic:main Dec 1, 2025
7 checks passed

mgadewoll mentioned this pull request Dec 2, 2025

Update EUI to 110.0.0 elastic/kibana#244866

Merged

gbamparop mentioned this pull request Dec 10, 2025

[Platform:StackManagement:Data Set Quality page]Missing Search element for filtering announcement in Types elastic/kibana#219240

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiSelectable][A11y] Search input is not read out by screen readers#9223

[EuiSelectable][A11y] Search input is not read out by screen readers#9223
mgadewoll merged 15 commits intoelastic:mainfrom
jorgeoliveira117:9161-euiselectable-a11y-search-input-is-not-read-out

jorgeoliveira117 commented Nov 18, 2025 •

edited by mgadewoll

Loading

Uh oh!

mgadewoll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Nov 26, 2025

Uh oh!

mgadewoll left a comment

Uh oh!

elasticmachine commented Nov 26, 2025

Uh oh!

elasticmachine commented Nov 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

jorgeoliveira117 commented Nov 18, 2025 • edited by mgadewoll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Nov 26, 2025

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 26, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 26, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jorgeoliveira117 commented Nov 18, 2025 •

edited by mgadewoll

Loading