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]>

app/pages/examples.njk

@@ -127,6 +127,12 @@
     <li><a href="../components/warning-callout/index.html">Warning callout</a></li>
     <li><a href="../components/warning-callout/custom-heading.html">Warning callout with custom heading</a></li>
   </ul>
+
+  <h2>Styles</h2>
+  <ul class="nhsuk-list">
+    <li><a href="../styles/typography.html">Typography</a></li>
+  </ul>
+
 {% endblock %}
 
 {% block footer %}
@@ -156,4 +162,4 @@
     ]
   })}}
 
-{% endblock %}
+{% endblock %}

app/styles/typography.njk

@@ -0,0 +1,83 @@
+{% set title = 'Typography' %}
+
+{% extends 'page.njk' %}
+
+{% block header %}
+  {{ super() }}
+{% endblock %}
+
+{% block breadcrumb %}
+  {{ breadcrumb({
+    items: [
+      {
+        href: "../../",
+        text: "NHS.UK frontend"
+      },
+      {
+        href: "../pages/examples.html",
+        text: "Examples"
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+
+  <h1 class="nhsuk-heading-xl">Typography</h1>
+
+
+  <h2 class="nhsuk-heading-l">Visually-hidden text</h2>
+
+  <h3 class="nhsuk-heading-m">Heading with visually hidden text at the beginning</h3>
+
+  <h4 class="nhsuk-heading-s"><span class="nhsuk-u-visually-hidden">Countries starting with </span>A</h4>
+
+  <h3 class="nhsuk-heading-m">Heading with visually hidden text at the end</h3>
+
+  <h4 class="nhsuk-heading-s">Search <span class="nhsuk-u-visually-hidden">all content</span></h4>
+
+  <h3 class="nhsuk-heading-m">Heading that is visually hidden</h3>
+
+  <h4 class="nhsuk-u-visually-hidden">Navigation menu</h4>
+
+  <hr class="nhsuk-section-break nhsuk-section-break--visible nhsuk-section-break--xl">
+
+  <h3 class="nhsuk-heading-m">Paragraph that contains visually hidden text</h3>
+
+  <p class="nhsuk-body">This is a paragraph <span class="nhsuk-u-visually-hidden">with some visually hidden text</span>.</p>
+
+  <hr class="nhsuk-section-break nhsuk-section-break--visible nhsuk-section-break--xl">
+
+  <h3 class="nhsuk-heading-m">Table with visually hidden text</h3>
+
+  <table class="nhsuk-table">
+    <caption class="nhsuk-table__caption nhsuk-!-margin-bottom-4">2019</caption>
+    <thead role="rowgroup" class="nhsuk-table__head">
+      <tr role="row">
+        <th role="columnheader" class="nhsuk-u-visually-hidden" scope="col">
+          Date
+        </th>
+        <th role="columnheader" class="nhsuk-u-visually-hidden" scope="col">
+          Day
+        </th>
+        <th role="columnheader" class="nhsuk-u-visually-hidden" scope="col">
+          Name
+        </th>
+      </tr>
+    </thead>
+    <tbody class="nhsuk-table__body">
+      <tr role="row" class="nhsuk-table__row">
+        <td class="nhsuk-table__cell">19 April</td>
+        <td class="nhsuk-table__cell ">Friday</td>
+        <td class="nhsuk-table__cell ">Good Friday</td>
+      </tr>
+      <tr role="row" class="nhsuk-table__row">
+        <td class="nhsuk-table__cell">22 April</td>
+        <td class="nhsuk-table__cell ">Monday</td>
+        <td class="nhsuk-table__cell ">Easter Monday</td>
+      </tr>
+    </tbody>
+  </table>
+
+
+{% endblock %}

packages/core/tools/_mixins.scss

@@ -38,6 +38,20 @@
 //
 
 @mixin visually-hidden() {
+  position: absolute;
+
+  // 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%);
@@ -46,7 +60,6 @@
   margin: 0;
   overflow: hidden;
   padding: 0;
-  position: absolute;
   white-space: nowrap;
   width: 1px;
 }