Progressive disclosure (details/summary) component not announcing collapsed/expanded state on iOS with VoiceOver

[selfthinker]

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".

Feel free to suggest a fix...

This is very likely to be a bug in VoiceOver and/or Safari, but I wasn't able to make a reduced test case, so don't know what the exact bug is.

I can see three different solutions:

1. Do nothing. My gut feeling tells me this is not a big barrier. Yes, it is not clear why there is a button and what will happen when you click it, but I wonder if lots of people would assume the right thing or try it out anyway.

2. The only way how I could make it work and announce the collapsed or expanded state while it still uses our polyfill was by removing aria-controls. But using aria-controls is according to spec, and it feels hacky to remove it because of this issue.

3. Using the native version without the polyfill fixes it as well. We could rewrite our polyfill to only be used when details isn't supported. But that would need more testing and has its own downsides. See also Details polyfill often not necessary #572.

[Muhammad-Ali-Ahmad]

I have has similar issue. When I use <details role="group"> <summary class="summary" role="button"... then voice over on an Iphone 6 doesn't read out "collapsed" but when I remove role="group" and my code looks like this <details> <summary class="summary" role="button" then it reads out "collapsed"
Mac voice over is fine both ways and reads out "collapsed"

Neither case reads out "expanded" though instead it says "selected"

[selfthinker]

It turns out, it definitely is a VoiceOver bug. Even a native version of the details element without any polyfill doesn't work as expected when you add the group role to the details element.
I just filed a bug report here: https://bugs.webkit.org/show_bug.cgi?id=180865

[adamb-moj]

Interestingly, if you remove the attribute and value of role="group" from the details element, it reports correctly on iOS VoiceOver.

However it is not possible to remove that attribute because it is automatically injected into the DOM by govuk_frontend_toolkit/javascripts/govuk/details.polyfill.js

I hope that helps.

[NickColley]

Following the launch of the GOV.UK Design System, GOV.UK Elements will now only get major bug fixes and security patches.

I think there's a strong chance this is still an issue in the GOV.UK Design System since our code has not changed that much from GOV.UK Elements, so I have raised a new issue to investigate and improve the component over there: alphagov/govuk-frontend#988

Thanks so much for doing this investigation, it's really helpful.