[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.

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: ba274dd

History

• 💚 Build #7216 succeeded 4f494fa

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

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

History

• 💚 Build #4463 succeeded 4f494fa