diff --git a/.changeset/two-cycles-provide.md b/.changeset/two-cycles-provide.md deleted file mode 100644 index 803bbd43fcb..00000000000 --- a/.changeset/two-cycles-provide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@primer/react': minor ---- - -Address ToggleSwitch accessibility feedback 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/generated/components.json b/generated/components.json index 852b84a4672..62af5523183 100644 --- a/generated/components.json +++ b/generated/components.json @@ -4370,7 +4370,7 @@ "name": "resize", "type": "'both' | 'horizontal' | 'vertical' | 'none'", "defaultValue": "'both'", - "description": "Changes background color to a higher contrast color" + "description": "Changes the resize behavior" }, { "name": "validationStatus", @@ -4382,10 +4382,6 @@ "name": "ref", "type": "React.RefObject" }, - { - "name": "ref", - "type": "React.RefObject" - }, { "name": "as", "type": "React.ElementType", diff --git a/src/ToggleSwitch/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx index 6606f5edc1c..851757d9bab 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' @@ -253,8 +254,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 @@ -267,11 +267,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'}