make the progress bar accessible as breadcrumbs (#67)

* make the progress bar accessible as breadcrumbs * update snapshots
openstax · Apr 25, 2024 · c1a6f5e · c1a6f5e
1 parent e2a52e2
commit c1a6f5e
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 17 deletions.
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 
-const ProgressBarWrapper = styled.div`
+const ProgressBarWrapper = styled.nav`
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
@@ -131,18 +131,25 @@ export type ProgressBarItemVariant = 'isCorrect' | 'isIncorrect' | 'isStatus' |
 
 export const ProgressBarItem = <S extends {variant: ProgressBarItemVariant}>({index, isActive, step, goToStep}: ProgressBarItemProps<S>) =>
   <StyledItemWrapper>
-    <StyledItem variant={step.variant} isActive={isActive} onClick={() => goToStep(index, step)}>
+    <StyledItem
+      variant={step.variant}
+      isActive={isActive}
+      onClick={() => goToStep(index, step)}
+      aria-current={isActive ? 'location' : 'false'}
+      aria-label={step.variant === 'isStatus' ? 'Assignment status' : `Step ${index + 1}` }
+    >
       {step.variant === 'isStatus' ? <FlagIcon /> : index + 1}
     </StyledItem>
     <ItemIcon variant={step.variant} />
   </StyledItemWrapper>;
 
-export const ProgressBar = <S extends {variant: ProgressBarItemVariant}>({ steps, activeIndex, goToStep }: ProgressBarProps<S>) => <ProgressBarWrapper>
-  {steps.map((step, index) => <ProgressBarItem
-    key={index}
-    index={index}
-    isActive={index === activeIndex}
-    step={step}
-    goToStep={goToStep}
-  />)}
-</ProgressBarWrapper>;
+export const ProgressBar = <S extends {variant: ProgressBarItemVariant}>({ steps, activeIndex, goToStep }: ProgressBarProps<S>) =>
+  <ProgressBarWrapper aria-label="Breadcrumbs">
+    {steps.map((step, index) => <ProgressBarItem
+      key={index}
+      index={index}
+      isActive={index === activeIndex}
+      step={step}
+      goToStep={goToStep}
+    />)}
+  </ProgressBarWrapper>;
diff --git a/src/components/__snapshots__/ProgressBar.spec.tsx.snap b/src/components/__snapshots__/ProgressBar.spec.tsx.snap
@@ -1,13 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProgressBar matches snapshot 1`] = `
-<div
+<nav
+  aria-label="Breadcrumbs"
   className="sc-bczRLJ bQqPBP"
 >
   <span
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 1"
       className="sc-dkzDqf KrxmS"
       onClick={[Function]}
     >
@@ -38,6 +41,8 @@ exports[`ProgressBar matches snapshot 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 2"
       className="sc-dkzDqf gKblal"
       onClick={[Function]}
     >
@@ -68,6 +73,8 @@ exports[`ProgressBar matches snapshot 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="location"
+      aria-label="Step 3"
       className="sc-dkzDqf hmFFbY"
       onClick={[Function]}
     >
@@ -98,6 +105,8 @@ exports[`ProgressBar matches snapshot 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 4"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -108,6 +117,8 @@ exports[`ProgressBar matches snapshot 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 5"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -118,6 +129,8 @@ exports[`ProgressBar matches snapshot 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 6"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -128,6 +141,8 @@ exports[`ProgressBar matches snapshot 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Assignment status"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -145,17 +160,20 @@ exports[`ProgressBar matches snapshot 1`] = `
       </svg>
     </button>
   </span>
-</div>
+</nav>
 `;
 
 exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
-<div
+<nav
+  aria-label="Breadcrumbs"
   className="sc-bczRLJ bQqPBP"
 >
   <span
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 1"
       className="sc-dkzDqf KrxmS"
       onClick={[Function]}
     >
@@ -186,6 +204,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 2"
       className="sc-dkzDqf gKblal"
       onClick={[Function]}
     >
@@ -216,6 +236,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 3"
       className="sc-dkzDqf KrxmS"
       onClick={[Function]}
     >
@@ -246,6 +268,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="location"
+      aria-label="Step 4"
       className="sc-dkzDqf ejGnvX"
       onClick={[Function]}
     >
@@ -256,6 +280,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 5"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -266,6 +292,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 6"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -276,6 +304,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Assignment status"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -293,17 +323,20 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
       </svg>
     </button>
   </span>
-</div>
+</nav>
 `;
 
 exports[`ProgressBar matches snapshot when status step is active 1`] = `
-<div
+<nav
+  aria-label="Breadcrumbs"
   className="sc-bczRLJ bQqPBP"
 >
   <span
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 1"
       className="sc-dkzDqf KrxmS"
       onClick={[Function]}
     >
@@ -334,6 +367,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 2"
       className="sc-dkzDqf gKblal"
       onClick={[Function]}
     >
@@ -364,6 +399,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 3"
       className="sc-dkzDqf KrxmS"
       onClick={[Function]}
     >
@@ -394,6 +431,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 4"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -404,6 +443,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 5"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -414,6 +455,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="false"
+      aria-label="Step 6"
       className="sc-dkzDqf iyRspZ"
       onClick={[Function]}
     >
@@ -424,6 +467,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
     className="sc-gsnTZi AyNuQ"
   >
     <button
+      aria-current="location"
+      aria-label="Assignment status"
       className="sc-dkzDqf ejGnvX"
       onClick={[Function]}
     >
@@ -441,5 +486,5 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
       </svg>
     </button>
   </span>
-</div>
+</nav>
 `;