primitives
primitives copied to clipboard
radix-ui
[RadioGroup] voiceover accessibility issue
Discussed in https://github.com/radix-ui/primitives/discussions/1325
Originally posted by ElliottP10 April 13, 2022 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:
- Turning on voiceover with cmd + fn + f5
- Click on the radio options found in the link above (radix website)
- 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?
In addition to this, when using voice over on the radix-ui website, it says that there are 6 options when there are only three:
Weird, mine doesn't even announce the amount. Which version of MacOS are you running? I'm on 12.3.1.
This happens on the latest ^0.1.6-rc.11 in my project.
I'm using macOS 11.6
Ah ok, so probably the difference just comes from the MacOS update with a new version of VoiceOver then.
it says that there are 6 options when there are only three
I also ran into this, seems VO is counting the bubble inputs when in a form even though they are aria-hidden=true
