Update Breadcrumb component to improve screen reader accessibility

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:

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: <em>Section 1</em>
  href: /section-1
  - html: <em>Section 2</em>
+ href: /section-2
+ - name: custom label
+ hidden: true
+ options:
+ labelText: Briwsion bara
+ items:
+ - text: Hafan
+ href: '/'
+ - text: Sefydliadau
+ href: '/organisations'

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')
  })
  })
 })

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

@@ -11,7 +11,7 @@
  {% set classNames = classNames + " govuk-breadcrumbs--collapse-on-mobile" %}
 {% endif -%}
 
-<div class="{{ classNames }}" {{- govukAttributes(params.attributes) }}>
+<nav class="{{ classNames }}" {{- govukAttributes(params.attributes) }} aria-label="{{ params.labelText | default("Breadcrumb") }}">
  <ol class="govuk-breadcrumbs__list">
 {% for item in params.items %}
  {% if item.href %}
@@ -27,4 +27,4 @@
  {% endif %}
 {% endfor %}
  </ol>
-</div>
+</nav>