From 6b0d1569371fb259a64ff6d863092281312a2385 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Sat, 8 Jun 2024 21:51:46 +0100 Subject: [PATCH 1/2] 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%); From 3b4ff6680520ee82b242c910c025d8aaf2f2d8ab Mon Sep 17 00:00:00 2001 From: anandamaryon1 Date: Wed, 16 Oct 2024 09:35:02 +0100 Subject: [PATCH 2/2] responsive table head visually hidden bug fix --- packages/components/tables/_tables.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/tables/_tables.scss b/packages/components/tables/_tables.scss index 12492ecb9..f05fcc5e8 100644 --- a/packages/components/tables/_tables.scss +++ b/packages/components/tables/_tables.scss @@ -99,6 +99,11 @@ @include mq($from: desktop) { @include visually-shown(table-header-group); /* [2] */ + + &:before, + &:after { + content: ""; + } } }