Fix space not being read in visually hidden text

On the GOV.UK search results page, the h1 heading contains the word "Search" followed by the visually hidden text, "all content". However, JAWS and NVDA on Chrome, Edge and IE11 are not announcing the space before "all content". This came up in user research, with the user saying that it was challenging the identify what was being announced with the space omitted. This is a known issue which has previously been reported to JAWS: alphagov/reported-bugs#51. An equivalent bug also happens when the visually hidden text appears before the visible text, for instance on gov.uk/travel-advice. Here, JAWS announces the heading as "Countries starting withA" (for some reason NVDA interprets the space correctly here).

This bug is happening because the `govuk-visually-hidden` class uses `position: absolute` as a fallback for older browsers that don't support `clip-path`. When the visually hidden element is taken out of the page flow with absolute positioning, the space before the text gets removed as it's no longer relative to the text preceeding it. The white space being thus removed can be seen visually in modern browsers, and by inspecting the accessibility tree: the value of the visually hidden content in the accessibility tree is "all content" (no whitespace), but without 'position: absolute' it's " all content".

To fix this, insert a space character using pseudo elements before and after the visually hidden text. This tests well in all screen readers, regardless of whether the whitespace is before the visually hidden text ("Search _all content_"), after the visually hidden text ("_Countries starting with_ A") or where the heading text is only made up visually hidden text ("_Navigation menu_"). The only slight regression found is that Mac VoiceOver in Safari explicitly announces the inserted spare characters when navigating by headings - but this is unlikely to block any users and the user numbers for Mac VoiceOver are small compared to other assistive technologies.

This fix only addresses the issue in one place but we should also add it to the headings on gov.uk/travel-advice, or otherwise contribute the fix upstream to the GOV.UK Design System.

app/assets/stylesheets/finder_frontend.scss

@@ -1,5 +1,18 @@
 $app-colour-true-black: #000000;
 
+.app-visually-hidden {
+  // The current .govuk-visually-hidden uses absolute positioning. This has the unintended consequence of removing
+  // any necessary whitespace before and after the visually hidden element, and potentially making screen reader 
+  // announcements unintelligble. To fix this, insert a space character before and after the visually hidden
+  // text.
+  &:before { 
+    content:"\00a0";
+  }
+  &:after { 
+    content:"\00a0";
+  }
+}
+
 .metadata-summary {
   @include govuk-font(19);
   margin-bottom: govuk-spacing(6);

app/views/finders/_show_header.html.erb

@@ -26,7 +26,7 @@
     <div class="govuk-grid-column-two-thirds">
       <% if content_item.all_content_finder? %>
       <%= render "govuk_publishing_components/components/heading", {
-        text: sanitize("Search <span class='govuk-visually-hidden'>all content</span>"),
+        text: sanitize("Search <span class='govuk-visually-hidden app-visually-hidden'>all content</span>"),
         heading_level: 1,
         font_size: "xl",
         margin_bottom: 4