[EuiComboBox] Improve accessibility of virtualized listbox

[mgadewoll]

Summary

closes #8267

This PR updates EuiComboBox adding/updating it's markup to ensure expected output for screen readers.
The updates are based on the common web pattern for a combobox (ref)

---

Unexpected behavior:

• the appended items being read out by the screen reader because the panel has an aria-live="assertive" applied
• the list size is updated
• the item position index is updated correctly
• navigated/focused options are marked as selected

NVDA (Windows) & Chrome

Screen.Recording.2025-02-19.at.10.17.59.mov

VoiceOver (macOS) & Chrome

Screen.Recording.2025-02-19.at.09.51.01.mov

---

Expected behavior:

• the appended items are not read out (remove `aria-live-"assertive" for the listbox)
• the list size stays static and matches the available list item length (apply aria-setsize)
• the item position index does not update and matches the index in the options array (apply aria-posinset
• navigated/focused options are not semantically marked as selected (EuiComboBox removes selected items, so currently they are never selected inside the listbox) (apply correct condition for aria-selected)

NVDA (Windows) & Chrome

Screen.Recording.2025-02-19.at.11.41.02.mov

VoiceOver (macOS) & Chrome

Screen.Recording.2025-02-19.at.11.42.50.mov

Note

There seems to be an issue in Safari + VoiceOver(testing in Safari 18.3 and macOS 14.7.4): Navigating the option inside the list is not announced.
This seems to be related to the focus staying inside the input, but the options should actually be announced due to the correctly placed aria-descendant even if the focus is not actually moved to the options.
This is also happening for the current production state and can also be observed in external components e.g. for MUI ComboBox component.
This should rather be looked into separately if it's something we can influence or it's an issue with Safari + VoiceOver specifically. Maybe it's also macOS/browser version specific 🤷‍♀️ 🤔

QA

• verify the mouse and keyboard behavior in staging is the same as on production
• verify that for screen readers the correct list size and option position are announced
• verify that newly added list options (when scrolling new options into view) do not trigger additional screen reader output

General checklist

• Browser QA
  • Checked in both light and dark modes
  • 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)

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_8333/
• Storybook: https://eui.elastic.co/pr_8333/storybook
• New docs: https://eui.elastic.co/pr_8333/new-docs

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: fc5cec0

[acstll]

Does what it says! 💯

(checked with VoiceOver and NVDA 2024.4 + Chrome 132)

---

There seems to be an issue in Safari + VoiceOver(testing in Safari 18.3 and macOS 14.7.4): Navigating the option inside the list is not announced.

I don't quite understand what this means, but in any case I agree it could be addressed separately.

[mgadewoll]

There seems to be an issue in Safari + VoiceOver(testing in Safari 18.3 and macOS 14.7.4): Navigating the option inside the list is not announced.

I don't quite understand what this means, but in any case I agree it could be addressed separately.

What this means is that in that scenario the screen reader focuses the input but using arrow keys to navigate the listbox options does not work.

Expected:

• using ArrowDown/ArrowUp will announce the currently navigated option and it's role, it's selected state, it's position in the list etc

Unexpected:

• using ArrowDown/ArrowUp does not move the screen reader to the options and does hence not announce anything
• the screen reader cursor stays in the input

See a recording of it here

Screen.Recording.2025-02-25.at.13.29.49.mov

[acstll]

What this means is that in that scenario the screen reader focuses the input but using arrow keys to navigate the listbox options does not work.

Ah, got it. This works for me in Safari 18.2 and macOS 15.3.1, maybe it's the macOS version?

The only thing that I find weird in that environment is the disabled items, they're announced as "dimmed" (not sure if that's actually correct for VoiceOver).

[mgadewoll]

Ah, got it. This works for me in Safari 18.2 and macOS 15.3.1, maybe it's the macOS version?

Ah, that's good news! I was wondering if it might be the OS version since I'm still on the old macOS due to my Parallels version 🫠

The only thing that I find weird in that environment is the disabled items, they're announced as "dimmed" (not sure if that's actually correct for VoiceOver).

That's expected. VoiceOver announces disabled items as "dimmed" 👍