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

[oscarcarlstrom]

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

[snowystinger]

Thanks for the issue. From looking at the DOM, it would appear that RSP has this structure

listbox
  presentation - heading
  group - labelledby heading
    option
    option
    ...

While RAC has this structure

listbox
  group - labelledby header
    presentation - header
    option
    option
    ...

Which follows the ARIA pattern a little more https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/ however, this announces even worse.

I tried removing the header entirely in RAC, but it still announces one more option than it should. So I am not convinced the structure difference between the two is at fault. This will need more investigation.