diff --git a/CHANGELOG.md b/CHANGELOG.md index 77367fb2..feb17f0c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/backstop_data/bitmaps_reference/backstop_default_header_with_custom_navigation_text_and_labels_example_0_document_0_phone.png b/backstop_data/bitmaps_reference/backstop_default_header_with_custom_navigation_text_and_labels_example_0_document_0_phone.png new file mode 100644 index 00000000..1bc3a13b Binary files /dev/null and b/backstop_data/bitmaps_reference/backstop_default_header_with_custom_navigation_text_and_labels_example_0_document_0_phone.png differ diff --git a/backstop_data/bitmaps_reference/backstop_default_header_with_custom_navigation_text_and_labels_example_0_document_1_tablet.png b/backstop_data/bitmaps_reference/backstop_default_header_with_custom_navigation_text_and_labels_example_0_document_1_tablet.png new file mode 100644 index 00000000..b113a914 Binary files /dev/null and b/backstop_data/bitmaps_reference/backstop_default_header_with_custom_navigation_text_and_labels_example_0_document_1_tablet.png differ diff --git a/package-lock.json b/package-lock.json index fd074b51..85f41838 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "hmrc-frontend", - "version": "6.10.0", + "version": "6.11.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 68e391e6..069e6b9e 100644 --- a/package.json +++ b/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", diff --git a/src/components/header/header.yaml b/src/components/header/header.yaml index 29d2686c..c0cc0dca 100644 --- a/src/components/header/header.yaml +++ b/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' diff --git a/src/components/header/template.test.js b/src/components/header/template.test.js index 7baf1153..371de365 100644 --- a/src/components/header/template.test.js +++ b/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'); }); }); });