Change breadcrumb component to use nav element

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
@@ -131,3 +135,12 @@ examples:
         - html: <em>Section 1</em>
         - 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.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>

packages/govuk-frontend/src/govuk/components/breadcrumbs/template.test.js

@@ -9,22 +9,33 @@ describe('Breadcrumbs', () => {
   })
 
   describe('default example', () => {
-    it('renders with items', () => {
-      const $ = render('breadcrumbs', examples.default)
+    let $
+
+    beforeEach(async () => {
+      $ = render('breadcrumbs', examples.default)
+    })
+
+    it('renders as a nav element', () => {
+      const $component = $('.govuk-breadcrumbs')
+      expect($component.get(0).tagName).toBe('nav')
+    })
 
+    it('renders with default aria-label', () => {
+      const $component = $('.govuk-breadcrumbs')
+      expect($component.attr('aria-label')).toBe('Breadcrumbs')
+    })
+
+    it('renders with items', () => {
       const $items = $('.govuk-breadcrumbs__list-item')
       expect($items).toHaveLength(2)
     })
 
     it('renders 2 items', () => {
-      const $ = render('breadcrumbs', examples.default)
       const $items = $('.govuk-breadcrumbs__list-item')
       expect($items).toHaveLength(2)
     })
 
     it('renders item with anchor', () => {
-      const $ = render('breadcrumbs', examples.default)
-
       const $anchor = $('.govuk-breadcrumbs__list-item a').first()
       expect($anchor.get(0).tagName).toBe('a')
       expect($anchor.attr('class')).toBe('govuk-breadcrumbs__link')
@@ -90,6 +101,13 @@ describe('Breadcrumbs', () => {
       expect($component.attr('role')).toBe('navigation')
     })
 
+    it('renders with a custom aria-label', () => {
+      const $ = render('breadcrumbs', examples['custom label'])
+
+      const $component = $('.govuk-breadcrumbs')
+      expect($component.attr('aria-label')).toBe('Briwsion bara')
+    })
+
     it('renders item as collapse on mobile if specified', () => {
       const $ = render('breadcrumbs', examples['with collapse on mobile'])