Merge pull request #1943 from alphagov/header-label-name

Change header menu button label

CHANGELOG.md

@@ -50,6 +50,13 @@ For example:
 
 This was added in [pull request #1905: Set navigation and mobile menu labels of the header component with new options](https://github.com/alphagov/govuk-frontend/pull/1905).
 
+### Fixes
+
+We’ve made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#1943: Change header menu button label](https://github.com/alphagov/govuk-frontend/pull/1943)
+
+
 ## 3.8.1 (Fix release)
 
 ### Fixes

src/govuk/components/header/header.yaml

@@ -51,11 +51,11 @@ params:
 - name: navigationLabel
   type: string
   required: false
-  description: Text for the `aria-label` attribute of the navigation. Defaults to "Top Level Navigation".
+  description: Text for the `aria-label` attribute of the navigation. Defaults to "Navigation menu".
 - name: menuButtonLabel
   type: string
   required: false
-  description: Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to "Show or hide Top Level Navigation".
+  description: Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to "Show or hide navigation menu".
 - name: containerClasses
   type: string
   required: false

src/govuk/components/header/template.njk

@@ -60,9 +60,9 @@
     </a>
     {% endif %}
     {% if params.navigation %}
-    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide Top Level Navigation') }}">Menu</button>
+    <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide navigation menu') }}">Menu</button>
     <nav>
-      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="{{ params.navigationLabel | default('Top Level Navigation') }}">
+      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="{{ params.navigationLabel | default('Navigation menu') }}">
         {% for item in params.navigation %}
           {% if item.text or item.html %}
             <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">

src/govuk/components/header/template.test.js

@@ -123,7 +123,7 @@ describe('header', () => {
       const $component = $('.govuk-header')
       const $list = $component.find('ul.govuk-header__navigation')
 
-      expect($list.attr('aria-label')).toEqual('Top Level Navigation')
+      expect($list.attr('aria-label')).toEqual('Navigation menu')
     })
 
     it('allows navigation label to be customised', () => {
@@ -191,7 +191,7 @@ describe('header', () => {
 
         const $button = $('.govuk-header__menu-button')
 
-        expect($button.attr('aria-label')).toEqual('Show or hide Top Level Navigation')
+        expect($button.attr('aria-label')).toEqual('Show or hide navigation menu')
       })
       it('allows label to be customised', () => {
         const $ = render('header', examples['with custom menu button label'])