From 00371fa1e36aca169b9e8a8488f3f8310ed10349 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 18 Jun 2024 15:06:08 +0100 Subject: [PATCH] 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 `
` 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 ``. 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 | 1 + .../govuk-frontend/src/govuk/components/details/_index.scss | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36404a63bf..ca663e8b57 100644 --- 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 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 index 5f6f2e7ec7..9d041d3472 100644 --- 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;