Merge pull request #3726 from matrix-org/t3chguy/fix_ToggleSwitch_a11y

Fix ToggleSwitch A11Y (trapping tab and switch v. checkbox)

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="switch"
-            role="checkbox"
             aria-checked={checked}
             aria-disabled={disabled}
-            tabIndex={0}
         >
             <div className="mx_ToggleSwitch_ball" />
-        </div>
+        </AccessibleButton>
     );
 };