Fix code review issues

- interfaces go to the top
- fix comma conflation
- value no generic
- optionalised props
- line lints

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',