fix(StepNavigation): fix a11y issues

lumada-design · Aug 25, 2023 · b770c4e · b770c4e
1 parent a99eec8
commit b770c4e
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 17 deletions.
diff --git a/.config/pa11yci.config.js b/.config/pa11yci.config.js
@@ -14,6 +14,7 @@ const filterStories = (stories) => {
     "Visualizations/Line Chart",
     "Visualizations/Donut Chart",
     "Visualizations/Confusion Matrix",
+    "Widgets/Code Editor",
   ];
 
   return Object.values(stories).reduce((acc, story) => {

diff --git a/packages/lab/src/components/StepNavigation/DefaultNavigation/Step/Step.tsx b/packages/lab/src/components/StepNavigation/DefaultNavigation/Step/Step.tsx
@@ -107,7 +107,7 @@ export const HvStep = ({
         className={cx(classes.ghost, {
           [classes.ghostDisabled]: state === "Current",
         })}
-        aria-label={`step-${title}`}
+        aria-label={`${title}`}
         icon
         overrideIconColors={false}
         disabled={disabled ?? ["Current", "Disabled"].includes(state)}

diff --git a/packages/lab/src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx b/packages/lab/src/components/StepNavigation/SimpleNavigation/Dot/Dot.tsx
@@ -54,7 +54,7 @@ export const HvDot = ({
         },
         className
       )}
-      aria-label={`step-${title}`}
+      aria-label={`${title}`}
       icon
       overrideIconColors={false}
       disabled={disabled ?? ["Current", "Disabled"].includes(state)}

diff --git a/packages/lab/src/components/StepNavigation/StepNavigation.stories.tsx b/packages/lab/src/components/StepNavigation/StepNavigation.stories.tsx
@@ -122,12 +122,14 @@ export const WithTooltip = () => (
       steps={steps}
       id="Simple-WithTooltip"
       showTitles={false}
+      aria-label="Simple step navigation with tooltip"
     />
     <HvStepNavigation
       type="Default"
       steps={steps}
       id="Default-WithTooltip"
       showTitles={false}
+      aria-label="Default step navigation with tooltip"
     />
   </div>
 );

diff --git a/packages/lab/src/components/StepNavigation/StepNavigation.test.tsx b/packages/lab/src/components/StepNavigation/StepNavigation.test.tsx
@@ -25,23 +25,23 @@ describe("StepNavigation", () => {
   it("should contain all the steps", () => {
     const { getByLabelText } = render(<HvStepNavigation steps={steps} />);
 
-    expect(getByLabelText("step-Completed")).toBeInTheDocument();
-    expect(getByLabelText("step-Failed")).toBeInTheDocument();
-    expect(getByLabelText("step-Pending")).toBeInTheDocument();
-    expect(getByLabelText("step-Current")).toBeInTheDocument();
-    expect(getByLabelText("step-Enabled")).toBeInTheDocument();
-    expect(getByLabelText("step-Disabled")).toBeInTheDocument();
+    expect(getByLabelText("Completed")).toBeInTheDocument();
+    expect(getByLabelText("Failed")).toBeInTheDocument();
+    expect(getByLabelText("Pending")).toBeInTheDocument();
+    expect(getByLabelText("Current")).toBeInTheDocument();
+    expect(getByLabelText("Enabled")).toBeInTheDocument();
+    expect(getByLabelText("Disabled")).toBeInTheDocument();
   });
 
   it("should show a tooltip on hover", () => {
     const { getByLabelText, findByRole, queryByRole } = render(
       <HvStepNavigation type="Simple" showTitles={false} steps={steps} />
     );
     act(async () => {
-      userEvent.hover(getByLabelText("step-container-Pending"));
+      userEvent.hover(getByLabelText("Pending"));
       const tooltip = await findByRole("tooltip");
       expect(tooltip).toBeInTheDocument();
-      userEvent.unhover(getByLabelText("step-container-Pending"));
+      userEvent.unhover(getByLabelText("Pending"));
       await waitForElementToBeRemoved(() => queryByRole("tooltip"));
       expect(tooltip).not.toBeInTheDocument();
     });

diff --git a/packages/lab/src/components/StepNavigation/StepNavigation.tsx b/packages/lab/src/components/StepNavigation/StepNavigation.tsx
@@ -80,6 +80,7 @@ export const HvStepNavigation = ({
   stepSize,
   showTitles,
   type = "Default",
+  "aria-label": ariaLabel,
   ...others
 }: HvStepNavigationProps) => {
   const { classes, css, cx } = useClasses(classesProp);
@@ -136,7 +137,7 @@ export const HvStepNavigation = ({
           classes.separator
         )}
       >
-        <div aria-label={`separator-${title}`} className={separatorClassName} />
+        <div className={separatorClassName} />
       </li>
     );
   };
@@ -164,20 +165,17 @@ export const HvStepNavigation = ({
             {hasTitles ? (
               <StepComponent
                 key={`step-${title}`}
-                aria-label={`step-${title}`}
+                aria-label={`${title}`}
                 {...stepProps}
               />
             ) : (
               <HvTooltip
                 placement="bottom"
                 title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}
               >
-                <div aria-label={`step-container-${title}`}>
+                <div>
                   <Step className={classes.li}>
-                    <StepComponent
-                      aria-label={`step-${title}`}
-                      {...stepProps}
-                    />
+                    <StepComponent aria-label={`${title}`} {...stepProps} />
                   </Step>
                 </div>
               </HvTooltip>
@@ -290,6 +288,7 @@ export const HvStepNavigation = ({
             width: `${navWidth}px`,
             margin: 0,
           }}
+          aria-label={ariaLabel}
         >
           {drawItems(itemsProps)}
         </HvBox>