From 232d4d0e026ac0de7ccecf9a44fa15d845ed4d6a Mon Sep 17 00:00:00 2001
From: beeps <hi+github@berly.kim>
Date: Mon, 20 May 2024 13:26:03 +0100
Subject: [PATCH 1/2] Change breadcrumb component to use nav element

---
 .../components/breadcrumbs/breadcrumbs.yaml     | 16 +++++++++++++++-
 .../breadcrumbs/template.jsdom.test.js          | 17 ++++++++++++++++-
 .../govuk/components/breadcrumbs/template.njk   |  4 ++--
 3 files changed, 33 insertions(+), 4 deletions(-)

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: <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
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 -%}
 
-<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>

From ca7f22d52cef0be8b59ac00bfa0757476b0c031f Mon Sep 17 00:00:00 2001
From: beeps <hi+github@berly.kim>
Date: Mon, 20 May 2024 16:45:32 +0100
Subject: [PATCH 2/2] Update CHANGELOG

---
 CHANGELOG.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

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: