Merge pull request #3791 from alphagov/kg-mobile-button-toggle-text

Refactor mobile menu button label/text handling

CHANGELOG.md

@@ -230,6 +230,12 @@ If you need to maintain the existing behaviour, you can set the value to an empt
 
 This change was introduced in [pull request #3773: Omit the value attribute from select options with no value](https://github.com/alphagov/govuk-frontend/pull/3773).
 
+### Fixes
+
+We’ve made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#3791: Refactor mobile menu button label/text handling](https://github.com/alphagov/govuk-frontend/pull/3791)
+
 ## 4.6.0 (Feature release)
 
 ### New features

packages/govuk-frontend/src/govuk/components/header/header.yaml

@@ -55,7 +55,7 @@ params:
   - name: menuButtonLabel
     type: string
     required: false
-    description: Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu. Defaults to 'Show or hide menu'.
+    description: Text for the `aria-label` attribute of the button that opens the mobile navigation, if there is a mobile navigation menu.
   - name: menuButtonText
     type: string
     required: false

packages/govuk-frontend/src/govuk/components/header/template.njk

@@ -58,7 +58,7 @@
     {% endif %}
     {% if params.navigation %}
     <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>
+      <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation"{%- if params.menuButtonLabel and params.menuButtonLabel != menuButtonText %} aria-label="{{ params.menuButtonLabel }}"{% endif %} hidden>{{ menuButtonText }}</button>
 
       <ul id="navigation" class="govuk-header__navigation-list">
         {% for item in params.navigation %}

packages/govuk-frontend/src/govuk/components/header/template.test.js

@@ -207,13 +207,6 @@ describe('header', () => {
 
         expect($button.attr('hidden')).toBeTruthy()
       })
-      it('renders default label correctly', () => {
-        const $ = render('header', examples['with navigation'])
-
-        const $button = $('.govuk-header__menu-button')
-
-        expect($button.attr('aria-label')).toEqual('Show or hide menu')
-      })
       it('allows label to be customised', () => {
         const $ = render('header', examples['with custom menu button label'])