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