Fix details expanded state not announced on iOS

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

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

[1]: https://bugs.webkit.org/show_bug.cgi?id=230408

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)
 

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;