Refactor mobile menu button label/text handling

alphagov · Jun 12, 2023 · 2835bbc · 2835bbc
1 parent 5daef48
commit 2835bbc
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 9 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/header/header.yaml b/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

diff --git a/packages/govuk-frontend/src/govuk/components/header/template.njk b/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 %}

diff --git a/packages/govuk-frontend/src/govuk/components/header/template.test.js b/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'])