[EuiComboBox] listbox UI enhancements

[mgadewoll]

Summary

Important

This PR is based on #9530 and #9532 and requires those PRs to be reviewed and merged first.
Once both are merged, this PR can be rebased.

Important

This PR merges into a feature branch

closes https://github.com/elastic/eui-private/issues/544

This PR updates EuiComboBox and its subcomponents EuiComboBoxOptionsList by implementing EuiListItemLayout as render component for list items instead of handling it custom.
This change ensures that the new expected layout and style updates (Figma ideation specs) are implemented and aligned across different selection/list components.

Note

EuiListItemLayout was introduced in #9530.

Changes

• Updated EuiComboBoxOptionsList to use EuiListItemLayout, replacing the custom logic and styles
• Updated the rendered output element from button to li (to align with native <select> as well as EuiSelectable that use option in a listbox)
  • this required some updates as we're not actively focussing the list items but instead rely on aria-activedescendant and custom isFocused highlighting
• Updated the value of list item id to use the original option array index instead of the mutated list index
  • ℹ️ This ensures that the id is stable which ensures that aria-activedescendant works as expected and does not lose focus on selecting an option
• Updated EuiComboBox to exclude disabled options from list navigation (aligned with native <select> and EuiSelectable behavior)
• refactored the logic to determine the next selectable index into a reusable function findNextSelectableOptionIndex
• Updated EuiComboBoxOptionsList to use VariableSizeList instead of FixedSizeList from react-window
• Removes keyboard Enter badge by default. Adds onFocusBadge prop (default false) instead (naming is chosen to be the same as for EuiSelectable)

API Changes

component / parent	prop / child	change	description
EuiComboBoxOptionsList	onFocusBadge	Added	Conditionally render a badge on keyboard navigation that indicates Enter key should be pressed for selection.

Screenshots

Before	After

Accessibility Check

Note

Instead of following the default defined in EuiListItemLayout that would use aria-checked for multi-selection, EuiComboBox uses aria-selected instead as the selected list items are being removed.

scenario	Before (feature branch)	After
single-selection	Screen.Recording.2026-03-27.at.16.04.33.mov	Screen.Recording.2026-03-25.at.17.08.13.mov
multi-selection	Screen.Recording.2026-03-27.at.16.05.28.mov	Screen.Recording.2026-03-27.at.16.02.02.mov

Impact Assessment

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If integration is complex, stage commits in Kibana/Cloud UI branches for cherry-picking and link to them below.

Impact level: 🟢 Low - 🟡 Moderate
This is an internal change, but since we're changing DOM elements and styles, tests and snapshots might fail and any custom style overrides might result in unexpected output.
The changes will go into a QA phase in Kibana to ensure nothing breaks unexpectedly.

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: Ideation specs
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

💻 EuiComboBox storybook

• verify the layout and style updates match design specs
• verify there are no functional regressions with current production (storybook)
  • keyboard navigation works as expected
  • single and multi selection work as expected
  • group labels render as expected
  • the accessibility of the combobox pattern works as expected (correctly announces list item position and selected state)
• verify that a badge is rendered on list item navigation when onFocusBadge=true

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
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 9f160bb
• Documentation website
• Storybook

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 9f160bb

cc @mgadewoll