fix(component): use focus-visible in Carousel (#721)

bigcommerce · Apr 2, 2024 · e4dab93 · e4dab93
1 parent a170d05
commit e4dab93
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/unlucky-roses-accept.md b/.changeset/unlucky-roses-accept.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/components": patch
+---
+
+Use focus-visible in Carousel
diff --git a/packages/components/src/components/carousel/carousel.tsx b/packages/components/src/components/carousel/carousel.tsx
@@ -202,7 +202,7 @@ const CarouselPreviousIndicator = forwardRef<ElementRef<'button'>, ComponentProp
       <button
         aria-label="Previous products"
         className={cn(
-          'inline-flex h-12 w-12 items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary/20 disabled:text-gray-400',
+          'inline-flex h-12 w-12 items-center justify-center focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:text-gray-400',
           isHidden && 'hidden',
           className,
         )}
@@ -229,7 +229,7 @@ const CarouselNextIndicator = forwardRef<ElementRef<'button'>, ComponentPropsWit
       <button
         aria-label="Next products"
         className={cn(
-          'inline-flex h-12 w-12 items-center justify-center focus:outline-none focus:ring-4 focus:ring-primary/20 disabled:text-gray-400',
+          'inline-flex h-12 w-12 items-center justify-center focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20 disabled:text-gray-400',
           isHidden && 'hidden',
           className,
         )}
@@ -291,7 +291,7 @@ const CarouselPaginationTab = forwardRef<
     <button
       aria-selected={isSelected}
       className={cn(
-        "h-7 w-7 p-0.5 after:block after:h-0.5 after:w-full after:bg-gray-400 after:content-[''] focus:outline-none focus:ring-4 focus:ring-primary/20",
+        "h-7 w-7 p-0.5 after:block after:h-0.5 after:w-full after:bg-gray-400 after:content-[''] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20",
         isSelected && 'after:bg-black',
         className,
       )}