Bug report

Hello! While debugging Reakit and checking the behavior on other libraries, I found out that Radix has a similar issue.

Current Behavior

Focusing on the tab with VoiceOver automatically selects it. Therefore, users can't access the panels of previous tabs by moving the VO cursor.

Expected behavior

Screen reader focus shouldn't select the tab, only keyboard focus and clicks.

Reproducible example

I tested https://www.radix-ui.com/docs/primitives/components/tabs using VoiceOver on an iPad. But the same happens on iOS and Mac (if you use only VO+Arrow keys to move the virtual cursor).

Note that I can't access the contents of the "Account" panel by moving the VO cursor:

I also couldn't move to the password panel after selecting it, but I think this is a separate issue (I guess it has something to do with VO not detecting lazily rendered elements).

Suggested solution

The VoiceOver virtual cursor will move DOM focus (by calling element.focus()) to the element if it's a <button>. There should be a distinction between focusing on tabs using arrow keys and when just calling element.focus() without arrow keys.

Alternatively, the tab could be rendered as another element, but this has other implications.

Your environment