diff --git a/client/src/components/Settings/ToggleSwitch.test.tsx b/client/src/components/Settings/ToggleSwitch.test.tsx index 88a3d205a..692dc188e 100644 --- a/client/src/components/Settings/ToggleSwitch.test.tsx +++ b/client/src/components/Settings/ToggleSwitch.test.tsx @@ -64,4 +64,26 @@ describe('ToggleSwitch', () => { rerender( {}} />); expect(button.querySelector('span')!.style.left).toBe('22px'); }); + + it('FE-COMP-TOGGLESWITCH-009: a disabled switch is out of reach and says so', async () => { + const user = userEvent.setup(); + const onToggle = vi.fn(); + render(); + const button = screen.getByRole('button'); + expect(button).toBeDisabled(); + expect(button).toHaveAttribute('aria-disabled', 'true'); + expect(button.style.cursor).toBe('not-allowed'); + await user.click(button); + await user.tab(); + expect(onToggle).not.toHaveBeenCalled(); + expect(button).not.toHaveFocus(); + }); + + it('FE-COMP-TOGGLESWITCH-010: an enabled switch keeps the pointer and no aria-disabled', () => { + render( {}} />); + const button = screen.getByRole('button'); + expect(button).toBeEnabled(); + expect(button).not.toHaveAttribute('aria-disabled'); + expect(button.style.cursor).toBe('pointer'); + }); }); diff --git a/client/src/components/Settings/ToggleSwitch.tsx b/client/src/components/Settings/ToggleSwitch.tsx index a19040e9a..932674627 100644 --- a/client/src/components/Settings/ToggleSwitch.tsx +++ b/client/src/components/Settings/ToggleSwitch.tsx @@ -5,16 +5,18 @@ const EASE = 'cubic-bezier(0.32, 0.72, 0, 1)' /** * `describedBy` names the element that explains the switch, for a switch whose label alone - * does not say what flipping it changes. + * does not say what flipping it changes. `disabled` takes it out of the tab order and tells + * assistive tech it cannot act; the caller dims it and says why. */ -export default function ToggleSwitch({ on, onToggle, label, describedBy }: { on: boolean; onToggle: () => void; label?: string; describedBy?: string }) { +export default function ToggleSwitch({ on, onToggle, label, describedBy, disabled = false }: { on: boolean; onToggle: () => void; label?: string; describedBy?: string; disabled?: boolean }) { return (