From 2e979748c32be44abf7331a0fda737c4d8a81c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sun, 7 May 2023 10:01:10 +0200
Subject: [PATCH] templates: add progressbar role to form steps (#40921)

---
 templates/wcs/front/formdata_steps.html | 67 ++++++++++++++-----------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/templates/wcs/front/formdata_steps.html b/templates/wcs/front/formdata_steps.html
index ea4e41bf..3711ce5a 100644
--- a/templates/wcs/front/formdata_steps.html
+++ b/templates/wcs/front/formdata_steps.html
@@ -1,34 +1,41 @@
 {% load i18n %}
 <header id="steps" class="wcs-steps steps-{{page_labels|length}}">
-  <h2>{% trans "Steps" %}</h2>
-  {% block steps-list %}
-    <ol class="wcs-steps--list">
-      {% for page_label in page_labels %}
-        {% spaceless %}
-          <li
-            class="wcs-step
-              {% if forloop.first %}first{% endif %}
-              {% if forloop.last %}last{% endif %}
-              {% if forloop.counter == current_page_no %}current{% endif %}
-              {% if forloop.counter < current_page_no %}step-before{% endif %}
-              {% if forloop.counter > current_page_no %}step-after{% endif %}" >
-            <abbr
-              aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:"
-              title="Étape {{ forloop.counter }} sur {{ page_labels|length }}"
-              class="marker wcs-step--marker">
-              <span class="wcs-step--marker-nb">
-                {{ forloop.counter }}
+  <h2 id="steps--title">{% trans "Steps" %}</h2>
+  <div role="progressbar"
+    aria-labelledby="steps--title"
+    aria-valuemin="1"
+    aria-valuenow="{{ current_page_no }}"
+    aria-valuemax="{{ page_labels|length }}"
+    aria-valuetext="Étape {{ current_page_no }} : {{ page_labels|get:current_page_index }}">
+    {% block steps-list %}
+      <ol class="wcs-steps--list">
+        {% for page_label in page_labels %}
+          {% spaceless %}
+            <li
+              class="wcs-step
+                {% if forloop.first %}first{% endif %}
+                {% if forloop.last %}last{% endif %}
+                {% if forloop.counter == current_page_no %}current{% endif %}
+                {% if forloop.counter < current_page_no %}step-before{% endif %}
+                {% if forloop.counter > current_page_no %}step-after{% endif %}" >
+              <abbr
+                aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:"
+                title="Étape {{ forloop.counter }} sur {{ page_labels|length }}"
+                class="marker wcs-step--marker">
+                <span class="wcs-step--marker-nb">
+                  {{ forloop.counter }}
+                </span>
+                <span class="wcs-step--marker-total">
+                  {{ page_labels|length }}
+                </span>
+              </abbr>
+              <span class="label wcs-step--label">{{ page_label }}
+                {% if forloop.counter == current_page_no %}<span class="sr-only">(étape courante)</span>{% endif %}
               </span>
-              <span class="wcs-step--marker-total">
-                {{ page_labels|length }}
-              </span>
-            </abbr>
-            <span class="label wcs-step--label">{{ page_label }}
-              {% if forloop.counter == current_page_no %}<span class="sr-only">(étape courante)</span>{% endif %}
-            </span>
-          </li>
-        {% endspaceless %}
-      {% endfor %}
-    </ol>
-  {% endblock %}
+            </li>
+          {% endspaceless %}
+        {% endfor %}
+      </ol>
+    {% endblock %}
+  </div>
 </header>