diff --git a/.changeset/cool-hornets-call.md b/.changeset/cool-hornets-call.md deleted file mode 100644 index 81fd3401543..00000000000 --- a/.changeset/cool-hornets-call.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/react': minor ---- - -Implement accessibility audit feedback for ToggleSwitch - - diff --git a/e2e/components/ToggleSwitch.test.ts b/e2e/components/ToggleSwitch.test.ts index bde4521a25c..33ed880d336 100644 --- a/e2e/components/ToggleSwitch.test.ts +++ b/e2e/components/ToggleSwitch.test.ts @@ -30,11 +30,6 @@ 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 b149cda4847..20a23ed556e 100644 --- a/src/ToggleSwitch/ToggleSwitch.tsx +++ b/src/ToggleSwitch/ToggleSwitch.tsx @@ -7,6 +7,7 @@ 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' @@ -251,8 +252,7 @@ const ToggleSwitch: React.FC> = ({ fontSize={size === 'small' ? 0 : 1} mx={2} aria-hidden="true" - sx={{position: 'relative', cursor: 'pointer'}} - onClick={handleToggleClick} + sx={{position: 'relative'}} > On @@ -265,11 +265,13 @@ const ToggleSwitch: React.FC> = ({ onClick={handleToggleClick} aria-labelledby={ariaLabelledby} aria-describedby={ariaDescribedby} - aria-pressed={isOn} + aria-checked={isOn} + role="switch" checked={isOn} size={size} disabled={!acceptsInteraction} > + {isOn ? 'On' : 'Off'}