Safari/VoiceOver: Grouped radios read out incorrect information

[JayCork]

Description of the issue

When using Mac's VoiceOver functionality on a group of radio buttons that have conditionally rendered elements the feedback from the voice over is often incorrect. How it is in correct seems to be dependant on the browser being used, as I have observed consistent but different behaviour on different browsers.

When using Chrome VO will say that there is more radio buttons than there are, and will also say that the select button is n+1. In a scenario where there are 3 radio buttons and the first is selected VO will read "2 of 4 selected" when it should be "1 of 3 selected".

When using VO on the same elements in Safari a similar behaviour is seen but it seems to be able to count the correct number of radio buttons. In the same scenario as before it will readout "2 of 3 selected" when it should be "1 of 3 selected".

I am personally unable to check other browsers or voice over software for further testing.

TL:DR Mac's Voice Over says there are more radio buttons within a group than there are when using the conditional reveal.

Steps to reproduce the issue

1. Navigate to Radio Conditional Reveal example in either Chrome or Safari on a Mac.
2. Turn on Mac's VoiceOver
3. Select radio buttons and observe the VO's output
4. Repeat step three if behavior stated is not observed

Actual vs expected behaviour

Voice over reads "X of Y selected" vs "X+1 of Y+1 selected" (Chrome) or "X+1 of Y selected" (Safari).

Environment (where applicable)

• Operating system:
• Browser: Safari 16.3 (18614.4.6.1.6), Chrome 108.0.5359.124
• GOV.UK Frontend Version: 4.0.1

[querkmachine]

Hi @JayCork,

Thanks for raising this! This is most likely an issue in how Chromium is exposing information to VoiceOver, rather than an issue inherent in GOV.UK Frontend. We're already tracking the problem in #2346, so I'm going to close this issue as a duplicate.

I wasn't able to reproduce the issue in Safari 16.3 after multiple attempts, but could do so readily in both Chrome 111 and Edge 111. All of these tests were on macOS 13.2 using Frontend 4.5.0.

[querkmachine]

@JayCork Hmm, in that instance it looks like VO's focus is on the fieldset, in which case it would read everything in the fieldset—not just the selected radio button. Is that what's happening?

[JayCork]

@JayCork Hmm, in that instance it looks like VO's focus is on the fieldset, in which case it would read everything in the fieldset—not just the selected radio button. Is that what's happening?

Yes and no. I noticed that after posting and wanted to investigate more. Tried to delete it before you saw it. The focus is on the VO fieldset but it's not reading everything out. Admittedly I'm clicking using a mouse rather than using the Keyboard which is where the confusion might be coming from, as when using the keyboard everything works fine. Scrap that I'm seeing the same behaviour when using the keyboard.

If I check Text Message using a mouse it reads "Text Message, Selected, Radio Button, 3 of 3" if I then check phone (with mouse) it says "Text Message, Radio Button, 3 of 3". Note the lack of "Selected". So VO is noticing the change in state and recognises that it's not selected anymore, but is reading out the "Text Message" element rather than the "Phone" which is what I would expect to be happening.

[querkmachine]

@JayCork Thanks! I can reproduce it now.

This looks to be a general issue with VoiceOver (rather than one specific the GOV.UK Design System), as I can also reproduce the problem in my reduced test case and on generic sets of radio buttons, like the demo on MDN.

I wonder if VoiceOver is either moving the visual focus ring, but not actually moving focus; or has some purposeful design choice where the visual focus ring and actual focus are detached from one another.

One of these would seem to be the case as when I check 'Text Message' and click on either 'Email' or 'Phone' (which VO announces as 'Text message'), using VO's Ctrl + Opt + Space shortcut to check the current radio button will still check 'Text message', implying it's still the one with focus, even though it doesn't visually appear to be.

I'll reopen this issue for tracking the Safari/VO issue. Chrome discussion can stay in #2346.

Thanks again!