Open 36degrees opened 2 years ago
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:
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
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.
details
/summary
elementA basic, unstyled details
/summary
element by itself on an otherwise empty webpage.
The currently live example on the Design System website.
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.
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).
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.
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
Expected behaviour
Actual behaviour
Although VO announces the element as collapsed in step 3, it does not announce the expanded state.
Environment (where applicable)