Update header navigation label (#1073)

* Update header navigation label

---------

Co-authored-by: Frankie Roberto <frankie@frankieroberto.com>
Co-authored-by: anandamaryon1 <anandamaryon@gmail.com>

Author: 3 people

CHANGELOG.md

@@ -11,6 +11,17 @@
 - Fix appearance of disabled warning buttons ([Issue 1034]([https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/1034]))
 - Fix reverse button text colour ([PR 1080]([https://github.com/nhsuk/nhsuk-frontend/pull/1080]))
 - Fix details component requiring html param in uppercase ([PR 1090](https://github.com/nhsuk/nhsuk-frontend/pull/1090), [Issue 1089](https://github.com/nhsuk/nhsuk-frontend/issues/1089))
+- 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">
+  ```
 
 :boom: **Breaking changes**
 

app/components/header/index.njk

@@ -22,11 +22,11 @@
         text: 'Mental health'
       },
       {
-        'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
+        href: 'https://www.nhs.uk/conditions/social-care-and-support/',
         text: 'Care and support'
       },
       {
-        'url'  : 'https://www.nhs.uk/pregnancy/',
+        href: 'https://www.nhs.uk/pregnancy/',
         text: 'Pregnancy'
       },
       {

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">
@@ -144,7 +144,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">
@@ -363,7 +363,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="#">
@@ -475,7 +475,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="#">
@@ -588,7 +588,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="#">

packages/components/header/template.njk

@@ -67,7 +67,7 @@
 
 {%- if params.primaryLinks and params.primaryLinks.length > 0 %}
   <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 %}
         {% set linkInnerContent %}