From 3c0249a455adfe427626983883d09fbe809d4fd8 Mon Sep 17 00:00:00 2001
From: Alec Hamilton <alec.hamilton@ext.ons.gov.uk>
Date: Fri, 21 Jul 2023 10:47:25 +0100
Subject: [PATCH 1/4] feat: added h2 and aria-labelledby

---
 .../section-navigation/_macro-options.md      | 21 ++++++++++---------
 src/components/section-navigation/_macro.njk  |  3 ++-
 .../section-navigation/_macro.spec.js         | 17 ++++++---------
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/section-navigation/_macro-options.md b/src/components/section-navigation/_macro-options.md
index c21a6b2015..28f3eed1d4 100644
--- a/src/components/section-navigation/_macro-options.md
+++ b/src/components/section-navigation/_macro-options.md
@@ -1,13 +1,14 @@
-| Name        | Type          | Required                        | Description                                                                                             |
-| ----------- | ------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| id          | string        | false                           | The HTML `id` of the `<nav>` element of the component                                                   |
-| classes     | string        | false                           | Additional classes for the `<nav>` element                                                              |
-| ariaLabel   | string        | false                           | The `aria-label` attribute for the `<nav>` element to describe its purpose. Defaults to ”Section menu”. |
-| variants    | string        | false                           | To adjust the orientation of the component using available variant “vertical”                           |
-| currentPath | string        | true (unless `tabQuery` set)    | Path to the current active page                                                                         |
-| tabQuery    | string        | true (unless `currentPath` set) | Query parameter in the URL for the current active page                                                  |
-| title       | string        | false                           | The title/header to display in the section navigation element (only for entries without sections)       |
-| sections    | `Array<Item>` | false                           | An array of [sections](#sections) for the component                                                     |
+| Name          | Type          | Required                        | Description                                                                                                                   |
+| ------------- | ------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| id            | string        | false                           | The HTML `id` of the `<nav>` element of the component                                                                         |
+| classes       | string        | false                           | Additional classes for the `<nav>` element                                                                                    |
+| hiddenTitle   | string        | false                           | The value of the visually hidden `<h2>` element for screen readers. Defaults to "Pages in this section".                      |
+| hiddenTitleId | string        | false                           | The value of the visually hidden title ID. Necessary if you have multiple section navs. Defaults to "section-menu-nav-title". |
+| variants      | string        | false                           | To adjust the orientation of the component using available variant “vertical”                                                 |
+| currentPath   | string        | true (unless `tabQuery` set)    | Path to the current active page                                                                                               |
+| tabQuery      | string        | true (unless `currentPath` set) | Query parameter in the URL for the current active page                                                                        |
+| title         | string        | false                           | The title/header to display in the section navigation element (only for entries without sections)                             |
+| sections      | `Array<Item>` | false                           | An array of [sections](#sections) for the component                                                                           |
 
 ## Sections
 
diff --git a/src/components/section-navigation/_macro.njk b/src/components/section-navigation/_macro.njk
index 1e629c1413..65f2e040a3 100644
--- a/src/components/section-navigation/_macro.njk
+++ b/src/components/section-navigation/_macro.njk
@@ -1,5 +1,6 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-label="{{ params.ariaLabel | default("Section menu") }}">
+  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
+  <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
     {% if params.sections %}
       {% for section in params.sections %}
         <div class="ons-section-nav__sub">
diff --git a/src/components/section-navigation/_macro.spec.js b/src/components/section-navigation/_macro.spec.js
index ae6794145a..9e2fb1f021 100644
--- a/src/components/section-navigation/_macro.spec.js
+++ b/src/components/section-navigation/_macro.spec.js
@@ -135,21 +135,16 @@ describe('macro: section-navigation', () => {
     expect($('.ons-section-nav').hasClass('custom-class')).toBe(true);
   });
 
-  it('has the provided `ariaLabel` parameter', () => {
-    const $ = cheerio.load(
-      renderComponent('section-navigation', {
-        ...EXAMPLE_SECTION_NAVIGATION,
-        ariaLabel: 'Section navigation menu',
-      }),
-    );
-
-    expect($('.ons-section-nav').attr('aria-label')).toBe('Section navigation menu');
+  it('assumes a default `hiddenTitleId` of "Section menu"', () => {
+    const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+    expect($('.ons-section-nav').attr('aria-labelledby')).toBe('navigation-menu');
   });
 
-  it('assumes a default `ariaLabel` of "Section menu"', () => {
+  it('assumes a default `hiddenTitle` of "Pages in this section"', () => {
     const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-    expect($('.ons-section-nav').attr('aria-label')).toBe('Section menu');
+    expect($('h2').toBe('Pages in this section'));
   });
 
   describe('navigation items', () => {

From 4c23c4b2911fd540a205c9516de7c58b091daf53 Mon Sep 17 00:00:00 2001
From: Alec Hamilton <alec.hamilton@ext.ons.gov.uk>
Date: Fri, 21 Jul 2023 10:48:48 +0100
Subject: [PATCH 2/4] test: refactored tests

---
 src/components/section-navigation/_macro.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/section-navigation/_macro.spec.js b/src/components/section-navigation/_macro.spec.js
index 9e2fb1f021..28f0124f53 100644
--- a/src/components/section-navigation/_macro.spec.js
+++ b/src/components/section-navigation/_macro.spec.js
@@ -138,7 +138,7 @@ describe('macro: section-navigation', () => {
   it('assumes a default `hiddenTitleId` of "Section menu"', () => {
     const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-    expect($('.ons-section-nav').attr('aria-labelledby')).toBe('navigation-menu');
+    expect($('.ons-section-nav').attr('aria-labelledby')).toBe('section-menu-nav-title');
   });
 
   it('assumes a default `hiddenTitle` of "Pages in this section"', () => {

From 5da24bd33758d05dae343965a2a9802ea826525b Mon Sep 17 00:00:00 2001
From: Alec Hamilton <alec.hamilton@ext.ons.gov.uk>
Date: Fri, 21 Jul 2023 10:51:13 +0100
Subject: [PATCH 3/4] test: added additional tests

---
 src/components/section-navigation/_macro.spec.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/section-navigation/_macro.spec.js b/src/components/section-navigation/_macro.spec.js
index 28f0124f53..625f3561aa 100644
--- a/src/components/section-navigation/_macro.spec.js
+++ b/src/components/section-navigation/_macro.spec.js
@@ -141,6 +141,12 @@ describe('macro: section-navigation', () => {
     expect($('.ons-section-nav').attr('aria-labelledby')).toBe('section-menu-nav-title');
   });
 
+  it('has the visually hidden class', () => {
+    const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
+
+    expect($('h2').hasClass('.ons-u-vh')).toBe(true);
+  });
+
   it('assumes a default `hiddenTitle` of "Pages in this section"', () => {
     const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 

From cab66175ff52710fe9969e704dd10f79a8c3e5c6 Mon Sep 17 00:00:00 2001
From: Alec Hamilton <alec.hamilton@ext.ons.gov.uk>
Date: Fri, 21 Jul 2023 11:18:24 +0100
Subject: [PATCH 4/4] test: fixed tests

---
 src/components/section-navigation/_macro.spec.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/section-navigation/_macro.spec.js b/src/components/section-navigation/_macro.spec.js
index 625f3561aa..3d0555cea1 100644
--- a/src/components/section-navigation/_macro.spec.js
+++ b/src/components/section-navigation/_macro.spec.js
@@ -141,18 +141,6 @@ describe('macro: section-navigation', () => {
     expect($('.ons-section-nav').attr('aria-labelledby')).toBe('section-menu-nav-title');
   });
 
-  it('has the visually hidden class', () => {
-    const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
-
-    expect($('h2').hasClass('.ons-u-vh')).toBe(true);
-  });
-
-  it('assumes a default `hiddenTitle` of "Pages in this section"', () => {
-    const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
-
-    expect($('h2').toBe('Pages in this section'));
-  });
-
   describe('navigation items', () => {
     it('renders top level navigation items', () => {
       const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));