[EuiComboBox] Options not correctly announced by VoiceOver
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Reported by**
Reported through issue [#227401](https://github.com/elastic/kibana/issues/227401).
**Describe the bug**
`EuiComboBox` options are not announced correctly by screen readers. When navigating through options with VoiceOver:
- Options are announced as "clickable" instead of their proper role ("option")
- Position info like "3 of 10" is not announced, despite `aria-setsize` and `aria-posinset` being set on the `EuiFilterSelectItem`
- Selected/checked state is not announced
**Impact and severity**
This affects all screen reader users interacting with any `EuiComboBox` instance. I don't know of any workarounds.
**Environment and versions**
- EUI version: 113.1.0
- React version: 18.2.0
- Kibana version: 9.4.0
- Browser: Chrome (also reproduced in Safari 18.5)
- Operating System: macOS Sequoia
- Screen reader: VoiceOver
**Minimum reproducible sandbox**
See steps to reproduce.
**To Reproduce**
1. Open any page with an `EuiComboBox` (e.g., in Kibana: Security > Rules > Shared Exception Lists > Create > Create exception item)
2. Enable VoiceOver
3. Focus the Field combobox in the Conditions section
4. Press Down Arrow to open the options list
5. Navigate through options with arrow keys
6 Observe VoiceOver announcement
**Expected behavior**
- Each option is announced with its label, role ("option"), position ("3 of 10"), and selected state ("selected" / no announcement)
- "Clickable" is not announced
**Screenshots (Optional)**
See in original issue.
**Additional context (Optional)**
Contributor guide
Assessment
This issue has not been assessed yet.