made dot buttons more accessible

inovex · Oct 19, 2023 · 5ec471c · 5ec471c
1 parent ef38218
commit 5ec471c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/components/Feedback/FeedbackCarousel.scss b/src/components/Feedback/FeedbackCarousel.scss
@@ -21,25 +21,29 @@
   flex-direction: row;
 }
 
-.feedback-carousel_dot {
+.feedback-carousel__button {
   all: unset;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--lightmode-pink);
+  padding: 16px 8px;
   cursor: pointer;
-  opacity: 0.5;
-  margin: 16px 8px;
-
-  transition: all 0.1s ease-in-out;
 
-  &:hover {
+  &:hover > .feedback-carousel__dot {
     transform: scale(1.4);
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--darkmode-pink);
+  &:focus-visible > .feedback-carousel__dot {
+    outline: 3px solid var(--darkmode-pink);
   }
+}
+
+.feedback-carousel__dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--lightmode-pink);
+  opacity: 0.5;
+
+  transition: all 0.4s cubic-bezier(0.7, 0.53, 0.17, 0.99);
 
   &.active {
     transform: scale(1.2);
@@ -153,7 +157,7 @@
     color: var(--darkmode-pink);
   }
 
-  .feedback-carousel_dot {
+  .feedback-carousel__dot {
     background-color: var(--darkmode-pink);
   }
 }
diff --git a/src/components/Feedback/FeedbackCarousel.tsx b/src/components/Feedback/FeedbackCarousel.tsx
@@ -126,13 +126,17 @@ const FeedbackCarousel = ({ items }: FeedbackCarouselProps) => {
           return (
             <button
               key={index}
-              className={`feedback-carousel_dot ${dotState}
-                `}
+              className="feedback-carousel__button"
               onClick={() => {
                 slideToItem(index);
                 setActiveSlide(index);
               }}
-            />
+            >
+              <div
+                className={`feedback-carousel__dot ${dotState}
+                `}
+              />
+            </button>
           );
         })}
       </div>