iOS VoiceOver doesn't correctly announce expanded state of details element if summary has display: inline-block

[36degrees]

Upstream bug: https://bugs.webkit.org/show_bug.cgi?id=230408
Date: 2021-09-17
Reported by: Oliver Byford (@36degrees)
Related to: alphagov/govuk-frontend#2349

---

Given a details element where the summary is set to display: inline-block:

<details>
  <summary style="display: inline-block;">Summary</summary>
  <p>Content</p>
</details>

1. Activate VoiceOver on iOS
2. Swipe to 'Summary'
3. Double tap to expand the details element
4. Swipe forwards to the expanded content
5. Swipe back to 'Summary'

Expected result:

In step 3, after expanding the element , VO should announce 'Summary, expanded'
In step 5, when swiping back to the summary, VO should announce 'Summary, expanded'

Actual result:

In step 3, after expanding the element , VO announces 'Summary, collapsed'
In step 5, when swiping back to the summary, VO announces 'Summary'

This issue does not occur if the summary element is set to display: inline-block or the user-agent default display: list-item.