Radio group voiceover accessibility

[ElliottP10]

Radix Accessibility issue

Currently using the default radix radio groups found here -> https://www.radix-ui.com/docs/primitives/components/radio-group. The browser voiceover reads out the input value and also that the user has selected a radio group, however the voiceover does not read out which number radio group the user has currently selected (e.g. Default, radio button 1 of 3).

On MacOS, you can recreate this behaviour by:

1. Turning on voiceover with cmd + fn + f5
2. Click on the radio options found in the link above (radix website)
3. The voiceover reads out "Selected, Default, Radio button"

I have drafted on CodeSandbox a working radio group -> https://codesandbox.io/s/radio-group-accessibility-test-9f8l6i?file=/src/index.js. When using the browser voiceover with our example above it reads out "Default, Selected, Radio Button, 1 of 3".

The issue is the current radix radio buttons do not read out the selected number in the radio group (1 of 3 etc).

Is there an easy fix for this behaviour, or is this something that needs to be raised as an issue?

[benoitgrelard]

Hey @ElliottP10,

Thanks for reporting this.
I believe your sandbox is not correct either as you have a different name attribute for each so for me it says 1 of 1 on all of them, but that's easily fixed by setting a common name.

That said, I think that's a valid issue, I'm going to convert the discussion into an issue and we'll take a look!

Thanks!

[ElliottP10]

Corrected the name attributes, can be seen here - https://codesandbox.io/s/radio-group-accessibility-test-9f8l6i?file=/src/index.js.
Thank you for looking into this 🙏🏻