Merge pull request #3516 from /issues/3456/2

Fixes #3456 - Add aria-labelled-by attributes to wizard step icons
webcompat · Jan 20, 2021 · 379c56d · 379c56d
2 parents 3dd62ff + 3a26bdd
commit 379c56d
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/webcompat/templates/nav/issue-wizard-stepper.html b/webcompat/templates/nav/issue-wizard-stepper.html
@@ -1,14 +1,14 @@
 <div id="wizard-container">
     <div class="grid row">
         {% for step in form.steps %}
-            <div id="pr-{{ step.id }}" class="step {{ step.className }}">
-                <div class="circle">
+        <div id="pr-{{ step.id }}" class="step {{ step.className }}">
+            <div class="circle">
                 <div class="number">{{ step.number }}</div>
-                <div class="icon"></div>
-                </div>
-                <div class="description">{{ step.label }}</div>
+                <div aria-labelledby="step-label-{{ step.id }}" role="img" class="icon"></div>
             </div>
-            <div class="description">{{ step.label }}</div>
+            <div id="step-label-{{ step.id }}" class="description">{{ step.label }}</div>
+        </div>
+        <div class="description">{{ step.label }}</div>
         {% endfor %}
     </div>
 </div>