Merge pull request #2720 from alphagov/bk-header-menu-i18n

Add parameter to localise mobile menu toggle button

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

src/govuk/components/header/header.yaml

@@ -51,11 +51,15 @@ 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
   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:
@@ -293,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

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>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 %}

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'])
 
@@ -217,6 +237,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')
+      })
     })
   })