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](alphagov/govuk-frontend#3836) and has been re-applied here. Thanks to @hannalaakso for the work upstream. Co-Authored-By: hannalaakso <[email protected]>
nhsuk · Oct 15, 2024 · 6b0d156 · 6b0d156
1 parent e8928eb
commit 6b0d156
Showing 1 changed file with 12 additions and 0 deletions.
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%);