Change breadcrumb component to use nav element

alphagov · Jun 17, 2024 · dc1e558 · dc1e558
1 parent 56094f0
commit dc1e558
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git 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: <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'
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
@@ -18,6 +18,14 @@ describe('Breadcrumbs', () => {
       $listItems = document.querySelectorAll('li.govuk-breadcrumbs__list-item')
     })
 
+    it('renders as a nav element', () => {
+      expect($component.tagName).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
@@ -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>