From 4872e6dba0b8a12a2a3083481c7b4ee49e0e646a Mon Sep 17 00:00:00 2001
From: Alexis Gaillard <a@bypopcorn.com>
Date: Mon, 13 Jun 2022 17:52:41 +0200
Subject: [PATCH 1/3] fix(inpage-navigation): Improve accessibility -
 FRONT-3660

---
 .../twig/components/inpage-navigation/README.md          | 1 +
 .../__snapshots__/inpage-navigation.test.js.snap         | 9 ++++++---
 .../inpage-navigation/inpage-navigation.html.twig        | 9 +++++----
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/implementations/twig/components/inpage-navigation/README.md b/src/implementations/twig/components/inpage-navigation/README.md
index 5f30ece9073..b1b63034a46 100644
--- a/src/implementations/twig/components/inpage-navigation/README.md
+++ b/src/implementations/twig/components/inpage-navigation/README.md
@@ -10,6 +10,7 @@ npm install --save @ecl/twig-component-inpage-navigation
 
 Parameters:
 
+- **"id"** (string) (default: 'ecl-inpage-navigation-default')
 - **"title"** (string) (default: '')
 - **"links"** (associative array) (default: predefined structure):
   - href: (string) (default: '')
diff --git a/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap b/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
index 4ad751590fa..47c5363d8ca 100644
--- a/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
+++ b/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
@@ -3,12 +3,14 @@
 exports[`Inpage navigation renders correctly 1`] = `
 <jest>
   <nav
+    aria-labelledby="ecl-inpage-navigation-default"
     class="ecl-inpage-navigation"
     data-ecl-auto-init="InpageNavigation"
     data-ecl-inpage-navigation="true"
   >
     <div
       class="ecl-inpage-navigation__title"
+      id="ecl-inpage-navigation-default"
     >
       Page contents
     </div>
@@ -38,7 +40,6 @@ exports[`Inpage navigation renders correctly 1`] = `
         </svg>
       </button>
       <ul
-        aria-labelledby="ecl-inpage-navigation-trigger"
         class="ecl-inpage-navigation__list"
         data-ecl-inpage-navigation-list="true"
         id="ecl-inpage-navigation-list"
@@ -96,6 +97,7 @@ exports[`Inpage navigation renders correctly 1`] = `
 exports[`Inpage navigation renders correctly with extra attributes 1`] = `
 <jest>
   <nav
+    aria-labelledby="ecl-inpage-navigation-default"
     class="ecl-inpage-navigation"
     data-ecl-auto-init="InpageNavigation"
     data-ecl-inpage-navigation="true"
@@ -104,6 +106,7 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
   >
     <div
       class="ecl-inpage-navigation__title"
+      id="ecl-inpage-navigation-default"
     >
       Page contents
     </div>
@@ -133,7 +136,6 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
         </svg>
       </button>
       <ul
-        aria-labelledby="ecl-inpage-navigation-trigger"
         class="ecl-inpage-navigation__list"
         data-ecl-inpage-navigation-list="true"
         id="ecl-inpage-navigation-list"
@@ -191,12 +193,14 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
 exports[`Inpage navigation renders correctly with extra class names 1`] = `
 <jest>
   <nav
+    aria-labelledby="ecl-inpage-navigation-default"
     class="ecl-inpage-navigation custom-class custom-class--test"
     data-ecl-auto-init="InpageNavigation"
     data-ecl-inpage-navigation="true"
   >
     <div
       class="ecl-inpage-navigation__title"
+      id="ecl-inpage-navigation-default"
     >
       Page contents
     </div>
@@ -226,7 +230,6 @@ exports[`Inpage navigation renders correctly with extra class names 1`] = `
         </svg>
       </button>
       <ul
-        aria-labelledby="ecl-inpage-navigation-trigger"
         class="ecl-inpage-navigation__list"
         data-ecl-inpage-navigation-list="true"
         id="ecl-inpage-navigation-list"
diff --git a/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig b/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
index cfb902f6c74..2708aaca615 100644
--- a/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
+++ b/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
@@ -2,6 +2,7 @@
 
 {#
   Parameters:
+   - "id" (string) (default: 'ecl-inpage-navigation-default')
    - "title" (string) (default: '')
    - "links" (array) (default: predefined structure): format: [
       {
@@ -22,6 +23,7 @@
 
 {# Internal properties #}
 
+{% set _id = id|default('ecl-inpage-navigation-default') %}
 {% set _css_class = 'ecl-inpage-navigation' %}
 {% set _icon_path = icon_path|default('') %}
 {% set _extra_attributes = 'data-ecl-auto-init="InpageNavigation"' %}
@@ -44,8 +46,8 @@
 
 {# Print the result #}
 
-<nav class="{{ _css_class }}"{{ _extra_attributes|raw }} data-ecl-inpage-navigation="true">
-  <div class="ecl-inpage-navigation__title">{{ title }}</div>
+<nav class="{{ _css_class }}"{{ _extra_attributes|raw }} data-ecl-inpage-navigation="true" aria-labelledby="{{ _id }}">
+  <div class="ecl-inpage-navigation__title" id="{{ _id }}">{{ title }}</div>
   <div class="ecl-inpage-navigation__body">
     <button type="button" class="ecl-inpage-navigation__trigger"
             id="ecl-inpage-navigation-trigger" data-ecl-inpage-navigation-trigger="true"
@@ -61,8 +63,7 @@
         extra_classes: 'ecl-icon--rotate-180 ecl-inpage-navigation__trigger-icon',
       } only %}
     </button>
-    <ul class="ecl-inpage-navigation__list" aria-labelledby="ecl-inpage-navigation-trigger"
-        data-ecl-inpage-navigation-list="true" id="ecl-inpage-navigation-list">
+    <ul class="ecl-inpage-navigation__list" data-ecl-inpage-navigation-list="true" id="ecl-inpage-navigation-list">
       {% for link in links %}
         <li class="ecl-inpage-navigation__item">
           {% include '@ecl/link/link.html.twig' with {

From 89e74499d9905dc528848c08e85e81318737927b Mon Sep 17 00:00:00 2001
From: Alexis Gaillard <a@bypopcorn.com>
Date: Thu, 16 Jun 2022 14:03:46 +0200
Subject: [PATCH 2/3] Use same id param

---
 .../__snapshots__/inpage-navigation.test.js.snap            | 6 +++---
 .../inpage-navigation/inpage-navigation.html.twig           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap b/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
index 47c5363d8ca..d9b4557acd7 100644
--- a/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
+++ b/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
@@ -42,7 +42,7 @@ exports[`Inpage navigation renders correctly 1`] = `
       <ul
         class="ecl-inpage-navigation__list"
         data-ecl-inpage-navigation-list="true"
-        id="ecl-inpage-navigation-list"
+        id="ecl-inpage-navigation-default-list"
       >
         <li
           class="ecl-inpage-navigation__item"
@@ -138,7 +138,7 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
       <ul
         class="ecl-inpage-navigation__list"
         data-ecl-inpage-navigation-list="true"
-        id="ecl-inpage-navigation-list"
+        id="ecl-inpage-navigation-default-list"
       >
         <li
           class="ecl-inpage-navigation__item"
@@ -232,7 +232,7 @@ exports[`Inpage navigation renders correctly with extra class names 1`] = `
       <ul
         class="ecl-inpage-navigation__list"
         data-ecl-inpage-navigation-list="true"
-        id="ecl-inpage-navigation-list"
+        id="ecl-inpage-navigation-default-list"
       >
         <li
           class="ecl-inpage-navigation__item"
diff --git a/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig b/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
index 2708aaca615..3e9ee3b7c38 100644
--- a/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
+++ b/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
@@ -63,7 +63,7 @@
         extra_classes: 'ecl-icon--rotate-180 ecl-inpage-navigation__trigger-icon',
       } only %}
     </button>
-    <ul class="ecl-inpage-navigation__list" data-ecl-inpage-navigation-list="true" id="ecl-inpage-navigation-list">
+    <ul class="ecl-inpage-navigation__list" data-ecl-inpage-navigation-list="true" id="{{ _id }}-list">
       {% for link in links %}
         <li class="ecl-inpage-navigation__item">
           {% include '@ecl/link/link.html.twig' with {

From 3e9b389ed1a730c16a9bf354bce71d7eb3c4e1d5 Mon Sep 17 00:00:00 2001
From: Alexis Gaillard <a@bypopcorn.com>
Date: Mon, 20 Jun 2022 12:32:35 +0200
Subject: [PATCH 3/3] use param id for the trigger button

---
 .../__snapshots__/inpage-navigation.test.js.snap            | 6 +++---
 .../inpage-navigation/inpage-navigation.html.twig           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap b/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
index d9b4557acd7..12c3d31402a 100644
--- a/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
+++ b/src/implementations/twig/components/inpage-navigation/__snapshots__/inpage-navigation.test.js.snap
@@ -22,7 +22,7 @@ exports[`Inpage navigation renders correctly 1`] = `
         aria-expanded="false"
         class="ecl-inpage-navigation__trigger"
         data-ecl-inpage-navigation-trigger="true"
-        id="ecl-inpage-navigation-trigger"
+        id="ecl-inpage-navigation-default-trigger"
         type="button"
       >
         <span
@@ -118,7 +118,7 @@ exports[`Inpage navigation renders correctly with extra attributes 1`] = `
         aria-expanded="false"
         class="ecl-inpage-navigation__trigger"
         data-ecl-inpage-navigation-trigger="true"
-        id="ecl-inpage-navigation-trigger"
+        id="ecl-inpage-navigation-default-trigger"
         type="button"
       >
         <span
@@ -212,7 +212,7 @@ exports[`Inpage navigation renders correctly with extra class names 1`] = `
         aria-expanded="false"
         class="ecl-inpage-navigation__trigger"
         data-ecl-inpage-navigation-trigger="true"
-        id="ecl-inpage-navigation-trigger"
+        id="ecl-inpage-navigation-default-trigger"
         type="button"
       >
         <span
diff --git a/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig b/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
index 3e9ee3b7c38..b143782c0ad 100644
--- a/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
+++ b/src/implementations/twig/components/inpage-navigation/inpage-navigation.html.twig
@@ -50,7 +50,7 @@
   <div class="ecl-inpage-navigation__title" id="{{ _id }}">{{ title }}</div>
   <div class="ecl-inpage-navigation__body">
     <button type="button" class="ecl-inpage-navigation__trigger"
-            id="ecl-inpage-navigation-trigger" data-ecl-inpage-navigation-trigger="true"
+            id="{{ _id }}-trigger" data-ecl-inpage-navigation-trigger="true"
             aria-controls="ecl-inpage-navigation-list" aria-expanded="false"><span
             class="ecl-inpage-navigation__trigger-current"
             data-ecl-inpage-navigation-trigger-current="true"> </span>