[EuiComboBox][A11y] Prevent custom option ids from breaking accessibility

[mgadewoll]

Summary

closes #8826

This PR adds support for handling custom option ids. Since the component uses generic types for the options, it's possible for consumers to pass id (e.g. for additional sorting on implementation side).
To ensure that the accessible linking between options and input works as expected via aria-activedescendant this PR updates EuiComboBox by using the id value from the actual available option DOM elements instead of passing a static id based on the activeOptionIndex.
This ensures that the following two scenarios work and ensure that the component results in an accessible output when navigating the options list:

• default (no-custom) ids
• custom option ids passed as part of the options shape

Why are we making this change?

This update ensures that the accessibility of EuiComboBox is more robust towards consumer input and can't be broken as easily.

Screenshots

before

after

no-custom ids (default)	custom ids
Screen.Recording.2025-06-27.at.20.40.28.mov	Screen.Recording.2025-06-27.at.20.41.04.mov

Impact to users

🟢 This update does not require any updates on consumer side.

QA

• checkout this PR, run storybook and view the stories EuiComboBox > Playground and EuiComboBox > With Custom Ids
  • using the story EuiComboBox > Playground, verify using a screen reader that the options are correctly announced on keyboard navigation in the options list
  • using the story EuiComboBox > With Custom Ids, verify using a screen reader that the options are correctly announced on keyboard navigation in the options list

General checklist

• Browser QA
  • Checked in both light and dark modes
  • 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
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[acstll]

🟢 I tested the changes locally with NVDA on Windows 11 (woohoo), it works as expected (also tested the current implementation, when passing ids in the options list it'll yield "blank").

I'm approving but also leaving a couple of comments regarding names that you may consider.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 0e3e711
• Documentation website

History

• 💚 Build #644 succeeded 623d5a0
• 💚 Build #643 succeeded edf15b4

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 0e3e711

History

• 💚 Build #4282 succeeded 623d5a0
• 💚 Build #4281 succeeded edf15b4

cc @mgadewoll