Move Settings flag to ts

src/components/views/elements/AccessibleButton.tsx

@@ -0,0 +1,125 @@
+/*
+ Copyright 2016 Jani Mustonen
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+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);
+}
+
+/**
+ * children: React's magic prop. Represents all children given to the element.
+ * element:  (optional) The base element type. "div" by default.
+ * 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>,
+    element?: string;
+    // The kind of button, similar to how Bootstrap works.
+    // See available classes for AccessibleButton for options.
+    kind?: string,
+    // The ARIA role
+    role?: string,
+    // The tabIndex
+    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',
+    tabIndex: "0",
+};
+
+AccessibleButton.displayName = "AccessibleButton";