PLATUI-2900: Added missing navigationLabel param to header (#358)

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [6.11.0] - 2024-03-25
+
+### Changed
+
+- Added `navigationLabel` param to `header` component in line with the `govuk-frontend` header
+
 ## [6.10.0] - 2024-03-25
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/components/header/header.yaml

@@ -48,6 +48,10 @@ params:
   type: string
   required: false
   description: Classes for the navigation section of the header.
+- name: navigationLabel
+  type: string
+  required: false
+  description: Text for the `aria-label` attribute of the navigation. Defaults to the same value as `menuButtonText`.
 - name: menuButtonLabel
   type: string
   required: false
@@ -459,8 +463,8 @@ examples:
     attributes:
       data-test-attribute-3: value-3
 
-- name: with custom menu button text and label
-  description: With the menuButtonText and menuButtonLabel parameters set
+- name: with custom navigation text and labels
+  description: With the menuButtonText, menuButtonLabel and navigationLabel parameters set
   data:
     navigation:
       - href: '#1'
@@ -472,5 +476,6 @@ examples:
         text: Navigation item 3
       - href: '#4'
         text: Navigation item 4
-    menuButtonText: 'Some custom button text'
-    menuButtonLabel: 'Some custom button aria label'
+    menuButtonText: 'Custom button text'
+    menuButtonLabel: 'Custom button label'
+    navigationLabel: 'Custom navigation label'

src/components/header/template.test.js

@@ -190,6 +190,13 @@ describe('header', () => {
       expect(outputs[0]).toEqual(outputs[2]);
     });
 
+    it('renders navigation with a custom aria label', () => {
+      const $ = render('header', examples['with custom navigation text and labels']);
+
+      const $nav = $('.govuk-header__navigation');
+      expect($nav.attr('aria-label').trim()).toEqual('Custom navigation label');
+    });
+
     describe('menu button', () => {
       it('should have English text as default', () => {
         const $ = render('header', examples['with navigation']);
@@ -205,12 +212,12 @@ describe('header', () => {
         expect($button.text().trim()).toEqual('Dewislen');
       });
 
-      it('should have custom text and aria-label when specified', () => {
-        const $ = render('header', examples['with custom menu button text and label']);
+      it('should have custom text and labels when specified', () => {
+        const $ = render('header', examples['with custom navigation text and labels']);
 
         const $button = $('.govuk-header__menu-button');
-        expect($button.text().trim()).toEqual('Some custom button text');
-        expect($button.attr('aria-label').trim()).toEqual('Some custom button aria label');
+        expect($button.text().trim()).toEqual('Custom button text');
+        expect($button.attr('aria-label').trim()).toEqual('Custom button label');
       });
     });
   });