refactor(steps): components to be list and aria-hide icons

AppQuality · Jan 17, 2024 · 944438d · 944438d
1 parent 5aa2eb6
commit 944438d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/stories/Steps/Step.tsx b/src/stories/Steps/Step.tsx
@@ -56,7 +56,11 @@ export const Step = ({
       <div className="step-status">
         <TransitionGroup className="step-status-icon">
           {status === "current" && (
-            <CSSTransition classNames="status-icon" timeout={animationTimeout}>
+            <CSSTransition
+              aria-hidden="true"
+              classNames="status-icon"
+              timeout={animationTimeout}
+            >
               {direction === "vertical" ? (
                 <ArrowRightCircle />
               ) : (
@@ -65,12 +69,20 @@ export const Step = ({
             </CSSTransition>
           )}
           {status === "completed" && (
-            <CSSTransition classNames="status-icon" timeout={animationTimeout}>
+            <CSSTransition
+              aria-hidden="true"
+              classNames="status-icon"
+              timeout={animationTimeout}
+            >
               <CheckCircleFill />
             </CSSTransition>
           )}
           {status === "inactive" && (
-            <CSSTransition classNames="status-icon" timeout={animationTimeout}>
+            <CSSTransition
+              aria-hidden="true"
+              classNames="status-icon"
+              timeout={animationTimeout}
+            >
               <Circle />
             </CSSTransition>
           )}

diff --git a/src/stories/Steps/Steps.tsx b/src/stories/Steps/Steps.tsx
@@ -46,7 +46,7 @@ const Steps = ({
   });
   return (
     <StyledSteps className={className} direction={direction} {...props}>
-      <div className="steps">{items}</div>
+      <ul className="steps">{items}</ul>
     </StyledSteps>
   );
 };

diff --git a/src/stories/Steps/StyledStep.tsx b/src/stories/Steps/StyledStep.tsx
@@ -84,7 +84,7 @@ const verticalProgressBar = css`
   }
 `;
 
-export const StyledStep = styled.div<{
+export const StyledStep = styled.li<{
   status: StepProps["status"];
   direction: StepProps["direction"];
   clickable: boolean;