Update header navigation label

nhsuk · Nov 14, 2024 · d6f4038 · d6f4038
1 parent 1ba3a91
commit d6f4038
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,21 @@
 # NHS.UK frontend Changelog
 
+## Unreleased
+
+:wrench: **Fixes**
+
+- Update header navigation label from ’Primary navigation’ to ‘Menu’, and remove superfluous `role` and `id` attributes. To update your HTML, replace:
+
+  ```html
+  <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+  ```
+
+  with
+
+  ```html
+  <nav class="nhsuk-navigation" aria-label="Menu">
+  ```
+
 ## 9.1.0 - 4 November 2024
 
 :new: **New features**

diff --git a/packages/components/header/README.md b/packages/components/header/README.md
@@ -42,7 +42,7 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
   </div>
   <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+      <nav class="nhsuk-navigation" aria-label="Menu">
         <ul class="nhsuk-header__navigation-list">
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link" href="https://www.nhs.uk/conditions">
@@ -157,7 +157,7 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
   </div>
   <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+      <nav class="nhsuk-navigation" aria-label="Menu">
         <ul class="nhsuk-header__navigation-list">
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="https://www.nhs.uk/conditions">
@@ -425,7 +425,7 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
   </div>
   <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+      <nav class="nhsuk-navigation" aria-label="Menu">
         <ul class="nhsuk-header__navigation-list">
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="#">
@@ -549,7 +549,7 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
   </div>
   <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+      <nav class="nhsuk-navigation" aria-label="Menu">
         <ul class="nhsuk-header__navigation-list">
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="#">
@@ -674,7 +674,7 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
   </div>
   <div class="nhsuk-navigation-container">
     <div class="nhsuk-width-container">
-      <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+      <nav class="nhsuk-navigation" aria-label="Menu">
         <ul class="nhsuk-header__navigation-list">
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="#">

diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
@@ -73,7 +73,7 @@
 
 {% if showNav == "true" and params.primaryLinks %}
   <div class="nhsuk-navigation-container">
-    <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
+    <nav class="nhsuk-navigation" aria-label="Menu">
       <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
         {%- for item in params.primaryLinks %}
         <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>