make the progress bar accessible as breadcrumbs (#67)

jivey · web-flow · commit c1a6f5e70d5a · 2024-04-25T10:09:42.000-07:00
* make the progress bar accessible as breadcrumbs

* update snapshots
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>
 `;

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,16 @@`
`1`	`1`	`// Jest Snapshot v1, https://goo.gl/fbAQLP`
`2`	`2`
`3`	`3`	exports[`ProgressBar matches snapshot 1`] = `
`4`		`-<div`
	`4`	`+<nav`
	`5`	`+ aria-label="Breadcrumbs"`
`5`	`6`	`className="sc-bczRLJ bQqPBP"`
`6`	`7`	`>`
`7`	`8`	`<span`
`8`	`9`	`className="sc-gsnTZi AyNuQ"`
`9`	`10`	`>`
`10`	`11`	`<button`
	`12`	`+ aria-current="false"`
	`13`	`+ aria-label="Step 1"`
`11`	`14`	`className="sc-dkzDqf KrxmS"`
`12`	`15`	`onClick={[Function]}`
`13`	`16`	`>`
@@ -38,6 +41,8 @@ exports[`ProgressBar matches snapshot 1`] = `
`38`	`41`	`className="sc-gsnTZi AyNuQ"`
`39`	`42`	`>`
`40`	`43`	`<button`
	`44`	`+ aria-current="false"`
	`45`	`+ aria-label="Step 2"`
`41`	`46`	`className="sc-dkzDqf gKblal"`
`42`	`47`	`onClick={[Function]}`
`43`	`48`	`>`
@@ -68,6 +73,8 @@ exports[`ProgressBar matches snapshot 1`] = `
`68`	`73`	`className="sc-gsnTZi AyNuQ"`
`69`	`74`	`>`
`70`	`75`	`<button`
	`76`	`+ aria-current="location"`
	`77`	`+ aria-label="Step 3"`
`71`	`78`	`className="sc-dkzDqf hmFFbY"`
`72`	`79`	`onClick={[Function]}`
`73`	`80`	`>`
@@ -98,6 +105,8 @@ exports[`ProgressBar matches snapshot 1`] = `
`98`	`105`	`className="sc-gsnTZi AyNuQ"`
`99`	`106`	`>`
`100`	`107`	`<button`
	`108`	`+ aria-current="false"`
	`109`	`+ aria-label="Step 4"`
`101`	`110`	`className="sc-dkzDqf iyRspZ"`
`102`	`111`	`onClick={[Function]}`
`103`	`112`	`>`
@@ -108,6 +117,8 @@ exports[`ProgressBar matches snapshot 1`] = `
`108`	`117`	`className="sc-gsnTZi AyNuQ"`
`109`	`118`	`>`
`110`	`119`	`<button`
	`120`	`+ aria-current="false"`
	`121`	`+ aria-label="Step 5"`
`111`	`122`	`className="sc-dkzDqf iyRspZ"`
`112`	`123`	`onClick={[Function]}`
`113`	`124`	`>`
@@ -118,6 +129,8 @@ exports[`ProgressBar matches snapshot 1`] = `
`118`	`129`	`className="sc-gsnTZi AyNuQ"`
`119`	`130`	`>`
`120`	`131`	`<button`
	`132`	`+ aria-current="false"`
	`133`	`+ aria-label="Step 6"`
`121`	`134`	`className="sc-dkzDqf iyRspZ"`
`122`	`135`	`onClick={[Function]}`
`123`	`136`	`>`
@@ -128,6 +141,8 @@ exports[`ProgressBar matches snapshot 1`] = `
`128`	`141`	`className="sc-gsnTZi AyNuQ"`
`129`	`142`	`>`
`130`	`143`	`<button`
	`144`	`+ aria-current="false"`
	`145`	`+ aria-label="Assignment status"`
`131`	`146`	`className="sc-dkzDqf iyRspZ"`
`132`	`147`	`onClick={[Function]}`
`133`	`148`	`>`
@@ -145,17 +160,20 @@ exports[`ProgressBar matches snapshot 1`] = `
`145`	`160`	`</svg>`
`146`	`161`	`</button>`
`147`	`162`	`</span>`
`148`		`-</div>`
	`163`	`+</nav>`
`149`	`164`	`;
`150`	`165`
`151`	`166`	exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
`152`		`-<div`
	`167`	`+<nav`
	`168`	`+ aria-label="Breadcrumbs"`
`153`	`169`	`className="sc-bczRLJ bQqPBP"`
`154`	`170`	`>`
`155`	`171`	`<span`
`156`	`172`	`className="sc-gsnTZi AyNuQ"`
`157`	`173`	`>`
`158`	`174`	`<button`
	`175`	`+ aria-current="false"`
	`176`	`+ aria-label="Step 1"`
`159`	`177`	`className="sc-dkzDqf KrxmS"`
`160`	`178`	`onClick={[Function]}`
`161`	`179`	`>`
@@ -186,6 +204,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
`186`	`204`	`className="sc-gsnTZi AyNuQ"`
`187`	`205`	`>`
`188`	`206`	`<button`
	`207`	`+ aria-current="false"`
	`208`	`+ aria-label="Step 2"`
`189`	`209`	`className="sc-dkzDqf gKblal"`
`190`	`210`	`onClick={[Function]}`
`191`	`211`	`>`
@@ -216,6 +236,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
`216`	`236`	`className="sc-gsnTZi AyNuQ"`
`217`	`237`	`>`
`218`	`238`	`<button`
	`239`	`+ aria-current="false"`
	`240`	`+ aria-label="Step 3"`
`219`	`241`	`className="sc-dkzDqf KrxmS"`
`220`	`242`	`onClick={[Function]}`
`221`	`243`	`>`
@@ -246,6 +268,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
`246`	`268`	`className="sc-gsnTZi AyNuQ"`
`247`	`269`	`>`
`248`	`270`	`<button`
	`271`	`+ aria-current="location"`
	`272`	`+ aria-label="Step 4"`
`249`	`273`	`className="sc-dkzDqf ejGnvX"`
`250`	`274`	`onClick={[Function]}`
`251`	`275`	`>`
@@ -256,6 +280,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
`256`	`280`	`className="sc-gsnTZi AyNuQ"`
`257`	`281`	`>`
`258`	`282`	`<button`
	`283`	`+ aria-current="false"`
	`284`	`+ aria-label="Step 5"`
`259`	`285`	`className="sc-dkzDqf iyRspZ"`
`260`	`286`	`onClick={[Function]}`
`261`	`287`	`>`
@@ -266,6 +292,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
`266`	`292`	`className="sc-gsnTZi AyNuQ"`
`267`	`293`	`>`
`268`	`294`	`<button`
	`295`	`+ aria-current="false"`
	`296`	`+ aria-label="Step 6"`
`269`	`297`	`className="sc-dkzDqf iyRspZ"`
`270`	`298`	`onClick={[Function]}`
`271`	`299`	`>`
@@ -276,6 +304,8 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
`276`	`304`	`className="sc-gsnTZi AyNuQ"`
`277`	`305`	`>`
`278`	`306`	`<button`
	`307`	`+ aria-current="false"`
	`308`	`+ aria-label="Assignment status"`
`279`	`309`	`className="sc-dkzDqf iyRspZ"`
`280`	`310`	`onClick={[Function]}`
`281`	`311`	`>`
@@ -293,17 +323,20 @@ exports[`ProgressBar matches snapshot when active step is incomplete 1`] = `
`293`	`323`	`</svg>`
`294`	`324`	`</button>`
`295`	`325`	`</span>`
`296`		`-</div>`
	`326`	`+</nav>`
`297`	`327`	`;
`298`	`328`
`299`	`329`	exports[`ProgressBar matches snapshot when status step is active 1`] = `
`300`		`-<div`
	`330`	`+<nav`
	`331`	`+ aria-label="Breadcrumbs"`
`301`	`332`	`className="sc-bczRLJ bQqPBP"`
`302`	`333`	`>`
`303`	`334`	`<span`
`304`	`335`	`className="sc-gsnTZi AyNuQ"`
`305`	`336`	`>`
`306`	`337`	`<button`
	`338`	`+ aria-current="false"`
	`339`	`+ aria-label="Step 1"`
`307`	`340`	`className="sc-dkzDqf KrxmS"`
`308`	`341`	`onClick={[Function]}`
`309`	`342`	`>`
@@ -334,6 +367,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
`334`	`367`	`className="sc-gsnTZi AyNuQ"`
`335`	`368`	`>`
`336`	`369`	`<button`
	`370`	`+ aria-current="false"`
	`371`	`+ aria-label="Step 2"`
`337`	`372`	`className="sc-dkzDqf gKblal"`
`338`	`373`	`onClick={[Function]}`
`339`	`374`	`>`
@@ -364,6 +399,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
`364`	`399`	`className="sc-gsnTZi AyNuQ"`
`365`	`400`	`>`
`366`	`401`	`<button`
	`402`	`+ aria-current="false"`
	`403`	`+ aria-label="Step 3"`
`367`	`404`	`className="sc-dkzDqf KrxmS"`
`368`	`405`	`onClick={[Function]}`
`369`	`406`	`>`
@@ -394,6 +431,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
`394`	`431`	`className="sc-gsnTZi AyNuQ"`
`395`	`432`	`>`
`396`	`433`	`<button`
	`434`	`+ aria-current="false"`
	`435`	`+ aria-label="Step 4"`
`397`	`436`	`className="sc-dkzDqf iyRspZ"`
`398`	`437`	`onClick={[Function]}`
`399`	`438`	`>`
@@ -404,6 +443,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
`404`	`443`	`className="sc-gsnTZi AyNuQ"`
`405`	`444`	`>`
`406`	`445`	`<button`
	`446`	`+ aria-current="false"`
	`447`	`+ aria-label="Step 5"`
`407`	`448`	`className="sc-dkzDqf iyRspZ"`
`408`	`449`	`onClick={[Function]}`
`409`	`450`	`>`
@@ -414,6 +455,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
`414`	`455`	`className="sc-gsnTZi AyNuQ"`
`415`	`456`	`>`
`416`	`457`	`<button`
	`458`	`+ aria-current="false"`
	`459`	`+ aria-label="Step 6"`
`417`	`460`	`className="sc-dkzDqf iyRspZ"`
`418`	`461`	`onClick={[Function]}`
`419`	`462`	`>`
@@ -424,6 +467,8 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
`424`	`467`	`className="sc-gsnTZi AyNuQ"`
`425`	`468`	`>`
`426`	`469`	`<button`
	`470`	`+ aria-current="location"`
	`471`	`+ aria-label="Assignment status"`
`427`	`472`	`className="sc-dkzDqf ejGnvX"`
`428`	`473`	`onClick={[Function]}`
`429`	`474`	`>`
@@ -441,5 +486,5 @@ exports[`ProgressBar matches snapshot when status step is active 1`] = `
`441`	`486`	`</svg>`
`442`	`487`	`</button>`
`443`	`488`	`</span>`
`444`		`-</div>`
	`489`	`+</nav>`
`445`	`490`	`;