Announce whitespace in screen reader announcements of visually hidden…

… text (#960) 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](alphagov/govuk-frontend#3836) and has been re-applied here. Thanks to @hannalaakso for the work upstream. --------- Co-authored-by: hannalaakso <[email protected]> Co-authored-by: anandamaryon1 <[email protected]>
nhsuk · Oct 17, 2024 · bc50201 · bc50201
1 parent e8928eb
commit bc50201
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git 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: "";
+      }
     }
   }
 

diff --git 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%);