From f332eeadd0de484760a17f69efdbc684bc400bc7 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Tue, 10 Dec 2024 10:53:53 -0600
Subject: [PATCH] Add aria-label to correct/incorrect icons (#80)

[CORE-416]
---
 src/components/ProgressBar.tsx                 |  4 ++++
 .../__snapshots__/ProgressBar.spec.tsx.snap    | 18 +++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
index d3e0bca..6412cc7 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.tsx
@@ -100,10 +100,12 @@ const ItemIcon = ({ variant }: { variant: ProgressBarItemVariant }) => {
     isCorrect: {
       icon: faCheck,
       color: colors.answer.correct,
+      label: 'Correct',
     },
     isIncorrect: {
       icon: faXmark,
       color: colors.answer.incorrect,
+      label: 'Incorrect',
     },
   }[variant];
 
@@ -112,6 +114,8 @@ const ItemIcon = ({ variant }: { variant: ProgressBarItemVariant }) => {
     color={variantData.color}
     height='16px'
     width='16px'
+    aria-label={variantData.label}
+    aria-hidden={undefined}
   />;
 }
 
diff --git a/src/components/__snapshots__/ProgressBar.spec.tsx.snap b/src/components/__snapshots__/ProgressBar.spec.tsx.snap
index 4333ca5..7d6f3cd 100644
--- a/src/components/__snapshots__/ProgressBar.spec.tsx.snap
+++ b/src/components/__snapshots__/ProgressBar.spec.tsx.snap
@@ -17,7 +17,7 @@ exports[`ProgressBar matches snapshot 1`] = `
       1
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Incorrect"
       className="svg-inline--fa fa-xmark sc-hKMtZM jnosjc"
       color="#C22032"
       data-icon="xmark"
@@ -49,7 +49,7 @@ exports[`ProgressBar matches snapshot 1`] = `
       2
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Correct"
       className="svg-inline--fa fa-check sc-hKMtZM cCtdaL"
       color="#0D7741"
       data-icon="check"
@@ -81,7 +81,7 @@ exports[`ProgressBar matches snapshot 1`] = `
       3
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Incorrect"
       className="svg-inline--fa fa-xmark sc-hKMtZM jnosjc"
       color="#C22032"
       data-icon="xmark"
@@ -180,7 +180,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
       1
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Incorrect"
       className="svg-inline--fa fa-xmark sc-hKMtZM jnosjc"
       color="#C22032"
       data-icon="xmark"
@@ -212,7 +212,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
       2
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Correct"
       className="svg-inline--fa fa-check sc-hKMtZM cCtdaL"
       color="#0D7741"
       data-icon="check"
@@ -244,7 +244,7 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
       3
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Incorrect"
       className="svg-inline--fa fa-xmark sc-hKMtZM jnosjc"
       color="#C22032"
       data-icon="xmark"
@@ -343,7 +343,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
       1
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Incorrect"
       className="svg-inline--fa fa-xmark sc-hKMtZM jnosjc"
       color="#C22032"
       data-icon="xmark"
@@ -375,7 +375,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
       2
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Correct"
       className="svg-inline--fa fa-check sc-hKMtZM cCtdaL"
       color="#0D7741"
       data-icon="check"
@@ -407,7 +407,7 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
       3
     </button>
     <svg
-      aria-hidden="true"
+      aria-label="Incorrect"
       className="svg-inline--fa fa-xmark sc-hKMtZM jnosjc"
       color="#C22032"
       data-icon="xmark"