[EuiSelectable][EuiComboBox] Fix duplicated screen reader announcements of option name and checked state

[alexwizp]

Summary

• What: Fixed duplicate screen reader announcements for EuiSelectable / EuiComboBox options. Two changes:
  1. Removed the visually-hidden "Checked option." screen reader state text from EuiSelectableListItem.
  2. Moved the option title attribute from the option <li> element to its inner text element (EuiSelectable and EuiComboBox).
• Why: Fixes [Analytics:MachineLearning:Notifications page]Duplicated announcement for checked options kibana#216048, and the EUI-side part of [Analytics:MachineLearning:AnomalyDetection:Jobs page]Duplicated announcement for checked options kibana#216157.
  • When an option is checked, its state is already conveyed natively via aria-checked/aria-selected on the option <li>, so screen readers (e.g. NVDA) announced the checked state twice — once from the ARIA attribute ("checked 1 of 4") and once from the extra hidden text ("Checked option.").
  • A title attribute on the option <li> maps to the option's accessible description (per HTML-AAM), which screen readers announce in addition to the accessible name — so the option name was read twice.
• How:
  • Removed the euiSelectableListItem.checkedOption state string for checked="on" in selectable_list_item.tsx. The "Excluded option." (checked="off") and "Mixed (indeterminate) option." (checked="mixed") state texts are kept, as those states are not (or not reliably) distinguishable from the ARIA attributes alone. Keyboard instructions ("To uncheck/exclude this option, press Enter.") are unchanged.
  • EuiSelectableListItem now intercepts title and renders it on the .euiSelectableListItem__text span via textProps; EuiComboBoxOptionsList does the same for euiComboBoxOption items. The native hover tooltip for CSS-truncated text is preserved (it now triggers over the text rather than the whole row), but the title no longer participates in the option's accessible name/description computation. Follows up on [EuiToolTip] Replace all title attributes with EuiToolTip #9643, which narrowed when the title is set.

Screen reader output for a checked option "System", before → after:

System System checked option to uncheck this option, press Enter. checked 1 of 4
(name from title-as-description and checked state each announced twice)

System checked 1 of 4 to uncheck this option, press Enter.

API Changes

component / parent	prop / child	change	description
EuiSelectableListItem	euiSelectableListItem.checkedOption i18n token	Removed	The "Checked option." screen-reader-only state text is no longer rendered; the checked state is announced natively via aria-checked/aria-selected
EuiSelectableListItem / EuiComboBox options	title attribute	Moved	Rendered on the inner text element instead of the option <li>, so it no longer becomes the option's accessible description
EuiListItemLayout (internal)	textProps	Type widened	Now accepts HTML attributes (CommonProps & HTMLAttributes<HTMLElement>) in addition to CommonProps

Screenshots

N/A — no visual changes; only visually-hidden screen reader text and attribute placement are affected (see before/after announcement text above).

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — None.
• 💅 Visual changes — None.
• 🧪 Test impact — Tests asserting the full text content of selectable options will no longer see "Checked option.", and tests selecting options by [title=...] on the <li> will need to target the inner text element instead — e.g. snapshot tests of EuiSelectable/EuiComboBox/filter popover options.
• 🔧 Hard to integrate — No.

Impact level: 🟢 Low

Release Readiness

• Documentation: N/A — no API or docs changes
• Figma: N/A
• Migration guide: N/A
• Adoption plan (new features): N/A — bug fix

QA instructions for reviewer

• Open any EuiSelectable demo with checked options (e.g. the Selectable docs or an EuiSearchBar field_value_selection filter popover).
• With a screen reader running (NVDA/VoiceOver):
  • Navigate to a checked option — the option name and its checked state are each announced only once (no extra "Checked option." announcement, no repeated name from the title attribute).
  • Repeat for EuiComboBox options — the option name is announced only once.
  • With allowExclusions, navigate to an excluded option — "Excluded option." is still announced.
  • Navigate to a mixed option — "Mixed (indeterminate) option." is still announced.
  • Keyboard instructions ("To uncheck/exclude this option, press Enter.") are still announced where applicable.
• Without a screen reader:
  • Hover a long, truncated option label in EuiSelectable/EuiComboBox — the native browser tooltip with the full text still appears.

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes N/A
• Tests: Updated Jest snapshots, added a regression test for the title placement, and updated Cypress a11y assertions
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label N/A

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[Copilot]

Pull request overview

This PR improves accessibility for option rows in EuiSelectable and EuiComboBox by eliminating duplicate screen reader announcements caused by redundant visually-hidden “checked” text and by title attributes being applied to the option container element.

Changes:

• Removed the screen-reader-only “Checked option.” text for checked selectable options (relies on native aria-checked / aria-selected instead).
• Moved truncation title attributes from the option element to the inner text element for both selectable and combo box options.
• Widened EuiListItemLayout’s textProps typing to allow passing standard HTML attributes (e.g. title), and updated tests/snapshots/a11y assertions plus a changelog entry.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/eui/src/components/selectable/selectable_list/selectable_list_item.tsx	Removes redundant checked SR text; moves title to the inner text span via textProps.
packages/eui/src/components/selectable/selectable_list/selectable_list_item.test.tsx	Adds a regression test asserting title is not on the option element but on the text element.
packages/eui/src/components/selectable/selectable_list/snapshots/selectable_list.test.tsx.snap	Updates snapshots for title placement changes.
packages/eui/src/components/selectable/selectable_list/snapshots/selectable_list_item.test.tsx.snap	Updates snapshots to reflect removal of “Checked option.” SR-only text.
packages/eui/src/components/selectable/snapshots/selectable.test.tsx.snap	Updates snapshots for title placement changes in selectable render output.
packages/eui/src/components/list_item_layout/_list_item_layout.tsx	Widens textProps type to accept HTML attributes (enables title on text span).
packages/eui/src/components/filter_group/filter_group.a11y.tsx	Updates Cypress a11y assertion to reflect removal of “Checked option.” text.
packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx	Moves truncation title off the option element and onto the inner text element.
packages/eui/src/components/combo_box/snapshots/combo_box.test.tsx.snap	Updates snapshots for combo box option title placement changes.
packages/eui/changelogs/upcoming/9850.md	Adds changelog entry documenting the accessibility improvements.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 9cd64ef
• Documentation website
• Storybook
• ✅ Visual regression tests passed

History

• 💚 Build #4464 succeeded ba274dd
• 💚 Build #4463 succeeded 4f494fa

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 9cd64ef

History

• 💚 Build #7217 succeeded ba274dd
• 💚 Build #7216 succeeded 4f494fa