diff --git a/CHANGELOG.md b/CHANGELOG.md index 2749b6128d..91dccf748f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,16 @@ For advice on how to use these release notes see [our guidance on staying up to ## Unreleased +### Recommended changes + +#### Update Breadcrumbs to use `nav` and `aria-label` + +We've made changes to the Breadcrumbs component to improve how it appears to screen readers. + +We've changed the wrapping element to use the `nav` tag to expose it as a navigational landmark, and added an `aria-label` attribute to differentiate it as breadcrumb navigation. + +This change was introduced in [pull request #4995: Update Breadcrumb component to improve screen reader accessibility](https://github.com/alphagov/govuk-frontend/pull/4995). + ### Fixes We've made fixes to GOV.UK Frontend in the following pull requests: diff --git a/packages/govuk-frontend/src/govuk/components/breadcrumbs/breadcrumbs.yaml b/packages/govuk-frontend/src/govuk/components/breadcrumbs/breadcrumbs.yaml index 9572b1e4c4..3caa13207f 100644 --- a/packages/govuk-frontend/src/govuk/components/breadcrumbs/breadcrumbs.yaml +++ b/packages/govuk-frontend/src/govuk/components/breadcrumbs/breadcrumbs.yaml @@ -32,6 +32,10 @@ params: type: object required: false description: HTML attributes (for example data attributes) to add to the breadcrumbs container. + - name: labelText + type: string + required: false + description: Plain text label identifying the landmark to screen readers. Defaults to "Breadcrumb". examples: - name: default @@ -108,7 +112,7 @@ examples: options: attributes: id: my-navigation - role: navigation + 'data-foo': 'bar' items: - text: Home - name: item attributes @@ -134,3 +138,13 @@ examples: - html: Section 1 href: /section-1 - html: Section 2 + href: /section-2 + - name: custom label + hidden: true + options: + labelText: Briwsion bara + items: + - text: Hafan + href: '/' + - text: Sefydliadau + href: '/organisations' diff --git a/packages/govuk-frontend/src/govuk/components/breadcrumbs/template.jsdom.test.js b/packages/govuk-frontend/src/govuk/components/breadcrumbs/template.jsdom.test.js index 12e9a02f04..ecd5ffd7d4 100644 --- a/packages/govuk-frontend/src/govuk/components/breadcrumbs/template.jsdom.test.js +++ b/packages/govuk-frontend/src/govuk/components/breadcrumbs/template.jsdom.test.js @@ -18,6 +18,14 @@ describe('Breadcrumbs', () => { $listItems = document.querySelectorAll('li.govuk-breadcrumbs__list-item') }) + it('renders as a nav element', () => { + expect($component.tagName.toLowerCase()).toBe('nav') + }) + + it('renders with default aria-label', () => { + expect($component).toHaveAttribute('aria-label', 'Breadcrumb') + }) + it('includes an ordered list', () => { expect($component).toContainElement($list) }) @@ -152,7 +160,14 @@ describe('Breadcrumbs', () => { const $component = document.querySelector('.govuk-breadcrumbs') expect($component).toHaveAttribute('id', 'my-navigation') - expect($component).toHaveAttribute('role', 'navigation') + expect($component).toHaveAttribute('data-foo', 'bar') + }) + + it('renders with a custom aria-label', () => { + document.body.innerHTML = render('breadcrumbs', examples['custom label']) + + const $component = document.querySelector('.govuk-breadcrumbs') + expect($component).toHaveAttribute('aria-label', 'Briwsion bara') }) }) }) diff --git a/packages/govuk-frontend/src/govuk/components/breadcrumbs/template.njk b/packages/govuk-frontend/src/govuk/components/breadcrumbs/template.njk index 1fad1b7431..b6d0942863 100644 --- a/packages/govuk-frontend/src/govuk/components/breadcrumbs/template.njk +++ b/packages/govuk-frontend/src/govuk/components/breadcrumbs/template.njk @@ -11,7 +11,7 @@ {% set classNames = classNames + " govuk-breadcrumbs--collapse-on-mobile" %} {% endif -%} -
+
+