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>