diff --git a/.changeset/cool-hornets-call.md b/.changeset/cool-hornets-call.md new file mode 100644 index 00000000000..81fd3401543 --- /dev/null +++ b/.changeset/cool-hornets-call.md @@ -0,0 +1,7 @@ +--- +'@primer/react': minor +--- + +Implement accessibility audit feedback for ToggleSwitch + + diff --git a/e2e/components/ToggleSwitch.test.ts b/e2e/components/ToggleSwitch.test.ts index 33ed880d336..bde4521a25c 100644 --- a/e2e/components/ToggleSwitch.test.ts +++ b/e2e/components/ToggleSwitch.test.ts @@ -30,6 +30,11 @@ test.describe('ToggleSwitch', () => { 'color-contrast': { enabled: theme !== 'dark_dimmed', }, + + // the 'default' preview does not associate a label with the button + 'button-name': { + enabled: false, + }, }, }) }) diff --git a/src/ToggleSwitch/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx index 20a23ed556e..b149cda4847 100644 --- a/src/ToggleSwitch/ToggleSwitch.tsx +++ b/src/ToggleSwitch/ToggleSwitch.tsx @@ -7,7 +7,6 @@ import Text from '../Text' import {get} from '../constants' import {useProvidedStateOrCreate} from '../hooks' import sx, {BetterSystemStyleObject, SxProp} from '../sx' -import VisuallyHidden from '../_VisuallyHidden' import {CellAlignment} from '../DataTable/column' const TRANSITION_DURATION = '80ms' @@ -252,7 +251,8 @@ const ToggleSwitch: React.FC> = ({ fontSize={size === 'small' ? 0 : 1} mx={2} aria-hidden="true" - sx={{position: 'relative'}} + sx={{position: 'relative', cursor: 'pointer'}} + onClick={handleToggleClick} > On @@ -265,13 +265,11 @@ const ToggleSwitch: React.FC> = ({ onClick={handleToggleClick} aria-labelledby={ariaLabelledby} aria-describedby={ariaDescribedby} - aria-checked={isOn} - role="switch" + aria-pressed={isOn} checked={isOn} size={size} disabled={!acceptsInteraction} > - {isOn ? 'On' : 'Off'}