details component not announcing collapsed/expanded state on iOS with VoiceOver

[NickColley]

When using the progressive disclosure element VoiceOver on iOS 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.

How would you expect it to work?

When on the trigger ("Help with nationality"), VoiceOver on iOS should say "collapsed, button" (like it does on macOS). When triggering it, it should say "expanded, button".

How does it work currently?

When on the trigger, VoiceOver only says "button". When triggered, it also only says "button".

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

This will be an issue still since the code we are using is directly ported from GOV.UK Elements.

We may be able to resolve this by reducing the amount of polyfilling we are doing and relying more on the native details implementation in modern browsers, see alphagov/govuk_elements#572 for more details.

[NickColley]

https://www.scottohara.me/blog/2018/09/03/details-and-summary.html

[NickColley]

https://caniuse.com/#feat=details

[NickColley]

Some more details on aspects of the current polyfill: alphagov/govuk_elements#57