diff --git a/apps/fastvideo_studio/src/app/settings/page.test.tsx b/apps/fastvideo_studio/src/app/settings/page.test.tsx index a29adc7b1..55a0cb05a 100644 --- a/apps/fastvideo_studio/src/app/settings/page.test.tsx +++ b/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' })); diff --git a/apps/fastvideo_studio/src/components/ui/slider.tsx b/apps/fastvideo_studio/src/components/ui/slider.tsx index b326ccee4..adfd3a399 100644 --- a/apps/fastvideo_studio/src/components/ui/slider.tsx +++ b/apps/fastvideo_studio/src/components/ui/slider.tsx @@ -8,21 +8,39 @@ import { cn } from '@/lib/utils'; const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - ( + ( + { className, - )} - {...props} - > - - - - - -)); + id, + 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, + 'aria-describedby': ariaDescribedBy, + ...props + }, + ref, + ) => ( + + + + + + + ), +); Slider.displayName = SliderPrimitive.Root.displayName; export { Slider };