diff --git a/.changeset/two-cycles-provide.md b/.changeset/two-cycles-provide.md new file mode 100644 index 00000000000..803bbd43fcb --- /dev/null +++ b/.changeset/two-cycles-provide.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Address ToggleSwitch accessibility feedback 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 851757d9bab..6606f5edc1c 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' @@ -254,7 +253,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 @@ -267,13 +267,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'}