From 9d0bf13ca0c3558ab09d3711a64b4539d40ec0d0 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 13 Dec 2019 14:18:41 +0000
Subject: [PATCH] Fix ToggleSwitch A11Y (trapping tab and switch v. checkbox)

---
 src/components/views/elements/ToggleSwitch.js | 26 +++++--------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js
index 5de249f214..b067840792 100644
--- a/src/components/views/elements/ToggleSwitch.js
+++ b/src/components/views/elements/ToggleSwitch.js
@@ -19,46 +19,32 @@ import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 
-import {KeyCode} from "../../../Keyboard";
+import sdk from "../../../index";
 
-// Controlled Toggle Switch element
+// Controlled Toggle Switch element, written with Accessibility in mind
 const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
     const _onClick = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
         if (disabled) return;
-
         onChange(!checked);
     };
 
-    const _onKeyDown = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (disabled) return;
-
-        if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) {
-            onChange(!checked);
-        }
-    };
-
     const classes = classNames({
         "mx_ToggleSwitch": true,
         "mx_ToggleSwitch_on": checked,
         "mx_ToggleSwitch_enabled": !disabled,
     });
 
+    const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
     return (
-        <div {...props}
+        <AccessibleButton {...props}
             className={classes}
             onClick={_onClick}
-            onKeyDown={_onKeyDown}
-            role="checkbox"
+            role="switch"
             aria-checked={checked}
             aria-disabled={disabled}
-            tabIndex={0}
         >
             <div className="mx_ToggleSwitch_ball" />
-        </div>
+        </AccessibleButton>
     );
 };