From 6b0d1569371fb259a64ff6d863092281312a2385 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Sat, 8 Jun 2024 21:51:46 +0100 Subject: [PATCH] Announce whitespace in screen reader announcements of visually hidden text This fixes a bug in the nhsuk-u-visually-hidden helper class where any whitespace surrounding visually hidden text isn't announced by screen readers. This fix was added to `govuk-frontend` in [pull request #3868](https://github.com/alphagov/govuk-frontend/pull/3836) and has been re-applied here. Thanks to @hannalaakso for the work upstream. Co-Authored-By: hannalaakso <5007934+hannalaakso@users.noreply.github.com> --- packages/core/tools/_mixins.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/core/tools/_mixins.scss b/packages/core/tools/_mixins.scss index 6febbbde5..bc903f864 100644 --- a/packages/core/tools/_mixins.scss +++ b/packages/core/tools/_mixins.scss @@ -38,6 +38,18 @@ // @mixin visually-hidden() { + // Absolute positioning has the unintended consequence of removing any + // whitespace surrounding visually hidden text from the accessibility tree. + // Insert a space character before and after visually hidden text to separate + // it from any visible text surrounding it. + &::before { + content: "\00a0"; + } + + &::after { + content: "\00a0"; + } + border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%);