aria label for SteppedTracker steps

jpmorganchase · Sep 23, 2024 · 1cc1e86 · 1cc1e86
1 parent 9e65a95
commit 1cc1e86
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/lab/src/stepped-tracker/TrackerConnector/TrackerConnector.tsx b/packages/lab/src/stepped-tracker/TrackerConnector/TrackerConnector.tsx
@@ -25,5 +25,10 @@ export const TrackerConnector = ({ state }: TrackerConnectorProps) => {
     window: targetWindow,
   });
 
-  return <span className={clsx(withBaseName(), withBaseName(state))} />;
+  return (
+    <span
+      className={clsx(withBaseName(), withBaseName(state))}
+      aria-hidden="true"
+    />
+  );
 };
diff --git a/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.tsx b/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.tsx
@@ -150,10 +150,11 @@ export const TrackerStep = (props: TrackerStepProps) => {
     className: containerClass,
     style: innerStyle,
     "aria-current": ariaCurrent,
+    "aria-label": `Step ${stepNumber + 1} (${stage}${status ? `, ${status}` : ""})`,
     ...restProps,
     children: (
       <>
-        <div className={withBaseName("indicator")}>
+        <div className={withBaseName("indicator")} aria-hidden="true">
           <Icon size={iconSize} />
         </div>
         {hasConnector && <TrackerConnector state={connectorState} />}