Grouped Combobox items using Section and Header are announced incorrectly by screen readers (VoiceOver)
- 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
Assessment
This issue has not been assessed yet.