Allow former class of tna-visually-hidden

CHANGELOG.md

@@ -14,7 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- `tna-visually-hidden` changed to `tna-!--visually-hidden`
+- `tna-visually-hidden` could instead use the class `tna-!--visually-hidden` (will deprecate one of these in the future)
 - Changed Node version from `lts/hydrogen` to `lts/iron`
 - Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile`
 

src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs

@@ -32,7 +32,7 @@ export class Breadcrumbs {
       const $expandButton = document.createElement("button");
       $expandButton.classList.add("tna-breadcrumbs__link");
       $expandButton.innerHTML =
-        "<span class='tna-visually-hidden'>Expand breadcrumbs</span>&hellip;";
+        "<span class='tna-!--visually-hidden'>Expand breadcrumbs</span>&hellip;";
       $expandButton.setAttribute("aria-expanded", "false");
       $expandButton.setAttribute("aria-controls", uniqueId);
       $expandButton.addEventListener("click", () => {

src/nationalarchives/components/footer/template.njk

@@ -31,7 +31,7 @@
                   {%- else -%}
                   <i class="fa-solid fa-{{ item.icon }}"></i>
                   {%- endif -%}
-                <span class="tna-footer__social-item-link-text tna-visually-hidden">
+                <span class="tna-footer__social-item-link-text tna-!--visually-hidden">
                   {{ item.text }}
                 </span>
                 {%- else -%}

src/nationalarchives/components/index-grid/template.njk

@@ -46,7 +46,7 @@
         <span class="tna-index-grid__item-content">
           <span class="tna-index-grid__item-title">{{ item.title }}</span>
           {%- if item.label -%}
-          <span class="tna-chip tna-index-grid__item-label">{{ item.label }}<span class="tna-visually-hidden">:</span></span>
+          <span class="tna-chip tna-index-grid__item-label">{{ item.label }}<span class="tna-!--visually-hidden">:</span></span>
           {%- endif -%}
           {%- if item.subtitle -%}
           <br>

src/nationalarchives/utilities/_a11y.scss

@@ -1,5 +1,6 @@
 @use "../tools/colour";
 
+.tna-visually-hidden,
 .tna-\!--visually-hidden {
   width: 1px !important;
   height: 1px !important;