[bugfix]: name the actual Studio slider controls

apps/fastvideo_studio/src/app/settings/page.test.tsx

@@ -52,6 +52,20 @@ describe('Settings page', () => {
     expect(updateOption).toHaveBeenCalledWith('numFrames', expect.any(Number));
   });
 
+  it('gives every slider an accessible name', () => {
+    renderPage();
+
+    const sliders = screen.getAllByRole('slider');
+    expect(sliders).toHaveLength(11);
+    for (const slider of sliders) {
+      expect(slider).toHaveAccessibleName();
+    }
+    expect(screen.getByRole('slider', { name: 'Frames' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('slider', { name: 'Guidance Scale' }),
+    ).toBeInTheDocument();
+  });
+
   it('calls resetToDefaults when Reset to Defaults is clicked', () => {
     renderPage();
     fireEvent.click(screen.getByRole('button', { name: 'Reset to Defaults' }));

apps/fastvideo_studio/src/components/ui/slider.tsx

@@ -8,21 +8,39 @@ import { cn } from '@/lib/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-1.5 w-full grow overflow-hidden rounded-full bg-border">
-      <SliderPrimitive.Range className="absolute h-full bg-accent-blue" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-accent-blue bg-accent-blue shadow transition-colors hover:border-accent-blue/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/40 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-));
+      id,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
+      ...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-1.5 w-full grow overflow-hidden rounded-full bg-border">
+        <SliderPrimitive.Range className="absolute h-full bg-accent-blue" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        id={id}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+        className="block h-4 w-4 rounded-full border-2 border-accent-blue bg-accent-blue shadow transition-colors hover:border-accent-blue/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/40 disabled:pointer-events-none disabled:opacity-50"
+      />
+    </SliderPrimitive.Root>
+  ),
+);
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };