elastic / elastic/eui

[EuiComboBox] Options not correctly announced by VoiceOver

Open
#9,505 3 comments 0 reactions 0 assignees View on GitHub
accessibility
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.