Update visually hidden behaviour to match GOV.UK Frontend

CHANGELOG.md

@@ -82,6 +82,7 @@ We've made fixes to NHS.UK frontend in the following pull requests:
 
 - [#1148: Fix Tabs component in Safari < 14 and Internet Explorer 11](https://github.com/nhsuk/nhsuk-frontend/pull/1148)
 - [#908: Updating secondary, reverse and warning buttons to use their hover variable rather than darkening the base colour](https://github.com/nhsuk/nhsuk-frontend/pull/908)
+- [#1169: Update visually hidden behaviour to match GOV.UK Frontend](https://github.com/nhsuk/nhsuk-frontend/pull/1169)
 
 ## 9.3.0 - 13 February 2025
 

packages/components/tables/_tables.scss

@@ -70,31 +70,23 @@
 
 /// Responsive table
 ///
-/// 1. Hiding the thead on mobile
-/// 2. Displaying the thead on desktop
-/// 3. Removing default screen reader behaviour
-/// 4. Assigning role of table-row on desktop to give default screen reader behaviour
-/// 5. Using justify content to space out elements in the row on mobile
-/// 6. Assigning a minimum width in case of black cell
-/// 7. Aligning content to the right on mobile
-/// 8. Aligning mobile header to left to split it from the data
-/// 9. Hiding mobile specific header from desktop view
-/// 10. Adding a display block value due to IE 11 not having full flex support
+/// 1. Hide the thead until desktop
+/// 2. Removing default screen reader behaviour
+/// 3. Assigning role of table-row on desktop to give default screen reader behaviour
+/// 4. Using justify content to space out elements in the row on mobile
+/// 5. Assigning a minimum width in case of black cell
+/// 6. Aligning content to the right on mobile
+/// 7. Aligning mobile header to left to split it from the data
+/// 8. Hiding mobile specific header from desktop view
+/// 9. Adding a display block value due to IE 11 not having full flex support
 
 .nhsuk-table-responsive {
   margin-bottom: 0;
   width: 100%;
 
   thead {
-    @include visually-hidden; // [1]
-
-    @include mq($from: desktop) {
-      @include visually-shown(table-header-group); // [2]
-
-      &::before,
-      &::after {
-        content: "";
-      }
+    @include mq($until: desktop) {
+      @include visually-hidden; // [1]
     }
   }
 

packages/core/tools/_mixins.scss

@@ -31,15 +31,58 @@
   max-width: 44em;
 }
 
-/// Visually hidden mixin, used for hiding
-/// content visually but keeping it in the DOM
+/// Helper function containing the common code for the following two mixins
+///
+/// @link https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+///   - Hiding Content for Accessibility, Jonathan Snook, February 2011
+/// @link https://github.com/h5bp/html5-boilerplate/blob/9f13695d21ff92c55c78dfa9f16bb02a1b6e911f/src/css/main.css#L121-L158
+///   - h5bp/html5-boilerplate - Thanks!
+///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
+/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service)
+
+@mixin _nhsuk-visually-hide-content($important: true) {
+  position: absolute if($important, !important, null);
+
+  width: 1px if($important, !important, null);
+  height: 1px if($important, !important, null);
+  // If margin is set to a negative value it can cause text to be announced in
+  // the wrong order in VoiceOver for OSX
+  margin: 0 if($important, !important, null);
+  padding: 0 if($important, !important, null);
+
+  overflow: hidden if($important, !important, null);
+
+  // `clip` is needed for IE11 support
+  clip: rect(0 0 0 0) if($important, !important, null);
+  clip-path: inset(50%) if($important, !important, null);
+
+  border: 0 if($important, !important, null);
+
+  // For long content, line feeds are not interpreted as spaces and small width
+  // causes content to wrap 1 word per line:
+  // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+  white-space: nowrap if($important, !important, null);
+
+  // Prevent users from selecting or copying visually-hidden text. This prevents
+  // a user unintentionally copying more text than they intended and needing to
+  // manually trim it down again.
+  user-select: none;
+}
+
+/// Hide an element visually, but have it available for screen readers
 ///
 /// @see utilities/visually-hidden
 ///
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
+///
 /// @example scss
-///   @include visually-hidden();
+///   @include visually-hidden;
+
+@mixin visually-hidden($important: true) {
+  @include _nhsuk-visually-hide-content($important: $important);
 
-@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
@@ -51,39 +94,36 @@
   &::after {
     content: "\00a0";
   }
-
-  border: 0;
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
 }
 
-/// Visually shown mixin, used for displaying
-/// content visually that has previously been hidden
-/// by visually-hidden
+/// Show an element visually that has previously been hidden by visually-hidden
 ///
-/// Differences between mobile and desktop views
-/// Use $display-property to assign display
+/// For differences between mobile and desktop views, use $display to set the CSS display property
+///
+/// @param {String} $display [null] - CSS display property (optional)
+/// @param {Boolean} $important [true] - Whether to mark as `!important`
 ///
 /// @example scss
-///   @include visually-shown(table-header-group);
-
-@mixin visually-shown($display-property) {
-  clip: auto;
-  -webkit-clip-path: initial;
-  clip-path: initial;
-  display: $display-property;
-  height: auto;
-  overflow: auto;
-  position: relative;
-  width: auto;
+///   @include visually-shown($display: table-header-group);
+///
+/// @deprecated To be removed in v10.0, use @media queries to apply `visually-hidden` instead
+
+@mixin visually-shown($display: null, $important: true) {
+  position: static if($important, !important, null);
+  width: auto if($important, !important, null);
+  height: auto if($important, !important, null);
+  margin: 0 if($important, !important, null);
+  padding: 0 if($important, !important, null);
+  overflow: visible if($important, !important, null);
+  clip: auto if($important, !important, null);
+  clip-path: none if($important, !important, null);
+  border: none if($important, !important, null);
+  white-space: normal if($important, !important, null);
+  user-select: auto if($important, !important, null);
+
+  @if $display {
+    display: $display;
+  }
 }
 
 /// Top and bottom margin mixin, remove