chore: sonar-cloud-review-2

Author: tractorss

src/lib/breadcrumb.tsx

@@ -47,7 +47,7 @@ function Breadcrumb({
           <Content
             className="text-klerosUIComponentsPrimaryText text-base font-semibold"
             {...{ variant }}
-            key={i}
+            key={`${text}-${i}`}
           >
             {text}
           </Content>

src/lib/progress/steps/bullet.tsx

@@ -25,7 +25,6 @@ const Bullet: React.FC<BulletProps> = ({
   <li
     className={cn("flex w-fit grow basis-0", className)}
     aria-label={title}
-    role="listitem"
     aria-current={active ? "step" : undefined}
     aria-disabled={!active && !completed ? true : undefined}
   >

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

@@ -48,7 +48,6 @@ const HorizontalBullet: React.FC<HorizontalBulletProps> = ({
         paddingBottom ? { paddingBottom: `${paddingBottom}px` } : undefined
       }
       aria-label={title}
-      role="listitem"
       aria-current={active ? "step" : undefined}
       aria-disabled={!active && !completed ? true : undefined}
     >

src/lib/progress/steps/horizontal.tsx

@@ -16,7 +16,6 @@ const HorizontalSteps: React.FC<StepsProps> = ({
     )}
     {...props}
     aria-orientation="horizontal"
-    role="listbox"
     aria-label="Horizontal progress steps"
   >
     {items.map((item, i) => (

src/lib/progress/steps/vertical.tsx

@@ -13,7 +13,6 @@ const Steps: React.FC<StepsProps> = ({
     <ol
       className={cn("flex h-full flex-col", className)}
       aria-orientation="vertical"
-      role="listbox"
       aria-label="Vertical progress steps"
     >
       <div className="flex h-auto grow flex-col">

src/lib/progress/timeline/bullet.tsx

@@ -39,7 +39,6 @@ const Bullet: React.FC<BulletProps> = (props) => {
         className,
       )}
       aria-label={`Timeline item: ${title}`}
-      role="listitem"
       aria-current={state === "active" ? "step" : undefined}
     >
       <Spine {...{ variant, line, Icon, titleRef }} />

src/lib/progress/timeline/custom.tsx

@@ -26,7 +26,6 @@ function CustomTimeline({
       className={cn("box-border flex flex-col", className)}
       {...props}
       aria-label="Timeline"
-      role="list"
     >
       {items.slice(0, -1).map((item, i) => (
         <Bullet key={i} line {...item} rightSided isLast={false} />

src/lib/progress/timeline/index.tsx

@@ -22,7 +22,6 @@ function Timeline({ items, className, ...props }: Readonly<TimelineProps>) {
       className={cn("box-border flex flex-col", className)}
       {...props}
       aria-label="Timeline"
-      role="list"
     >
       {items.slice(0, -1).map((item, i) => (
         <Bullet