Conditionally revealing content with checkboxes not announcing collapsed/expanded state on macOS with VoiceOver

[NickColley]

When using the conditionally revealing content component VoiceOver on macOS in Safari doesn't announce that it is collapsed or expanded, despite the use of aria-expanded and others. All other screen readers are fine with it. Weirdly, that only happens when using checkboxes, not radio buttons!

How would you expect it to work?

When on the trigger ("Citizen of a different country"), VoiceOver should say "collapsed" (like it does when using the same component with radio buttons). When triggering it, it should say "expanded".

How does it work currently?

It doesn't say whether it's collapsed or expanded.

Originally raised by @selfthinker on GOV.UK Elements: alphagov/govuk_elements#575

This is still an issue in GOV.UK Frontend's implementation and was noted as part of the assistive technology testing: #616

My worry with this is that we are adding aria attributes to elements that by the spec should not have them, so I'm not sure if this will be easy to fix or if browser vendors would even consider it a bug.

We should do a proper investigation and make sure we do our best to try to resolve this.

[36degrees]

Is this a duplicate of #935?

[NickColley]

@36degrees we could consider consolidating them but they are different in that one is the JAWs behaviour one is the VoiceOver behaviour.

See #979 (comment) for investigation into aria attributes on conditional reveals.

[36degrees]

Consolidating into #1972.