Details expanded state is not announced by iOS VoiceOver

[36degrees]

Description of the issue

As flagged by @mcheung-nhs, the expanded state of the details component is not announced by VoiceOver when the element is opened on iOS

Steps to reproduce the issue

1. Open https://design-system.service.gov.uk/components/details/default/index.html on an iPhone
2. Enable VoiceOver (VO)
3. Focus 'Help with nationality'
4. Double tap to expand the element
5. Swipe forward into the content
6. Swipe backwards to the summary

Expected behaviour

• In step 4, after expanding the element , VO should announce 'Help with nationality, expanded'
• In step 6, when swiping back to the summary, VO should announce 'Help with nationality, expanded'

Actual behaviour

Although VO announces the element as collapsed in step 3, it does not announce the expanded state.

• In step 4, after expanding the element , VO announces 'Help with nationality'
• In step 6, when swiping back to the summary, VO announces 'Help with nationality'

Environment (where applicable)

• Operating system: iOS 14.7.1
• Browser: Safari
• Browser version: N/A
• GOV.UK Frontend Version: 3.13.1

[36degrees]

This appears to be related to the use of display: inline-block on the <summary>.

I've raised a bug with WebKit – https://bugs.webkit.org/show_bug.cgi?id=230408

Not sure if there's anything we can do to mitigate this from our side? Without display: block the clickable area and focus state expand to fill the parent:

[querkmachine]

The latest version of Safari Technology Preview (version 183) has resolved a number of accessibility issues relating to the details/summary elements. This issue may be resolved in the next Safari version.

https://bugs.webkit.org/show_bug.cgi?id=108979
https://bugs.webkit.org/show_bug.cgi?id=263499

[querkmachine]

The WebKit team mentioned making accessibility improvements to a bunch of elements (details included) in their WWDC blog post last week. I've hopped onto the iOS 18 developer beta and tested how various implementations of details/summary currently work in that version.

Default details/summary element

A basic, unstyled details/summary element by itself on an otherwise empty webpage.

• On receiving VO focus, VO announces "[summary text], button, collapsed. Double tap to expand."
• Upon double tapping, focus remains on the summary. VO announces "[summary text], button, expanded."
• Upon double tapping again, VO announces "[summary text], button, collapsed." and doesn't repeat the prior hint.

GOV.UK Design System component

The currently live example on the Design System website.

• On receiving VO focus, VO announces "Help with nationality, button, collapsed. Double tap to expand."
• Upon double tapping, focus remains on the summary. VO announces "[summary text], button." It does not announce the "expanded" state indicator.
• Upon double tapping again, VO announces "[summary text], button, collapsed." and doesn't repeat the prior hint.

---

It seems that WebKit now applies the button role to summary elements, which may resolve some of the issues with interaction and recognition of the control by assistive technologies.

This would seem to support the theory that inline-block styling is for some reason preventing the state from being properly announced.

[romaricpascal]

Random thought about the display: could it be worth trying other 'shrink to fit' values of display like:

• display: table (it feels block-ish, so VO might be happy with it)
• display: block + width: fit-content (supported on iOS Safari since 11, and older if we're willing to use a non-standard value, and it could be gated by an @supports)

Also wondering if we could check with designers if it's that bad that the focus is full width (we might have some history about the decision, though).

[36degrees]

I've got a proof of concept locally that just uses display: block with float: left on the summary and it seems to solve the issue in iOS… haven't tested anything else yet.

width: fit-content is a good shout to explore too.