Add aria-label to correct/incorrect icons (#80)

[CORE-416]
openstax · Dec 10, 2024 · f332eea · f332eea
1 parent 96854c2
commit f332eea
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git 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
@@ -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"