From dc892e5ef90b25703acfa474ae21d785690e25d9 Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Mon, 30 May 2022 14:12:07 +0100
Subject: [PATCH 1/5] Add parameter to localise mobile menu toggle button

Adds the `menuButton` parameter to customise the text of the menu toggle button that appears on narrow screens.
---
 src/govuk/components/header/header.yaml      | 19 +++++++++++++++++++
 src/govuk/components/header/template.njk     |  2 +-
 src/govuk/components/header/template.test.js | 14 ++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
index 0058649cbc..7ac0614005 100644
--- a/src/govuk/components/header/header.yaml
+++ b/src/govuk/components/header/header.yaml
@@ -56,6 +56,10 @@ params:
   type: string
   required: false
   description: Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to 'Show or hide menu'.
+- name: menuButtonText
+  type: string
+  required: false
+  description: Text for the button that toggles the navigation. This should be the shortest useful text that describes the button's purpose. Defaults to 'Menu'.
 - name: containerClasses
   type: string
   required: false
@@ -131,6 +135,21 @@ examples:
         text: Navigation item 3
       - href: '#4'
         text: Navigation item 4
+        
+- name: with custom menu button text
+  description: Button translated into Welsh
+  data:
+    menuButtonText: Dewislen
+    navigation:
+      - href: '#1'
+        text: Eitem llywio 1
+        active: true
+      - href: '#2'
+        text: Eitem llywio 2
+      - href: '#3'
+        text: Eitem llywio 3
+      - href: '#4'
+        text: Eitem llywio 4
 
 - name: with custom menu button label
   data:
diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk
index d6e4cd2baa..0892e5a58e 100644
--- a/src/govuk/components/header/template.njk
+++ b/src/govuk/components/header/template.njk
@@ -61,7 +61,7 @@
     {% endif %}
     {% if params.navigation %}
     <nav aria-label="{{ params.navigationLabel | default('Menu') }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
-      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}" hidden>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 menu') }}" hidden>{{ params.menuButtonText | default('Menu') }}</button>
 
       <ul id="navigation" class="govuk-header__navigation-list">
         {% for item in params.navigation %}
diff --git a/src/govuk/components/header/template.test.js b/src/govuk/components/header/template.test.js
index 3436cbcbb9..65651843ab 100644
--- a/src/govuk/components/header/template.test.js
+++ b/src/govuk/components/header/template.test.js
@@ -217,6 +217,20 @@ describe('header', () => {
 
         expect($button.attr('aria-label')).toEqual('Custom button label')
       })
+      it('renders default text correctly', () => {
+        const $ = render('header', examples['with navigation'])
+
+        const $button = $('.govuk-header__menu-button')
+
+        expect($button.text()).toEqual('Menu')
+      })
+      it('allows text to be customised', () => {
+        const $ = render('header', examples['with custom menu button text'])
+
+        const $button = $('.govuk-header__menu-button')
+
+        expect($button.text()).toEqual('Dewislen')
+      })
     })
   })
 

From 6ce53b18c8313f9915455dbd3224e8300b6db3d3 Mon Sep 17 00:00:00 2001
From: Brett Kyle <brett.kyle@digital.cabinet-office.gov.uk>
Date: Wed, 27 Jul 2022 13:53:22 +0100
Subject: [PATCH 2/5] Default navigationLabel to menuButtonText if not set

---
 src/govuk/components/header/header.yaml  | 2 +-
 src/govuk/components/header/template.njk | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
index 7ac0614005..e9a67a83c8 100644
--- a/src/govuk/components/header/header.yaml
+++ b/src/govuk/components/header/header.yaml
@@ -51,7 +51,7 @@ params:
 - name: navigationLabel
   type: string
   required: false
-  description: Text for the `aria-label` attribute of the navigation. Defaults to 'Menu'.
+  description: Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`.
 - name: menuButtonLabel
   type: string
   required: false
diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk
index 0892e5a58e..52f4dd814c 100644
--- a/src/govuk/components/header/template.njk
+++ b/src/govuk/components/header/template.njk
@@ -1,3 +1,5 @@
+{% set menuButtonText = params.menuButtonText if params.menuButtonText else 'Menu' %}
+
 <header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="govuk-header"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
@@ -60,8 +62,8 @@
     {% endif %}
     {% endif %}
     {% if params.navigation %}
-    <nav aria-label="{{ params.navigationLabel | default('Menu') }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
-      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}" hidden>{{ params.menuButtonText | default('Menu') }}</button>
+    <nav aria-label="{{ params.navigationLabel | default(menuButtonText) }}" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}">
+      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="{{ params.menuButtonLabel | default('Show or hide menu') }}" hidden>{{ menuButtonText }}</button>
 
       <ul id="navigation" class="govuk-header__navigation-list">
         {% for item in params.navigation %}

From a0dc6e18504ff4e27d052a2a16fd6321c38fc280 Mon Sep 17 00:00:00 2001
From: Brett Kyle <brett.kyle@digital.cabinet-office.gov.uk>
Date: Wed, 27 Jul 2022 14:02:29 +0100
Subject: [PATCH 3/5] Add CHANGELOG entry

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7656fb1baf..bb8e461570 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,14 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 
 ### New features
 
+#### Localise the navigation menu toggle button
+
+When using the [header](https://design-system.service.gov.uk/components/header/) Nunjucks macro, you can now translate the text of the mobile navigation menu toggle button by using the `menuButtonText` parameter.
+
+You should avoid lengthy values for the `menuButtonText` parameter, as the text can overflow and cause visual issues if too long. 
+
+This was added in [pull request #2720: Add parameter to localise mobile menu toggle button](https://github.com/alphagov/govuk-frontend/pull/2720).
+
 #### Customise the Open Graph image URL without duplicate meta tags
 
 You can now customise the Open Graph image URL included in the `head` by setting the `opengraphImageUrl` Nunjucks option.

From 90b024d1b9dc9a934700e0f3bdccddc7ec7864bd Mon Sep 17 00:00:00 2001
From: Brett Kyle <brett.kyle@digital.cabinet-office.gov.uk>
Date: Wed, 27 Jul 2022 14:24:38 +0100
Subject: [PATCH 4/5] Add tests for navigation label when custom menu button
 text is set

---
 src/govuk/components/header/header.yaml      | 15 +++++++++++++++
 src/govuk/components/header/template.test.js | 20 ++++++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/src/govuk/components/header/header.yaml b/src/govuk/components/header/header.yaml
index e9a67a83c8..738126a4fd 100644
--- a/src/govuk/components/header/header.yaml
+++ b/src/govuk/components/header/header.yaml
@@ -312,3 +312,18 @@ examples:
         active: true
       - html: <em>Navigation item 2</em>
       - html: <em>Navigation item 3</em>
+- name: with custom navigation label and custom menu button text
+  hidden: true
+  data:
+    menuButtonText: Custom menu button text
+    navigationLabel: Custom navigation label
+    navigation:
+      - href: '#1'
+        text: Navigation item 1
+        active: true
+      - href: '#2'
+        text: Navigation item 2
+      - href: '#3'
+        text: Navigation item 3
+      - href: '#4'
+        text: Navigation item 4
diff --git a/src/govuk/components/header/template.test.js b/src/govuk/components/header/template.test.js
index 65651843ab..81b7df6d44 100644
--- a/src/govuk/components/header/template.test.js
+++ b/src/govuk/components/header/template.test.js
@@ -136,6 +136,15 @@ describe('header', () => {
       expect($nav.attr('aria-label')).toEqual('Menu')
     })
 
+    it('renders navigation label correctly when custom menu button text is set', () => {
+      const $ = render('header', examples['with custom menu button text'])
+
+      const $component = $('.govuk-header')
+      const $nav = $component.find('nav')
+
+      expect($nav.attr('aria-label')).toEqual('Dewislen')
+    })
+
     it('allows navigation label to be customised', () => {
       const $ = render('header', examples['with custom navigation label'])
 
@@ -145,6 +154,17 @@ describe('header', () => {
       expect($nav.attr('aria-label')).toEqual('Custom navigation label')
     })
 
+    it('renders navigation label and menu button text when these are both set', () => {
+      const $ = render('header', examples['with custom navigation label and custom menu button text'])
+
+      const $component = $('.govuk-header')
+      const $nav = $component.find('nav')
+      const $button = $component.find('.govuk-header__menu-button')
+
+      expect($nav.attr('aria-label')).toEqual('Custom navigation label')
+      expect($button.text()).toEqual('Custom menu button text')
+    })
+
     it('renders navigation with active item', () => {
       const $ = render('header', examples['with navigation'])
 

From cbdbe254d42fd6165f65b08ad731219a16e52c34 Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Thu, 18 Aug 2022 16:33:29 +0100
Subject: [PATCH 5/5] Move changelog entry

---
 CHANGELOG.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bb8e461570..c0ee76ccf8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,14 @@ $govuk-button-text-colour: govuk-colour("black");
 
 This was added in [pull request #2752: Change the Button component background and text colour](https://github.com/alphagov/govuk-frontend/pull/2752). Thanks to [Nick Colley](https://github.com/NickColley) for this contribution.
 
+#### Localise the navigation menu toggle button
+
+When using the [header](https://design-system.service.gov.uk/components/header/) Nunjucks macro, you can now translate the text of the mobile navigation menu toggle button by using the `menuButtonText` parameter.
+
+You should avoid lengthy values for the `menuButtonText` parameter, as the text can overflow and cause visual issues if too long. 
+
+This was added in [pull request #2720: Add parameter to localise mobile menu toggle button](https://github.com/alphagov/govuk-frontend/pull/2720).
+
 ### Recommended changes
 
 #### Remove `aria-labelledby`, remove `id="error-summary-title"` from title and move `role="alert"` to child container on the error summary component
@@ -62,14 +70,6 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 
 ### New features
 
-#### Localise the navigation menu toggle button
-
-When using the [header](https://design-system.service.gov.uk/components/header/) Nunjucks macro, you can now translate the text of the mobile navigation menu toggle button by using the `menuButtonText` parameter.
-
-You should avoid lengthy values for the `menuButtonText` parameter, as the text can overflow and cause visual issues if too long. 
-
-This was added in [pull request #2720: Add parameter to localise mobile menu toggle button](https://github.com/alphagov/govuk-frontend/pull/2720).
-
 #### Customise the Open Graph image URL without duplicate meta tags
 
 You can now customise the Open Graph image URL included in the `head` by setting the `opengraphImageUrl` Nunjucks option.