Allow the secondary navigation heading to be visually hidden

nationalarchives · Feb 25, 2025 · eddd15a · eddd15a
1 parent 0ddad71
commit eddd15a
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added a `<a id="top"></a>` element to the top of the `bodyStart` block to allow for jumping to the top of the page
+- Allow the heading of a secondary navigation to be visually hidden with `visuallyHideHeading`
 
 ### Changed
 

diff --git a/src/nationalarchives/components/secondary-navigation/fixtures.json b/src/nationalarchives/components/secondary-navigation/fixtures.json
@@ -96,6 +96,30 @@
       },
       "html": "<nav class=\"tna-secondary-navigation\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
     },
+    {
+      "name": "hidden heading",
+      "options": {
+        "title": "Title",
+        "headingLevel": 2,
+        "items": [
+          {
+            "name": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "name": "Beta",
+            "href": "#/beta",
+            "current": true
+          },
+          {
+            "name": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "visuallyHideHeading": true
+      },
+      "html": "<nav class=\"tna-secondary-navigation tna-secondary-navigation--unindent\" aria-label=\"Title\"><h2 class=\"tna-secondary-navigation__heading tna-heading-s tna-visually-hidden\">Title</h2><ul class=\"tna-secondary-navigation__items\"><li class=\"tna-secondary-navigation__item\"><a href=\"#/alpha\" class=\"tna-secondary-navigation__link\">Alpha</a></li><li class=\"tna-secondary-navigation__item tna-secondary-navigation__item--current\"><a href=\"#/beta\" class=\"tna-secondary-navigation__link\">Beta</a></li><li class=\"tna-secondary-navigation__item\"><a href=\"#/gamma\" class=\"tna-secondary-navigation__link\">Gamma</a></li></ul></nav>"
+    },
     {
       "name": "with classes",
       "options": {

diff --git a/src/nationalarchives/components/secondary-navigation/macro-options.json b/src/nationalarchives/components/secondary-navigation/macro-options.json
@@ -11,6 +11,13 @@
     "required": true,
     "description": ""
   },
+  {
+    "name": "visuallyHideHeading",
+    "type": "boolean",
+    "required": false,
+    "description": "",
+    "default": false
+  },
   {
     "name": "items",
     "type": "array",

diff --git a/src/nationalarchives/components/secondary-navigation/secondary-navigation.stories.js b/src/nationalarchives/components/secondary-navigation/secondary-navigation.stories.js
@@ -9,6 +9,7 @@ const argTypes = {
   noBottomBorder: { control: "boolean" },
   overflow: { control: "boolean" },
   noUnindentation: { control: "boolean" },
+  visuallyHideHeading: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -31,6 +32,7 @@ const Template = ({
   noBottomBorder,
   overflow,
   noUnindentation,
+  visuallyHideHeading,
   classes,
   attributes,
 }) =>
@@ -43,6 +45,7 @@ const Template = ({
         noBottomBorder,
         overflow,
         noUnindentation,
+        visuallyHideHeading,
         classes,
         attributes,
       },

diff --git a/src/nationalarchives/components/secondary-navigation/template.njk b/src/nationalarchives/components/secondary-navigation/template.njk
@@ -10,7 +10,7 @@
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <nav class="tna-secondary-navigation{% if classes %} {{ classes }}{% endif %}" aria-label="{{ params.title }}"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-  <h{{ params.headingLevel }} class="tna-secondary-navigation__heading tna-heading-s">
+  <h{{ params.headingLevel }} class="tna-secondary-navigation__heading tna-heading-s{% if params.visuallyHideHeading %} tna-visually-hidden{% endif %}">
     {{ params.title }}
   </h{{ params.headingLevel }}>
   <ul class="tna-secondary-navigation__items">

diff --git a/src/nationalarchives/components/sidebar/sidebar.scss b/src/nationalarchives/components/sidebar/sidebar.scss
@@ -1,4 +1,4 @@
-@use "../../variables/a11y";
+@use "../../variables/a11y" as a11yVars;
 @use "../../tools/borders";
 @use "../../tools/colour";
 @use "../../tools/media";
@@ -23,7 +23,7 @@
   }
 
   &__items {
-    padding-top: max(spacing.space(0.5), #{a11y.$focus-outline-padding});
+    padding-top: max(spacing.space(0.5), #{a11yVars.$focus-outline-padding});
 
     // &:focus {
     //   outline: none;
@@ -151,7 +151,7 @@
 
   &--sticky &__items {
     margin: 0;
-    padding-bottom: a11y.$focus-outline-padding;
+    padding-bottom: a11yVars.$focus-outline-padding;
 
     overflow-y: auto;
 
@@ -165,13 +165,13 @@
 
   &--sticky#{&}--sections &__items,
   &--sticky#{&}--pages &__items {
-    width: calc(100% - #{a11y.$focus-outline-padding});
-    padding-right: a11y.$focus-outline-padding;
-    padding-left: a11y.$focus-outline-padding;
+    width: calc(100% - #{a11yVars.$focus-outline-padding});
+    padding-right: a11yVars.$focus-outline-padding;
+    padding-left: a11yVars.$focus-outline-padding;
 
     box-sizing: content-box;
 
     position: relative;
-    left: -#{a11y.$focus-outline-padding};
+    left: -#{a11yVars.$focus-outline-padding};
   }
 }