feat(projects): add accessible draggable carousel scrollbar

src/components/ProjectsSection.module.css

@@ -258,29 +258,49 @@
   margin-top: 2.5rem;
 }
 
-.progressTrack {
+.scrollbarTrack {
   position: relative;
-  overflow: hidden;
   width: 30rem;
   max-width: 100%;
   height: 0.375rem;
   border-radius: var(--radius-pill);
   background: var(--color-blue-200);
+  cursor: pointer;
+  touch-action: none;
 }
 
-.progressValue {
-  display: block;
+.scrollbarTrack::before {
+  content: '';
+  position: absolute;
+  inset: -0.75rem 0;
+}
+
+.scrollbarTrack:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 0.5rem;
+}
+
+.scrollbarThumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
   height: 100%;
   border-radius: var(--radius-pill);
   background: var(--color-blue-400);
-  transition: width var(--motion-duration-default) var(--motion-ease-out);
+  cursor: grab;
+  will-change: transform;
 }
 
-[data-theme="dark"] .progressTrack {
+.scrollbarDragging .scrollbarThumb {
+  cursor: grabbing;
+}
+
+[data-theme="dark"] .scrollbarTrack {
   background: var(--color-blue-800);
 }
 
-[data-theme="dark"] .progressValue {
+[data-theme="dark"] .scrollbarThumb {
   background: var(--color-blue-300);
 }
 
@@ -298,7 +318,7 @@
     width: clamp(18.125rem, 23vw, 20.625rem);
   }
 
-  .progressTrack {
+  .scrollbarTrack {
     width: min(30rem, 50vw);
   }
 }
@@ -369,12 +389,10 @@
   }
 
   .scrollbarWrapper {
-    display: flex;
-    justify-content: center;
     margin-top: 2rem;
   }
 
-  .progressTrack {
+  .scrollbarTrack {
     width: min(22.5rem, 60vw);
   }
 }
@@ -458,12 +476,10 @@
   }
 
   .scrollbarWrapper {
-    display: flex;
-    justify-content: center;
     margin-top: 1.5rem;
   }
 
-  .progressTrack {
+  .scrollbarTrack {
     width: min(12.5rem, 60vw);
   }
 }