Tags are not interactive with 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
This might actually be a bug in VoiceOver, but I'll submit it her it here anyway.
VoiceOver, and potentially other screen readers are having trouble interpreting the semantics of the selection pattern for `TagGroup`.
Using VoiceOver, it is not possible to select any option. It is just announced as a "Selectable text" inside of a grid.
So while the navigation (grid) pattern is announced correctly, the selections are not announced at all.
### 🤔 Expected Behavior?
It should be possible to select any `Tag` (both `multiple` and `single`) with a screen reader
### 😯 Current Behavior
It is _not_ possible to select any `Tag` (neither `multiple` or `single`) with a VoiceOver. The selection mode itself is not announced either.
### 💁 Possible Solution
It seems like it might be the lack of support for the combined aria attributes that is causing this issue: `role="row"` combined with `aria-selected`, and `aria-multiselectable="true" combined with `role="grid"`.
(Seems to be working just fine when `aria-selected` is combined with role="option", and`aria-multiselectable="true"` with `role="listbox"`)
Maybe it is worth checking if it helps moving the `aria-selected` attribute to the `gridcell` instead?
The `TagGroup` seem to be conforming with the ARIA spec and the grid navigation pattern. But it's the old "according to the spec it should work like this, but in reality it turns out there is poor support among AT's".
I do however volunteer to look into possible solutions and contribute with a PR, if you like.
### 🔦 Context
Tested with VoiceOver on macOS 15.3.2
### 🖥️ Steps to Reproduce
1. Go to [https://react-spectrum.adobe.com/react-aria/TagGroup.html#example](https://react-spectrum.adobe.com/react-aria/TagGroup.html#example)
2. Start VoiceOver
3. Navigate to the "Categories" `TagGroup` in the example.
4. Enter the grid
5. Navigate back and fourth and try to select an option
Result: VoiceOver will not announce the options as selectable/interactive and it is not possible to make any selections.
### Version
react-aria-components 1.7.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.