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 [^fn1], 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.

Fixes #2349

[^fn1]: ‘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[bot]]

:clipboard: Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	113.49 KiB
dist/govuk-frontend-development.min.js	41.88 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.42 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	82.11 KiB
packages/govuk-frontend/dist/govuk/all.mjs	981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.48 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	41.87 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.86 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	79.24 KiB	39.84 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
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for 9a758368d2b6f6892d4878782f334c5c765256f4

[github-actions[bot]]

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 fd84364d2..a172fb4fa 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -2937,7 +2937,7 @@ screen and (forced-colors:active) {
     line-height: 1.25;
     color: #0b0c0c;
     margin-bottom: 20px;
-    display: block
+    display: flow-root
 }

 @media print {
@@ -2968,7 +2968,7 @@ screen and (forced-colors:active) {
 }

 .govuk-details__summary {
-    display: inline-block;
+    display: block;
     margin-bottom: 5px
 }

@@ -3021,6 +3021,9 @@ screen and (forced-colors:active) {
 @supports not (-ms-ime-align:auto) {
     .govuk-details__summary {
         position: relative;
+        width: -webkit-fit-content;
+        width: -moz-fit-content;
+        width: fit-content;
         padding-left: 25px;
         color: #1d70b8;
         cursor: pointer

---

Action run for 9a758368d2b6f6892d4878782f334c5c765256f4

[github-actions[bot]]

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 296fcfdb0..780bccffe 100644
--- a/packages/govuk-frontend/dist/govuk/components/details/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/details/_index.scss
@@ -4,13 +4,13 @@
     @include govuk-text-colour;
     @include govuk-responsive-margin(6, "bottom");

-    display: block;
+    // Prevent bottom margins on summary and details from collapsing in Firefox
+    // and Safari, matching Chrome's behaviour (https://crbug.com/40815464)
+    display: flow-root;
   }

   .govuk-details__summary {
-    // Make the focus outline shrink-wrap the text content of the summary
-    display: inline-block;
-
+    display: block;
     margin-bottom: govuk-spacing(1);
   }

@@ -72,6 +72,11 @@
       // 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: -moz-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 9a758368d2b6f6892d4878782f334c5c765256f4

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