Revert "Address ToggleSwitch a11y feedback (#3251) (#3433)"

This reverts commit cd086ae.
primer · Jul 4, 2023 · 12e92b7 · 12e92b7
1 parent c5bd228
commit 12e92b7
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 50 deletions.
diff --git a/.changeset/two-cycles-provide.md b/.changeset/two-cycles-provide.md
diff --git 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
@@ -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<React.PropsWithChildren<ToggleSwitchProps>> = ({
         fontSize={size === 'small' ? 0 : 1}
         mx={2}
         aria-hidden="true"
-        sx={{position: 'relative', cursor: 'pointer'}}
-        onClick={handleToggleClick}
+        sx={{position: 'relative'}}
       >
         <Box textAlign="right" sx={isOn ? null : hiddenTextStyles}>
           On
@@ -267,11 +267,13 @@ const ToggleSwitch: React.FC<React.PropsWithChildren<ToggleSwitchProps>> = ({
         onClick={handleToggleClick}
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
-        aria-pressed={isOn}
+        aria-checked={isOn}
+        role="switch"
         checked={isOn}
         size={size}
         disabled={!acceptsInteraction}
       >
+        <VisuallyHidden>{isOn ? 'On' : 'Off'}</VisuallyHidden>
         <Box aria-hidden="true" display="flex" alignItems="center" width="100%" height="100%" overflow="hidden">
           <Box
             flexGrow={1}

diff --git a/src/__tests__/ToggleSwitch.test.tsx b/src/__tests__/ToggleSwitch.test.tsx
@@ -23,7 +23,7 @@ it('renders a switch that is turned off', () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
 })
 it('renders a switch that is turned on', () => {
   const {getByLabelText} = render(
@@ -34,7 +34,7 @@ it('renders a switch that is turned on', () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
 it('renders a switch that is disabled', async () => {
   const user = userEvent.setup()
@@ -46,9 +46,9 @@ it('renders a switch that is disabled', async () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
 })
 it("renders a switch who's state is loading", async () => {
   const user = userEvent.setup()
@@ -62,9 +62,9 @@ it("renders a switch who's state is loading", async () => {
   const loadingSpinner = container.querySelector('svg')
 
   expect(loadingSpinner).toBeDefined()
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
 })
 it('switches from off to on uncontrolled', async () => {
   const user = userEvent.setup()
@@ -76,24 +76,9 @@ it('switches from off to on uncontrolled', async () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
-})
-it('switches from off to on uncontrolled when clicking on status label', async () => {
-  const user = userEvent.setup()
-  const {getByLabelText, getByText} = render(
-    <>
-      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-      <ToggleSwitch aria-labelledby="switchLabel" />
-    </>,
-  )
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-  const toggleSwitchStatusLabel = getByText('Off')
-
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-  await user.click(toggleSwitchStatusLabel)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
 it('switches from off to on with a controlled prop', async () => {
   const user = userEvent.setup()
@@ -114,9 +99,9 @@ it('switches from off to on with a controlled prop', async () => {
   const {getByLabelText} = render(<ControlledSwitchComponent />)
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
 it('calls onChange when the switch is toggled', async () => {
   const user = userEvent.setup()

diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders consistently 1`] = `
   text-align: right;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,7 +25,7 @@ exports[`renders consistently 1`] = `
   align-items: center;
 }
 
-.c6 {
+.c7 {
   color: #ffffff;
   line-height: 0;
   -webkit-box-flex: 1;
@@ -48,7 +48,7 @@ exports[`renders consistently 1`] = `
   transition-duration: 80ms;
 }
 
-.c7 {
+.c8 {
   color: #656d76;
   line-height: 0;
   -webkit-box-flex: 1;
@@ -85,13 +85,25 @@ exports[`renders consistently 1`] = `
   flex-direction: row;
 }
 
+.c5 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c1 {
   font-size: 14px;
   color: #1F2328;
   margin-left: 8px;
   margin-right: 8px;
   position: relative;
-  cursor: pointer;
 }
 
 .c4 {
@@ -140,7 +152,7 @@ exports[`renders consistently 1`] = `
   background-color: hsla(210,24%,88%,1);
 }
 
-.c8 {
+.c9 {
   background-color: #ffffff;
   border-width: 1px;
   border-style: solid;
@@ -190,7 +202,7 @@ exports[`renders consistently 1`] = `
 }
 
 @media (prefers-reduced-motion) {
-  .c8 {
+  .c9 {
     -webkit-transition: none;
     transition: none;
   }
@@ -205,7 +217,6 @@ exports[`renders consistently 1`] = `
     className="c1"
     color="fg.default"
     fontSize={1}
-    onClick={[Function]}
   >
     <div
       className="c2"
@@ -219,23 +230,29 @@ exports[`renders consistently 1`] = `
     </div>
   </span>
   <button
-    aria-pressed={false}
+    aria-checked={false}
     checked={false}
     className="c4"
     disabled={false}
     onClick={[Function]}
+    role="switch"
     size="medium"
   >
+    <span
+      className="c5"
+    >
+      Off
+    </span>
     <div
       aria-hidden="true"
-      className="c5"
+      className="c6"
       display="flex"
       height="100%"
       overflow="hidden"
       width="100%"
     >
       <div
-        className="c6"
+        className="c7"
         color="switchTrack.checked.fg"
       >
         <svg
@@ -252,7 +269,7 @@ exports[`renders consistently 1`] = `
         </svg>
       </div>
       <div
-        className="c7"
+        className="c8"
         color="switchTrack.fg"
       >
         <svg
@@ -272,7 +289,7 @@ exports[`renders consistently 1`] = `
     <div
       aria-hidden="true"
       checked={false}
-      className="c8"
+      className="c9"
       disabled={false}
     />
   </button>