[RAC] ListBox reading out "selected" for items that are not selected in iOS VoiceOver + Chrome

[mryechkin]

trafficstars

Provide a general summary of the issue here

When using any of the ListBox examples in the docs for React Aria Components in Chrome, iOS VoiceOver reads out "selected" for items that are not selected:

This doesn't seem to happen in Firefox or Safari. Wondering if this is a Chrome bug?

🤔 Expected Behavior?

Item should not be read out as "selected" when it is not

😯 Current Behavior

Item is read as "selected" when it is not

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Load the documentation page for ListBox in React Aria Components: https://react-spectrum.adobe.com/react-aria/ListBox.html
2. Scroll down to multi-select example
3. Turn on VoiceOver
4. Navigate and make selection with a keyboard

Version

[email protected]

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

MacOS Sonoma 14.1.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[yihuiliao]

Was able to reproduce in Chrome v119, MacOS Ventura.

I dug around a bit and looked at the examples in WAI-ARIA and found that it will announce “selected” for items that are not selected as well. Like you mentioned, this might be a Chrome bug and I did check to see if this had already been reported but I don’t think it has (will need to double check).

As a result, this announcement also occurs within React Spectrum’s ListBox which you can see in this example so it’s not just contained within RAC.

Perhaps we can find a workaround for it but not 100% sure. Thanks for letting us know!

[mryechkin]

Sounds good. Thank you for looking into it!