From fd6a3a8cfdf14b04453b89ada29394bd409eefb9 Mon Sep 17 00:00:00 2001
From: Mike Taylor <miketaylr@gmail.com>
Date: Sun, 17 Jan 2021 14:53:26 -0600
Subject: [PATCH 1/2] Issue #3456 - Add aria-labelled-by attributes to wizard
 step icons

---
 webcompat/templates/nav/issue-wizard-stepper.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/webcompat/templates/nav/issue-wizard-stepper.html b/webcompat/templates/nav/issue-wizard-stepper.html
index 4d20698c6..ecd430085 100644
--- 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-labelled-by="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>
+</div>
\ No newline at end of file

From 3a26bdde81fe64e33923f7570b8e380bfb7290cf Mon Sep 17 00:00:00 2001
From: Mike Taylor <miketaylr@gmail.com>
Date: Tue, 19 Jan 2021 08:43:50 -0600
Subject: [PATCH 2/2] Issue #3516 - Fix typo in aria attribute (thanks @ksy36)

Co-authored-by: Ksenia <kberezina@mozilla.com>
---
 webcompat/templates/nav/issue-wizard-stepper.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webcompat/templates/nav/issue-wizard-stepper.html b/webcompat/templates/nav/issue-wizard-stepper.html
index ecd430085..d77768da7 100644
--- a/webcompat/templates/nav/issue-wizard-stepper.html
+++ b/webcompat/templates/nav/issue-wizard-stepper.html
@@ -4,11 +4,11 @@
         <div id="pr-{{ step.id }}" class="step {{ step.className }}">
             <div class="circle">
                 <div class="number">{{ step.number }}</div>
-                <div aria-labelled-by="step-label-{{ step.id }}" role="img" class="icon"></div>
+                <div aria-labelledby="step-label-{{ step.id }}" role="img" class="icon"></div>
             </div>
             <div id="step-label-{{ step.id }}" class="description">{{ step.label }}</div>
         </div>
         <div class="description">{{ step.label }}</div>
         {% endfor %}
     </div>
-</div>
\ No newline at end of file
+</div>