chore: sonar-cloud-review

Author: tractorss

src/lib/breadcrumb.tsx

@@ -52,7 +52,7 @@ function Breadcrumb({
             {text}
           </Content>
         ) : (
-          <React.Fragment key={i}>
+          <React.Fragment key={`${text}-${i}`}>
             <Button
               className={clsx(clickable ? "cursor-pointer" : "cursor-text")}
               onPress={() => (callback ? callback(value) : null)}

src/lib/dropdown/select/index.tsx

@@ -38,7 +38,6 @@ function DropdownSelect({
     (selectedKey: Key) => {
       const selectedItem = items.find((item) => item.id === selectedKey);
       if (selectedItem) callback(selectedItem);
-      return;
     },
     [items, callback],
   );

src/lib/progress/linear/index.tsx

@@ -66,7 +66,7 @@ function Linear({
           strokeLinecap="round"
         >
           <path d={linePath} className="stroke-klerosUIComponentsStroke" />
-          {value && (
+          {!isUndefined(value) && (
             <path
               className={clsx(
                 "stroke-klerosUIComponentsSuccess",

src/lib/progress/steps/bullet-circle.tsx

@@ -15,7 +15,10 @@ const BulletCircle: React.FC<BulletCircleProps> = ({
   line,
   index,
 }) => (
-  <div className="flex h-full flex-col items-center justify-start">
+  <div
+    className="flex h-full flex-col items-center justify-start"
+    aria-hidden="true"
+  >
     {completed ? (
       <SuccessIcon className="fill-klerosUIComponentsPrimaryBlue size-6 basis-auto" />
     ) : (

src/lib/progress/steps/bullet.tsx

@@ -22,7 +22,7 @@ const Bullet: React.FC<BulletProps> = ({
   line,
   className,
 }) => (
-  <div
+  <li
     className={cn("flex w-fit grow basis-0", className)}
     aria-label={title}
     role="listitem"
@@ -52,7 +52,7 @@ const Bullet: React.FC<BulletProps> = ({
           {subitems.map((item, i) => (
             <small
               className="text-klerosUIComponentsSecondaryText text-xs font-normal break-words"
-              key={i}
+              key={`${item}-${i}`}
               aria-label={item}
               aria-description={`subitem ${i + 1}`}
             >
@@ -62,7 +62,7 @@ const Bullet: React.FC<BulletProps> = ({
         </div>
       )}
     </div>
-  </div>
+  </li>
 );
 
 export default Bullet;

src/lib/progress/steps/horizontal-bullet.tsx

@@ -30,7 +30,7 @@ const HorizontalBullet: React.FC<HorizontalBulletProps> = ({
   const paddingBottom = height;
 
   return (
-    <div
+    <li
       className={clsx(
         "relative flex h-fit items-start justify-center",
         "lg:!pb-0",
@@ -72,19 +72,20 @@ const HorizontalBullet: React.FC<HorizontalBulletProps> = ({
         >
           {title}
         </h2>
-        {subitems &&
-          subitems.map((item, i) => (
-            <small
-              className="text-klerosUIComponentsSecondaryText text-xs font-normal break-words"
-              key={i}
-              aria-label={item}
-              aria-description={`subitem ${i + 1}`}
-            >
-              {item}
-            </small>
-          ))}
+        {subitems
+          ? subitems.map((item, i) => (
+              <small
+                className="text-klerosUIComponentsSecondaryText text-xs font-normal break-words"
+                key={`${item}-${i}`}
+                aria-label={item}
+                aria-description={`subitem ${i + 1}`}
+              >
+                {item}
+              </small>
+            ))
+          : null}
       </div>
-    </div>
+    </li>
   );
 };
 

src/lib/progress/steps/horizontal.tsx

@@ -9,14 +9,14 @@ const HorizontalSteps: React.FC<StepsProps> = ({
   className,
   ...props
 }) => (
-  <div
+  <ol
     className={cn(
       "box-border flex w-62.5 items-start justify-center",
       className,
     )}
     {...props}
     aria-orientation="horizontal"
-    role="list"
+    role="listbox"
     aria-label="Horizontal progress steps"
   >
     {items.map((item, i) => (
@@ -26,10 +26,10 @@ const HorizontalSteps: React.FC<StepsProps> = ({
         active={i === currentItemIndex}
         last={i + 1 === items.length}
         index={i + 1}
-        key={i}
+        key={`${item.title}-${i}`}
       />
     ))}
-  </div>
+  </ol>
 );
 
 export default HorizontalSteps;

src/lib/progress/steps/vertical.tsx

@@ -10,10 +10,10 @@ const Steps: React.FC<StepsProps> = ({
 }) => {
   const lastItem = items[items.length - 1];
   return (
-    <div
+    <ol
       className={cn("flex h-full flex-col", className)}
       aria-orientation="vertical"
-      role="list"
+      role="listbox"
       aria-label="Vertical progress steps"
     >
       <div className="flex h-auto grow flex-col">
@@ -24,7 +24,7 @@ const Steps: React.FC<StepsProps> = ({
             active={i === currentItemIndex}
             line={!(i + 1 === items.length)}
             index={i + 1}
-            key={i}
+            key={`${title}-${i}`}
           />
         ))}
       </div>
@@ -36,7 +36,7 @@ const Steps: React.FC<StepsProps> = ({
         index={items.length}
         className="grow-0 basis-auto"
       />
-    </div>
+    </ol>
   );
 };
 

src/lib/progress/timeline/bullet.tsx

@@ -28,7 +28,7 @@ const Bullet: React.FC<BulletProps> = (props) => {
   const titleRef = useRef<HTMLHeadingElement>(null);
 
   return (
-    <div
+    <li
       className={cn(
         "relative flex opacity-100",
         rightSided ? "justify-start" : "justify-end",
@@ -41,8 +41,6 @@ const Bullet: React.FC<BulletProps> = (props) => {
       aria-label={`Timeline item: ${title}`}
       role="listitem"
       aria-current={state === "active" ? "step" : undefined}
-      aria-busy={state === "loading"}
-      aria-disabled={state === "disabled"}
     >
       <Spine {...{ variant, line, Icon, titleRef }} />
       <div
@@ -115,7 +113,7 @@ const Bullet: React.FC<BulletProps> = (props) => {
           {subtitle}
         </small>
       </div>
-    </div>
+    </li>
   );
 };
 

src/lib/progress/timeline/custom.tsx

@@ -22,7 +22,7 @@ function CustomTimeline({
 }: Readonly<ICustomTimelineProps>) {
   const lastItem = items[items.length - 1];
   return (
-    <div
+    <ol
       className={cn("box-border flex flex-col", className)}
       {...props}
       aria-label="Timeline"
@@ -37,7 +37,7 @@ function CustomTimeline({
         {...lastItem}
         isLast={true}
       />
-    </div>
+    </ol>
   );
 }
 export default CustomTimeline;