Enhancement(ui): accecibility of Slider Thumb

lucien-loua · Sep 14, 2024 · bb1858a · bb1858a
1 parent 80254f8
commit bb1858a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 24 deletions.
diff --git a/apps/site/app/_components/audio/player.tsx b/apps/site/app/_components/audio/player.tsx
@@ -61,6 +61,11 @@ export function AudioPlayer() {
     }
   }, [playbackState]);
 
+  const getThumbProps = useCallback((value: number) => ({
+    'aria-label': `Current value: ${value}`,
+    title: `Current value: ${value}`,
+  }), []);
+
   return (
     <Card className="w-full">
       <CardHeader className="flex flex-row items-center justify-between">
@@ -88,6 +93,7 @@ export function AudioPlayer() {
             onValueChange={audioHandlers.onValueChange}
             onValueCommit={audioHandlers.onValueCommit}
             aria-label={`Playback progress: ${playtime(currentTime)} of ${playtime(duration)}`}
+            thumbProps={getThumbProps(currentTime)}
           />
         </div>
         <div className="mt-2 flex w-full justify-between text-sm">
@@ -112,6 +118,7 @@ export function AudioPlayer() {
                 step={1}
                 {...volumeHandlers}
                 aria-label={`Volume control: ${localVolume}%`}
+                thumbProps={getThumbProps(localVolume)}
               />
             </div>
           </div>

diff --git a/packages/ui/src/components/ui/slider.tsx b/packages/ui/src/components/ui/slider.tsx
@@ -1,28 +1,34 @@
-'use client'
+'use client';
 
-import * as SliderPrimitive from '@radix-ui/react-slider'
-import * as React from 'react'
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 
-import { cn } from '@omi3/utils'
+import { cn } from '@omi3/utils';
 
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative flex w-full touch-none select-none items-center',
-      className,
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-3 w-full grow overflow-hidden rounded-full border-2 border-border dark:border-darkBorder bg-bg dark:bg-secondaryBlack">
-      <SliderPrimitive.Range className="absolute h-full bg-main" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-border dark:border-darkBorder bg-bg dark:bg-darkBg ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
+interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+  thumbProps?: React.ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb>;
+}
 
-export { Slider }
+const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  ({ className, thumbProps, ...props }, ref) => (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn('relative flex w-full touch-none select-none items-center', className)}
+      {...props}
+    >
+      <SliderPrimitive.Track className="border-border dark:border-darkBorder bg-bg dark:bg-secondaryBlack relative h-3 w-full grow overflow-hidden rounded-full border-2">
+        <SliderPrimitive.Range className="bg-main absolute h-full" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        className={cn(
+          'border-border dark:border-darkBorder bg-bg dark:bg-darkBg block h-5 w-5 rounded-full border-2 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          thumbProps?.className,
+        )}
+        {...thumbProps}
+      />
+    </SliderPrimitive.Root>
+  ),
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };