Fix details expanded state not announced on iOS

[36degrees]

For some reason, setting display: inline-block on the summary means that VoiceOver on iOS no longer announces the expanded state of the <details> element.

We were using display: inline-block so that the interactive area and the focus state (when visible) were constrained to the text within the <summary>.

We can achieve the same thing by using display: block with width: fit-content.

However, now that we’re no longer using display: inline-block ¹, the the 5px bottom margin on the summary and the 30px bottom margin on the details now collapse when the <details> is closed except in Chrome which has been updated to use content-visibility.

Preserve the existing margin on the component and make the behaviour across browsers consistent by establishing a new block formatting context using display: flow-root, preventing the margins from collapsing.

Safari < 13 does not support display: flow-root and so the margins will collapse, which means these older versions of Safari will have 5px less margin than when we were still using display: inline-block.

EDIT: We've dropped the commit that added display: flow-root to the root details element as we removed the extra spacing in #5352, bypassing this issue. Therefore the previous 3 paragraphs are out of date. I'm preserving Ollie's description if we ever wanted to bring the spacing back in.

Fixes #2349
Fixes #4972 (whilst this PR doesn't address 4972 directly, we did explore this option and it unfortuantely doesn't make a difference. This solution has been our most successful so far)

Footnotes

1. ‘margins of inline-block boxes do not collapse (not even with their in-flow children)’ – https://www.w3.org/TR/CSS21/box.html#collapsing-margins ↩

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	118.62 KiB
dist/govuk-frontend-development.min.js	43.63 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	90.19 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	84.69 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.05 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	118.6 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	43.62 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.97 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	81.8 KiB	41.48 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
service-navigation.mjs	4.46 KiB	2.69 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.05 KiB	6.06 KiB

View stats and visualisations on the review app

---

Action run for 00371fa

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 0d72bd2ab..1b097f1c9 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -2973,7 +2973,7 @@ screen and (forced-colors:active) {
 }
 
 .govuk-details__summary {
-    display: inline-block
+    display: block
 }
 
 .govuk-details[open] .govuk-details__summary {
@@ -3029,6 +3029,8 @@ screen and (forced-colors:active) {
 @supports not (-ms-ime-align:auto) {
     .govuk-details__summary {
         position: relative;
+        width: -webkit-fit-content;
+        width: fit-content;
         padding-left: 25px;
         color: #1d70b8;
         cursor: pointer

---

Action run for 00371fa

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/details/_index.scss b/packages/govuk-frontend/dist/govuk/components/details/_index.scss
index 0a500c62f..f349edc0c 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/details/_index.scss
@@ -8,8 +8,7 @@
   }
 
   .govuk-details__summary {
-    // Make the focus outline shrink-wrap the text content of the summary
-    display: inline-block;
+    display: block;
   }
 
   .govuk-details[open] .govuk-details__summary {
@@ -74,6 +73,10 @@
       // Absolutely position the marker against this element
       position: relative;
 
+      // Make the focus outline shrink-wrap the text content of the summary
+      width: -webkit-fit-content;
+      width: fit-content;
+
       // Allow for absolutely positioned marker and align with disclosed text
       padding-left: govuk-spacing(4) + $govuk-border-width;
 

---

Action run for 00371fa

[36degrees]

Spreadsheet for testing:
https://docs.google.com/spreadsheets/d/1Z7SxQcK-HcwScI_dbSDLwidL7mDctsN0aFPLHaMPmK8/edit?gid=0#gid=0

So far I've not observed any changes other than in Safari on iOS 17.5.1 (21F90) where we see the desired improvement, with the expanded state announced on toggle and when returning to the summary:

Scenario	Before	After
When summary is focused (closed)	Help with nationality, button, collapsed. Double-tap to expand.	Help with nationality, button, collapsed. Double-tap to expand.
When toggling open	Help with nationality.	Help with nationality, expanded.
When summary is focused (open)	Help with nationality, button.	Help with nationality, button, expanded. Double-tap to collapse.

I don't have access to test with TalkBack on Android – it'd be fab if someone else was able to help with that.

[owenatgov]

I've had a quick look at the margin issue mentioned in the description and I'm going to make the bold case that this isn't worth worrying about. As Ollie mentions, Safari <13, so 12 and lower, for both mac and iOS will functionally have 5px less margin. You can see this illustrated in the below screenshot of Safari mac 12.1 where the margin collapses into the focus state bottom border:

Safari 11 and 12 fall under Grade C in our browser support model which states the following about bugs in those browsers:

For grade C browsers we:

• might remove support for individual features in these browsers at any time without considering them a breaking change
• will not regularly test in these browsers
• will not fix bugs affecting these browsers unless they prevent a user from being able to complete their task, or we can fix the bug by disabling a feature

I'm using this policy and the low impact to visual rhythm for Safari 12 and below users to justify not implementing a fix for this.

[romaricpascal]

Code changes look good to me. If I understood correctly, the margin issue is that we now have 30px of margin in browsers that don't support flow-root rather than 35px?

Given the large margin of 30px and the limited browsers it applies to, I think it'd be fine, but it would be worth confirming with a designer.

Another thought on the matter is whether the margins not collapsing was intentional or accidental, in the first place. Looks like the summary requiring 5px of margin is really for when the detail is open, so there's some space between it and the grey bar, is it 'leaking' when the detail is closed? If that's the case we may want to condition that to [open] .govuk-details__summary or add extra margin-top/padding-top to the govuk-details__text, which would both clarify the reason for that extra space. We could look into that in a separate small story, though 😊

With margin

Without margin

[Ciandelle]

I definitely think its worth fixing for all versions of the browser, but to answer to main question yes the answer sounds right to be, scrapping the extra 5px sounds like it should work. Without looking at the reasoning for it, I can’t really see why it would be there in the first place.

[owenatgov]

Added a PR to tackle the spacing of the details element separately #5352

[owenatgov]

Romaric had planned to approve this but he ran out of time yesterday and it's now his non-working day. Outside of github he's commented that he's happy with this change and he's given me permission to approve and merge this 🎉

[selfthinker]

Just to give a bit more context that I had shared with the team internally last week...

I have tested this in other iOS versions, and I've also tested the native version. Results from that are in the spreadsheet.
(Back in June I had also tested on TalkBack and updated the spreadsheet. The result was that there was no difference.)

VoiceOver iOS 17.5.1

Both the native version and the version from this PR work as expected.
While our old version doesn't.
The fact that the native version works as expected also makes clear that it was our CSS changes to display that caused the issue (together with the bug in iOS and/or VO that makes this behaviour possible).

VoiceOver iOS 15.8

None of the versions work.
Even the native version only says the text of the summary with nothing else announced.

VoiceOver iOS 12.5.7

Interestingly, the native version as well as the version from this PR worked okay.
And our old version doesn't.
That's an indication that that was a regression in iOS, either in version 13, 14 or 15.

Other iOS versions

I don't have access to other iOS versions.
I tested with a simulator in iOS 16.
And although that cannot be relied upon, it seems to be as bad as iOS 15.