From 35ecaff3995751fde12bdc152a65e34fd588d827 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 8 Jun 2020 16:48:32 +0100
Subject: [PATCH 1/7] Move Settings flag to ts

---
 ...cessibleButton.js => AccessibleButton.tsx} | 65 ++++++++--------
 .../{SettingsFlag.js => SettingsFlag.tsx}     | 76 ++++++++++++-------
 .../{ToggleSwitch.js => ToggleSwitch.tsx}     | 17 ++---
 3 files changed, 89 insertions(+), 69 deletions(-)
 rename src/components/views/elements/{AccessibleButton.js => AccessibleButton.tsx} (71%)
 rename src/components/views/elements/{SettingsFlag.js => SettingsFlag.tsx} (54%)
 rename src/components/views/elements/{ToggleSwitch.js => ToggleSwitch.tsx} (82%)

diff --git a/src/components/views/elements/AccessibleButton.js b/src/components/views/elements/AccessibleButton.tsx
similarity index 71%
rename from src/components/views/elements/AccessibleButton.js
rename to src/components/views/elements/AccessibleButton.tsx
index d708a44ab2..f35cd52734 100644
--- a/src/components/views/elements/AccessibleButton.js
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {Key} from '../../../Keyboard';
 
@@ -27,11 +26,20 @@ import {Key} from '../../../Keyboard';
  * @param {Object} props  react element properties
  * @returns {Object} rendered react
  */
-export default function AccessibleButton(props) {
-    const {element, onClick, children, kind, disabled, ...restProps} = props;
+export default function AccessibleButton({
+    element,
+    onClick,
+    children,
+    kind,
+    disabled,
+    inputRef,
+    className,
+    ...restProps
+}: IProps) {
 
+    const newProps: IAccessibleButtonProps = restProps;
     if (!disabled) {
-        restProps.onClick = onClick;
+        newProps.onClick = onClick,
         // We need to consume enter onKeyDown and space onKeyUp
         // otherwise we are risking also activating other keyboard focusable elements
         // that might receive focus as a result of the AccessibleButtonClick action
@@ -39,7 +47,7 @@ export default function AccessibleButton(props) {
         // And divs which we report as role button to assistive technologies.
         // Browsers handle space and enter keypresses differently and we are only adjusting to the
         // inconsistencies here
-        restProps.onKeyDown = function(e) {
+        newProps.onKeyDown = (e) => {
             if (e.key === Key.ENTER) {
                 e.stopPropagation();
                 e.preventDefault();
@@ -49,8 +57,8 @@ export default function AccessibleButton(props) {
                 e.stopPropagation();
                 e.preventDefault();
             }
-        };
-        restProps.onKeyUp = function(e) {
+        },
+        newProps.onKeyUp = (e) => {
             if (e.key === Key.SPACE) {
                 e.stopPropagation();
                 e.preventDefault();
@@ -60,26 +68,26 @@ export default function AccessibleButton(props) {
                 e.stopPropagation();
                 e.preventDefault();
             }
-        };
+        }
     }
 
     // Pass through the ref - used for keyboard shortcut access to some buttons
-    restProps.ref = restProps.inputRef;
-    delete restProps.inputRef;
+    newProps.ref = inputRef;
 
-    restProps.className = (restProps.className ? restProps.className + " " : "") + "mx_AccessibleButton";
+    newProps.className = (className ? className + " " : "") + "mx_AccessibleButton";
 
     if (kind) {
         // We apply a hasKind class to maintain backwards compatibility with
         // buttons which might not know about kind and break
-        restProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
+        newProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
     }
 
     if (disabled) {
-        restProps.className += " mx_AccessibleButton_disabled";
-        restProps["aria-disabled"] = true;
+        newProps.className += " mx_AccessibleButton_disabled";
+        newProps["aria-disabled"] = true;
     }
 
+    // React.createElement expects InputHTMLAttributes
     return React.createElement(element, restProps, children);
 }
 
@@ -89,28 +97,25 @@ export default function AccessibleButton(props) {
  * onClick:  (required) Event handler for button activation. Should be
  *           implemented exactly like a normal onClick handler.
  */
-AccessibleButton.propTypes = {
-    children: PropTypes.node,
-    inputRef: PropTypes.oneOfType([
-        // Either a function
-        PropTypes.func,
-        // Or the instance of a DOM native element
-        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-    ]),
-    element: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-
+interface IProps extends React.InputHTMLAttributes<HTMLElement> {
+    inputRef?: React.Ref<HTMLElement>,
+    element?: string;
     // The kind of button, similar to how Bootstrap works.
     // See available classes for AccessibleButton for options.
-    kind: PropTypes.string,
+    kind?: string,
     // The ARIA role
-    role: PropTypes.string,
+    role?: string,
     // The tabIndex
-    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-    disabled: PropTypes.bool,
+    tabIndex?: number,
+    disabled?: boolean,
+    className?: string,
+    onClick(e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void;
 };
 
+interface IAccessibleButtonProps extends React.InputHTMLAttributes<HTMLElement> {
+    ref?: React.Ref<HTMLElement>,
+}
+
 AccessibleButton.defaultProps = {
     element: 'div',
     role: 'button',
diff --git a/src/components/views/elements/SettingsFlag.js b/src/components/views/elements/SettingsFlag.tsx
similarity index 54%
rename from src/components/views/elements/SettingsFlag.js
rename to src/components/views/elements/SettingsFlag.tsx
index 15f17805a8..2ae9bc3d87 100644
--- a/src/components/views/elements/SettingsFlag.js
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -21,58 +21,76 @@ import createReactClass from 'create-react-class';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
 import ToggleSwitch from "./ToggleSwitch";
+import StyledCheckbox from "./StyledCheckbox";
 
-export default createReactClass({
-    displayName: 'SettingsFlag',
-    propTypes: {
-        name: PropTypes.string.isRequired,
-        level: PropTypes.string.isRequired,
-        roomId: PropTypes.string, // for per-room settings
-        label: PropTypes.string, // untranslated
-        onChange: PropTypes.func,
-        isExplicit: PropTypes.bool,
-    },
+interface IProps {
+    name: string,
+    level: string,
+    roomId?: string, // for per-room settings
+    label?: string, // untranslated
+    isExplicit: boolean,
+    // XXX: once design replaces all toggles make this the default
+    useCheckbox?: boolean,
+    onChange(checked: boolean): void,
+}
 
-    getInitialState: function() {
-        return {
+interface IState {
+    // XXX: make this generic when the settings store is typed
+    value: any;
+}
+
+export default class SettingsFlag extends React.Component<IProps, IState> {
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
             value: SettingsStore.getValueAt(
                 this.props.level,
                 this.props.name,
                 this.props.roomId,
                 this.props.isExplicit,
             ),
-        };
-    },
-
-    onChange: function(checked) {
-        if (this.props.group && !checked) return;
+        }
+    }
 
+    private onChange = (checked: boolean): void => {
         this.save(checked);
         this.setState({ value: checked });
         if (this.props.onChange) this.props.onChange(checked);
-    },
+    }
 
-    save: function(val = undefined) {
+    private checkBoxOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this.onChange(e.target.checked);
+    }
+
+    private save = (val?: any): void => {
         return SettingsStore.setValue(
             this.props.name,
             this.props.roomId,
             this.props.level,
             val !== undefined ? val : this.state.value,
         );
-    },
+    }
 
-    render: function() {
+    public render() {
         const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
 
         let label = this.props.label;
         if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
         else label = _t(label);
 
-        return (
-            <div className="mx_SettingsFlag">
-                <span className="mx_SettingsFlag_label">{label}</span>
-                <ToggleSwitch checked={this.state.value} onChange={this.onChange} disabled={!canChange} aria-label={label} />
-            </div>
-        );
-    },
-});
+        if (this.props.useCheckbox) {
+            return <StyledCheckbox checked={this.state.value} onChange={this.checkBoxOnChange} disabled={!canChange} >
+                {label}
+            </StyledCheckbox>;
+        } else {
+            return (
+                <div className="mx_SettingsFlag">
+                    <span className="mx_SettingsFlag_label">{label}</span>
+                    <ToggleSwitch checked={this.state.value} onChange={this.onChange} disabled={!canChange} aria-label={label} />
+                </div>
+            );
+        }
+    }
+}
diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.tsx
similarity index 82%
rename from src/components/views/elements/ToggleSwitch.js
rename to src/components/views/elements/ToggleSwitch.tsx
index bea1a85555..4cb2fa1ef1 100644
--- a/src/components/views/elements/ToggleSwitch.js
+++ b/src/components/views/elements/ToggleSwitch.tsx
@@ -15,14 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-import PropTypes from "prop-types";
+import React, { EventHandler } from "react";
 import classNames from "classnames";
 import * as sdk from "../../../index";
 
 // Controlled Toggle Switch element, written with Accessibility in mind
-const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
-    const _onClick = (e) => {
+export default ({checked, disabled=false, onChange, ...props}: IProps) => {
+    const _onClick = () => {
         if (disabled) return;
         onChange(!checked);
     };
@@ -47,15 +46,13 @@ const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
     );
 };
 
-ToggleSwitch.propTypes = {
+interface IProps {
     // Whether or not this toggle is in the 'on' position.
-    checked: PropTypes.bool.isRequired,
+    checked: boolean,
 
     // Whether or not the user can interact with the switch
-    disabled: PropTypes.bool,
+    disabled: boolean,
 
     // Called when the checked state changes. First argument will be the new state.
-    onChange: PropTypes.func.isRequired,
+    onChange(checked: boolean): void,
 };
-
-export default ToggleSwitch;

From 26eaef848b7649a7796fabb3ebb668099a6e70f5 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 8 Jun 2020 16:53:19 +0100
Subject: [PATCH 2/7] Use Element instead of HTMLElement

---
 src/components/views/elements/AccessibleButton.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index f35cd52734..6dcadaf63f 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -97,8 +97,8 @@ export default function AccessibleButton({
  * onClick:  (required) Event handler for button activation. Should be
  *           implemented exactly like a normal onClick handler.
  */
-interface IProps extends React.InputHTMLAttributes<HTMLElement> {
-    inputRef?: React.Ref<HTMLElement>,
+interface IProps extends React.InputHTMLAttributes<Element> {
+    inputRef?: React.Ref<Element>,
     element?: string;
     // The kind of button, similar to how Bootstrap works.
     // See available classes for AccessibleButton for options.
@@ -109,11 +109,11 @@ interface IProps extends React.InputHTMLAttributes<HTMLElement> {
     tabIndex?: number,
     disabled?: boolean,
     className?: string,
-    onClick(e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void;
+    onClick(e?: React.MouseEvent<Element> | React.KeyboardEvent<Element>): void;
 };
 
-interface IAccessibleButtonProps extends React.InputHTMLAttributes<HTMLElement> {
-    ref?: React.Ref<HTMLElement>,
+interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
+    ref?: React.Ref<Element>,
 }
 
 AccessibleButton.defaultProps = {

From d6a532040ec60bc2e752703f98276f1b1d92a602 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 8 Jun 2020 16:57:39 +0100
Subject: [PATCH 3/7] lint

---
 src/components/views/elements/AccessibleButton.tsx | 2 +-
 src/components/views/elements/ToggleSwitch.tsx     | 2 +-
 src/components/views/rooms/RoomSublist2.tsx        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index 6dcadaf63f..ecd4847d0d 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -109,7 +109,7 @@ interface IProps extends React.InputHTMLAttributes<Element> {
     tabIndex?: number,
     disabled?: boolean,
     className?: string,
-    onClick(e?: React.MouseEvent<Element> | React.KeyboardEvent<Element>): void;
+    onClick?(e?: React.MouseEvent<Element> | React.KeyboardEvent<Element>): void;
 };
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
diff --git a/src/components/views/elements/ToggleSwitch.tsx b/src/components/views/elements/ToggleSwitch.tsx
index 4cb2fa1ef1..902538052b 100644
--- a/src/components/views/elements/ToggleSwitch.tsx
+++ b/src/components/views/elements/ToggleSwitch.tsx
@@ -20,7 +20,7 @@ import classNames from "classnames";
 import * as sdk from "../../../index";
 
 // Controlled Toggle Switch element, written with Accessibility in mind
-export default ({checked, disabled=false, onChange, ...props}: IProps) => {
+export default ({checked, disabled = false, onChange, ...props}: IProps) => {
     const _onClick = () => {
         if (disabled) return;
         onChange(!checked);
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index d3bb19729d..590c38931e 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -182,7 +182,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                                 tabIndex={tabIndex}
                                 className={"mx_RoomSubList_label"}
                                 role="treeitem"
-                                aria-level="1"
+                                aria-level={1}
                             >
                                 {chevron}
                                 <span>{this.props.label}</span>

From bd58f6ea7bfe77decb86f20bcfa5b696a6240cdc Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Mon, 8 Jun 2020 17:38:07 +0100
Subject: [PATCH 4/7] Hide checkbox on dark backgrounds

---
 res/css/views/elements/_StyledCheckbox.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/res/css/views/elements/_StyledCheckbox.scss b/res/css/views/elements/_StyledCheckbox.scss
index 14081f1e99..9cb82349ca 100644
--- a/res/css/views/elements/_StyledCheckbox.scss
+++ b/res/css/views/elements/_StyledCheckbox.scss
@@ -48,6 +48,8 @@ limitations under the License.
             border-radius: $border-radius;
 
             img {
+                display: none;
+
                 height: 100%;
                 width: 100%;
                 filter: invert(100%);
@@ -57,6 +59,10 @@ limitations under the License.
         &:checked + label > .mx_Checkbox_background {
             background: $accent-color;
             border-color: $accent-color;
+
+            img {
+                display: block;
+            }
         }
 
         & + label > *:not(.mx_Checkbox_background) {

From 04d91ae0af4bfb6e04090ad75f09ef562da3bbfc Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 10 Jun 2020 14:11:36 +0100
Subject: [PATCH 5/7] Fix code review issues

- interfaces go to the top
- fix comma conflation
- value no generic
- optionalised props
- line lints
---
 .../views/elements/AccessibleButton.tsx       | 147 +++++++++---------
 .../views/elements/SettingsFlag.tsx           |  13 +-
 .../views/elements/ToggleSwitch.tsx           |  24 +--
 3 files changed, 91 insertions(+), 93 deletions(-)

diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index ecd4847d0d..ec8e1b250a 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -17,79 +17,7 @@
 import React from 'react';
 
 import {Key} from '../../../Keyboard';
-
-/**
- * AccessibleButton is a generic wrapper for any element that should be treated
- * as a button.  Identifies the element as a button, setting proper tab
- * indexing and keyboard activation behavior.
- *
- * @param {Object} props  react element properties
- * @returns {Object} rendered react
- */
-export default function AccessibleButton({
-    element,
-    onClick,
-    children,
-    kind,
-    disabled,
-    inputRef,
-    className,
-    ...restProps
-}: IProps) {
-
-    const newProps: IAccessibleButtonProps = restProps;
-    if (!disabled) {
-        newProps.onClick = onClick,
-        // We need to consume enter onKeyDown and space onKeyUp
-        // otherwise we are risking also activating other keyboard focusable elements
-        // that might receive focus as a result of the AccessibleButtonClick action
-        // It's because we are using html buttons at a few places e.g. inside dialogs
-        // And divs which we report as role button to assistive technologies.
-        // Browsers handle space and enter keypresses differently and we are only adjusting to the
-        // inconsistencies here
-        newProps.onKeyDown = (e) => {
-            if (e.key === Key.ENTER) {
-                e.stopPropagation();
-                e.preventDefault();
-                return onClick(e);
-            }
-            if (e.key === Key.SPACE) {
-                e.stopPropagation();
-                e.preventDefault();
-            }
-        },
-        newProps.onKeyUp = (e) => {
-            if (e.key === Key.SPACE) {
-                e.stopPropagation();
-                e.preventDefault();
-                return onClick(e);
-            }
-            if (e.key === Key.ENTER) {
-                e.stopPropagation();
-                e.preventDefault();
-            }
-        }
-    }
-
-    // Pass through the ref - used for keyboard shortcut access to some buttons
-    newProps.ref = inputRef;
-
-    newProps.className = (className ? className + " " : "") + "mx_AccessibleButton";
-
-    if (kind) {
-        // We apply a hasKind class to maintain backwards compatibility with
-        // buttons which might not know about kind and break
-        newProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
-    }
-
-    if (disabled) {
-        newProps.className += " mx_AccessibleButton_disabled";
-        newProps["aria-disabled"] = true;
-    }
-
-    // React.createElement expects InputHTMLAttributes
-    return React.createElement(element, restProps, children);
-}
+import classnames from 'classnames';
 
 /**
  * children: React's magic prop. Represents all children given to the element.
@@ -116,6 +44,79 @@ interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
     ref?: React.Ref<Element>,
 }
 
+/**
+ * AccessibleButton is a generic wrapper for any element that should be treated
+ * as a button.  Identifies the element as a button, setting proper tab
+ * indexing and keyboard activation behavior.
+ *
+ * @param {Object} props  react element properties
+ * @returns {Object} rendered react
+ */
+export default function AccessibleButton({
+    element,
+    onClick,
+    children,
+    kind,
+    disabled,
+    inputRef,
+    className,
+    ...restProps
+}: IProps) {
+
+    const newProps: IAccessibleButtonProps = restProps;
+    if (!disabled) {
+        newProps.onClick = onClick;
+        // We need to consume enter onKeyDown and space onKeyUp
+        // otherwise we are risking also activating other keyboard focusable elements
+        // that might receive focus as a result of the AccessibleButtonClick action
+        // It's because we are using html buttons at a few places e.g. inside dialogs
+        // And divs which we report as role button to assistive technologies.
+        // Browsers handle space and enter keypresses differently and we are only adjusting to the
+        // inconsistencies here
+        newProps.onKeyDown = (e) => {
+            if (e.key === Key.ENTER) {
+                e.stopPropagation();
+                e.preventDefault();
+                return onClick(e);
+            }
+            if (e.key === Key.SPACE) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+        newProps.onKeyUp = (e) => {
+            if (e.key === Key.SPACE) {
+                e.stopPropagation();
+                e.preventDefault();
+                return onClick(e);
+            }
+            if (e.key === Key.ENTER) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+    }
+
+    // Pass through the ref - used for keyboard shortcut access to some buttons
+    newProps.ref = inputRef;
+
+    newProps.className = classnames("mx_AccessibleButton", className);
+
+    if (kind) {
+        // We apply a hasKind class to maintain backwards compatibility with
+        // buttons which might not know about kind and break
+        newProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
+    }
+
+    if (disabled) {
+        newProps.className += " mx_AccessibleButton_disabled";
+        newProps["aria-disabled"] = true;
+    }
+
+    // React.createElement expects InputHTMLAttributes
+    return React.createElement(element, restProps, children);
+}
+
 AccessibleButton.defaultProps = {
     element: 'div',
     role: 'button',
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index 2ae9bc3d87..ac11e080f6 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -16,31 +16,28 @@ limitations under the License.
 */
 
 import React from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
 import ToggleSwitch from "./ToggleSwitch";
 import StyledCheckbox from "./StyledCheckbox";
 
 interface IProps {
+    // The setting must be a boolean
     name: string,
     level: string,
     roomId?: string, // for per-room settings
     label?: string, // untranslated
-    isExplicit: boolean,
+    isExplicit?: boolean,
     // XXX: once design replaces all toggles make this the default
     useCheckbox?: boolean,
-    onChange(checked: boolean): void,
+    onChange?(checked: boolean): void,
 }
 
 interface IState {
-    // XXX: make this generic when the settings store is typed
-    value: any;
+    value: boolean;
 }
 
 export default class SettingsFlag extends React.Component<IProps, IState> {
-
     constructor(props: IProps) {
         super(props);
 
@@ -64,7 +61,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
         this.onChange(e.target.checked);
     }
 
-    private save = (val?: any): void => {
+    private save = (val?: boolean): void => {
         return SettingsStore.setValue(
             this.props.name,
             this.props.roomId,
diff --git a/src/components/views/elements/ToggleSwitch.tsx b/src/components/views/elements/ToggleSwitch.tsx
index 902538052b..9d092c58a7 100644
--- a/src/components/views/elements/ToggleSwitch.tsx
+++ b/src/components/views/elements/ToggleSwitch.tsx
@@ -15,10 +15,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { EventHandler } from "react";
+import React from "react";
 import classNames from "classnames";
 import * as sdk from "../../../index";
 
+interface IProps {
+    // Whether or not this toggle is in the 'on' position.
+    checked: boolean,
+
+    // Whether or not the user can interact with the switch
+    disabled: boolean,
+
+    // Called when the checked state changes. First argument will be the new state.
+    onChange(checked: boolean): void,
+};
+
 // Controlled Toggle Switch element, written with Accessibility in mind
 export default ({checked, disabled = false, onChange, ...props}: IProps) => {
     const _onClick = () => {
@@ -45,14 +56,3 @@ export default ({checked, disabled = false, onChange, ...props}: IProps) => {
         </AccessibleButton>
     );
 };
-
-interface IProps {
-    // Whether or not this toggle is in the 'on' position.
-    checked: boolean,
-
-    // Whether or not the user can interact with the switch
-    disabled: boolean,
-
-    // Called when the checked state changes. First argument will be the new state.
-    onChange(checked: boolean): void,
-};

From 52c7577972631bfd02af02762cb09a01de1627f6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 10 Jun 2020 15:57:28 +0100
Subject: [PATCH 6/7] Clean up interfaces and classname

---
 .../views/elements/AccessibleButton.tsx       | 34 +++++++++----------
 .../views/elements/SettingsFlag.tsx           | 14 ++++----
 .../views/elements/ToggleSwitch.tsx           |  6 ++--
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index ec8e1b250a..363a82b9fb 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -26,22 +26,22 @@ import classnames from 'classnames';
  *           implemented exactly like a normal onClick handler.
  */
 interface IProps extends React.InputHTMLAttributes<Element> {
-    inputRef?: React.Ref<Element>,
+    inputRef?: React.Ref<Element>;
     element?: string;
     // The kind of button, similar to how Bootstrap works.
     // See available classes for AccessibleButton for options.
-    kind?: string,
+    kind?: string;
     // The ARIA role
-    role?: string,
+    role?: string;
     // The tabIndex
-    tabIndex?: number,
-    disabled?: boolean,
-    className?: string,
+    tabIndex?: number;
+    disabled?: boolean;
+    className?: string;
     onClick?(e?: React.MouseEvent<Element> | React.KeyboardEvent<Element>): void;
 };
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
-    ref?: React.Ref<Element>,
+    ref?: React.Ref<Element>;
 }
 
 /**
@@ -100,18 +100,16 @@ export default function AccessibleButton({
     // Pass through the ref - used for keyboard shortcut access to some buttons
     newProps.ref = inputRef;
 
-    newProps.className = classnames("mx_AccessibleButton", className);
-
-    if (kind) {
-        // We apply a hasKind class to maintain backwards compatibility with
-        // buttons which might not know about kind and break
-        newProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
-    }
-
-    if (disabled) {
-        newProps.className += " mx_AccessibleButton_disabled";
-        newProps["aria-disabled"] = true;
+    let classNameBooleans = {
+        "mx_AccessibleButton_hasKind": kind,
+        "mx_AccessibleButton_disabled": disabled,
     }
+    classNameBooleans["mx_AccessibleButton_kind_" + kind] = kind;
+    newProps.className = classnames(
+        "mx_AccessibleButton",
+        className,
+        classNameBooleans,
+    );
 
     // React.createElement expects InputHTMLAttributes
     return React.createElement(element, restProps, children);
diff --git a/src/components/views/elements/SettingsFlag.tsx b/src/components/views/elements/SettingsFlag.tsx
index ac11e080f6..bda15ebaab 100644
--- a/src/components/views/elements/SettingsFlag.tsx
+++ b/src/components/views/elements/SettingsFlag.tsx
@@ -23,14 +23,14 @@ import StyledCheckbox from "./StyledCheckbox";
 
 interface IProps {
     // The setting must be a boolean
-    name: string,
-    level: string,
-    roomId?: string, // for per-room settings
-    label?: string, // untranslated
-    isExplicit?: boolean,
+    name: string;
+    level: string;
+    roomId?: string; // for per-room settings
+    label?: string; // untranslated
+    isExplicit?: boolean;
     // XXX: once design replaces all toggles make this the default
-    useCheckbox?: boolean,
-    onChange?(checked: boolean): void,
+    useCheckbox?: boolean;
+    onChange?(checked: boolean): void;
 }
 
 interface IState {
diff --git a/src/components/views/elements/ToggleSwitch.tsx b/src/components/views/elements/ToggleSwitch.tsx
index 9d092c58a7..7b690899ac 100644
--- a/src/components/views/elements/ToggleSwitch.tsx
+++ b/src/components/views/elements/ToggleSwitch.tsx
@@ -21,13 +21,13 @@ import * as sdk from "../../../index";
 
 interface IProps {
     // Whether or not this toggle is in the 'on' position.
-    checked: boolean,
+    checked: boolean;
 
     // Whether or not the user can interact with the switch
-    disabled: boolean,
+    disabled: boolean;
 
     // Called when the checked state changes. First argument will be the new state.
-    onChange(checked: boolean): void,
+    onChange(checked: boolean): void;
 };
 
 // Controlled Toggle Switch element, written with Accessibility in mind

From 737fc46b87846eb0cc3ecbe49fbdd4f3f15a57ee Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 10 Jun 2020 16:48:34 +0100
Subject: [PATCH 7/7] Inline kind classnames

---
 src/components/views/elements/AccessibleButton.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index 363a82b9fb..3a542387c5 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -100,15 +100,14 @@ export default function AccessibleButton({
     // Pass through the ref - used for keyboard shortcut access to some buttons
     newProps.ref = inputRef;
 
-    let classNameBooleans = {
-        "mx_AccessibleButton_hasKind": kind,
-        "mx_AccessibleButton_disabled": disabled,
-    }
-    classNameBooleans["mx_AccessibleButton_kind_" + kind] = kind;
     newProps.className = classnames(
         "mx_AccessibleButton",
         className,
-        classNameBooleans,
+        {
+            "mx_AccessibleButton_hasKind": kind,
+            [`mx_AccessibleButton_kind_${kind}`]: kind,
+            "mx_AccessibleButton_disabled": disabled,
+        },
     );
 
     // React.createElement expects InputHTMLAttributes