Merge pull request #5089 from alphagov/details-expanded-state-ios

Fix details expanded state not announced on iOS
alphagov · Sep 25, 2024 · 00daf73 · 00daf73
2 parents 2d3fbaa + 00371fa
commit 00daf73
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests:
 - [#5278: Fix service navigation mobile toggle spacing](https://github.com/alphagov/govuk-frontend/pull/5278)
 - [#5331: Fix Warning Text font weight when <strong> styles are reset](https://github.com/alphagov/govuk-frontend/pull/5331)
 - [#5352: Only apply margin to details summary when open](https://github.com/alphagov/govuk-frontend/pull/5352)
+- [#5089: Fix details expanded state not announced on iOS](https://github.com/alphagov/govuk-frontend/pull/5089)
 
 ## v5.6.0 (Feature release)
 

diff --git a/packages/govuk-frontend/src/govuk/components/details/_index.scss b/packages/govuk-frontend/src/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,9 @@
       // Absolutely position the marker against this element
       position: relative;
 
+      // Make the focus outline shrink-wrap the text content of the summary
+      width: fit-content;
+
       // Allow for absolutely positioned marker and align with disclosed text
       padding-left: govuk-spacing(4) + $govuk-border-width;