Provide a general summary of the issue here
When grouping options in a ComboBox using the <Section/> and <Header/> components, screen readers seems to pick up the <Header/> as an option. Hence announcing one extra option. They also fail to announce the name of the group (text content of the <Header/> 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 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 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 <ListBox/> 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.
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
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
Provide a general summary of the issue here
When grouping options in a ComboBox using the
<Section/>and<Header/>components, screen readers seems to pick up the<Header/>as an option. Hence announcing one extra option. They also fail to announce the name of the group (text content of the<Header/>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 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 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
<ListBox/>in general.🔦 Context
Tested with:
🖥️ 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.
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
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