adobe / adobe/react-spectrum

Grouped Combobox items using Section and Header are announced incorrectly by screen readers (VoiceOver)

Open
#5,839 1 comment 0 reactions 0 assignees View on GitHub
accessibility needs investigation
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

When grouping options in a ComboBox using the `` and `` components, screen readers seems to pick up the `` as an option. Hence announcing one extra option. They also fail to announce the name of the group (text content of the `` component.

At least this is the case with Apple's VoiceOver.

For the example in the **React Aria** docs: [https://react-spectrum.adobe.com/react-aria/ComboBox.html#sections](https://react-spectrum.adobe.com/react-aria/ComboBox.html#sections) VoiceOver announces things like "18 options available" and "Entered group, with 9 options". It also fails to announce the name of the group entered, it just announces "Entered group". In reality there are 16 options in total, 8 in each group.

But for this example in the **React Spectrum** docs: [https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#sections](https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#sections) VoiceOver correctly announces "16 options available" and "Entered group Fruit, with 8 options". Which is the expected behavior.

### 🤔 Expected Behavior?

VoiceOver should announce the correct number of options and the name of the entered group.

### 😯 Current Behavior

VoiceOver announces one option too many in each group, and fails to announce the name of the entered group.

### 💁 Possible Solution

Investigate why the example in the **React Spectrum** docs generates correct behavior and the one in **React Aria** does not. This seems to be an issue that affects the `` in general.

### 🔦 Context

Tested with:

- VoiceOver
- Google Chrome v. 121.0.6167.139
- on macOS Sonoma v 14.3

### 🖥️ Steps to Reproduce

The docs provide an example that demonstrates this issue in React Aria: [https://react-spectrum.adobe.com/react-aria/ComboBox.html#sections](https://react-spectrum.adobe.com/react-aria/ComboBox.html#sections).

React Spectrum however, seems to have this working correctly because this example generates the expected behavior: [https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#sections](https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#sections)

### Version

1.0.1

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

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.