Tags are not interactive with VoiceOver

[oscarcarlstrom]

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", andaria-multiselectable="true"withrole="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
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

[snowystinger]

That is unfortunately a very old version of Safari which we no longer support. The current version is 18, where it is working as expected for me.
We support the current version and the previous 1 version.

I'm going to close this for now. If there is a bug in either of those versions, we can reopen.

[oscarcarlstrom]

That is unfortunately a very old version of Safari which we no longer support. The current version is 18, where it is working as expected for me. We support the current version and the previous 1 version.

I'm going to close this for now. If there is a bug in either of those versions, we can reopen.

Haven’t tested it in safari, this was the latest version of Chrome

[snowystinger]

Ah, sorry, I missed that. I just tested on Chrome 134.0.6998.89 on my machine. It's working as expected for me.

Can you provide the exact key strokes you're using?

[oscarcarlstrom]

Huh, that is weird: same version of Chrome as me. Tested in Safari now, and that works just fine. Which macOS version are you using?

I'm using Control + Option + Arrow (have tried both left/right and up/down) to navigate the options and Control + Option + Space when trying to select.

Anyway, this indeed seems to be browser-related.

[snowystinger]

Sequoia 15.3.2, same as yours.

Using Ctrl+Opt+Space does not work for me, and the Ctrl+Opt+Space appears to navigate the text inside the tags, not the tags themselves. I can use the non-specific keys (remove ctrl+opt) to do all of it though, but it doesn't bring the VO cursor along with it, so something a little odd is happening.

[oscarcarlstrom]

Right, it seems like Ctrl+Opt+up/down navigates the options for me. But Ctrl+Opt+left/right navigates the text inside the tags, like you mention. I think this could be because the grid-navigation pattern is made up of rows (each tag in one row), which makes vertical navigation logical. And then maybe left/right works because of the custom event-listeners that are setup on those key strokes. What do you think?

I am pretty sure VoiceOver assumes you always use the VO key (Ctrl+Opt in the standard setup) to trigger any action. At least that is typically how it instructs you (e.g. "To navigate the cells within this table press, Control, Option and then up arrow, down arrow, left arrow, or right arrow").

Also tested this quickly in Firefox just now, and it seems like VoiceOver is having even more trouble there. I can't even navigate between the options using the VO key.

I know Safari is the recommended, and probably the most popular browser for VoiceOver. But it still feels like this is either a bug in VoiceOver or FF/Chrome. And I would say it is not impossible that it could be something in the TagGroup implementation too, is it?

[snowystinger]

FF + VO is not a supported combination unfortunately. The integration level just isn't there, as you've noted.

Reopening so someone can dig into this.

[oscarcarlstrom]

Ah my bad, I thought it had gotten a lot better the past couple of years. Apparently not good enough.

Thank you, appreciate it!