Revert "Improve accessibility of Buttons in Webapp (#5432)"

This reverts commit 953f838a2a.

react/features/base/toolbox/components/AbstractButton.js

@@ -230,14 +230,13 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
 
     /**
      * Helper function to be implemented by subclasses, which must return a
-     * {@code boolean} value indicating if this button is toggled or not or
+     * {@code boolean} value indicating if this button is toggled or not.
-     * undefined if the button is not toggleable.
      *
      * @protected
-     * @returns {?boolean}
+     * @returns {boolean}
      */
     _isToggled() {
-        return undefined;
+        return false;
     }
 
     _onClick: (*) => void;

react/features/base/toolbox/components/ToolboxItem.web.js

@@ -12,69 +12,6 @@ import type { Props } from './AbstractToolboxItem';
  * Web implementation of {@code AbstractToolboxItem}.
  */
 export default class ToolboxItem extends AbstractToolboxItem<Props> {
-    /**
-     * Initializes a new {@code ToolboxItem} instance.
-     *
-     * @inheritdoc
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this._onKeyDown = this._onKeyDown.bind(this);
-        this._onKeyUp = this._onKeyUp.bind(this);
-    }
-
-    _onKeyDown: (Object) => void;
-
-    /**
-     * Handles 'Enter' key on the button to trigger onClick for accessibility.
-     *
-     * @param {Object} event - The key event.
-     * @private
-     * @returns {void}
-     */
-    _onKeyDown(event) {
-        // If the event coming to the dialog has been subject to preventDefault
-        // we don't handle it here.
-        if (event.defaultPrevented) {
-            return;
-        }
-
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            event.stopPropagation();
-            this.props.onClick();
-        } else if (event.key === ' ') {
-            // Space triggers button onKeyUp but we need to prevent PTT here
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-
-    _onKeyUp: (Object) => void;
-
-    /**
-     * Handles ' ' (Space) key on the button to trigger onClick for
-     * accessibility.
-     *
-     * @param {Object} event - The key event.
-     * @private
-     * @returns {void}
-     */
-    _onKeyUp(event) {
-        // If the event coming to the dialog has been subject to preventDefault
-        // we don't handle it here.
-        if (event.defaultPrevented) {
-            return;
-        }
-
-        if (event.key === ' ') {
-            event.preventDefault();
-            event.stopPropagation();
-            this.props.onClick();
-        }
-    }
-
     /**
      * Handles rendering of the actual item. If the label is being shown, which
      * is controlled with the `showLabel` prop, the item is rendered for its
@@ -90,22 +27,14 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
             elementAfter,
             onClick,
             showLabel,
-            tooltipPosition,
+            tooltipPosition
-            toggled
         } = this.props;
         const className = showLabel ? 'overflow-menu-item' : 'toolbox-button';
         const props = {
-            'aria-pressed': toggled,
-            'aria-disabled': disabled,
             'aria-label': this.accessibilityLabel,
             className: className + (disabled ? ' disabled' : ''),
-            onClick: disabled ? undefined : onClick,
+            onClick: disabled ? undefined : onClick
-            onKeyDown: this._onKeyDown,
-            onKeyUp: this._onKeyUp,
-            tabIndex: 0,
-            role: 'button'
         };
-
         const elementType = showLabel ? 'li' : 'div';
         const useTooltip = this.tooltip && this.tooltip.length > 0;
         let children = (

react/features/toolbox/components/web/ToolbarButton.js

@@ -41,68 +41,6 @@ class ToolbarButton extends AbstractToolbarButton<Props> {
         tooltipPosition: 'top'
     };
 
-    /**
-     * Initializes a new {@code ToolbarButton} instance.
-     *
-     * @inheritdoc
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this._onKeyDown = this._onKeyDown.bind(this);
-        this._onKeyUp = this._onKeyUp.bind(this);
-    }
-
-    _onKeyDown: (Object) => void;
-
-    /**
-     * Handles 'Enter' key on the button to trigger onClick for accessibility.
-     *
-     * @param {Object} event - The key event.
-     * @private
-     * @returns {void}
-     */
-    _onKeyDown(event) {
-        // If the event coming to the dialog has been subject to preventDefault
-        // we don't handle it here.
-        if (event.defaultPrevented) {
-            return;
-        }
-
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            event.stopPropagation();
-            this.props.onClick();
-        } else if (event.key === ' ') {
-            // Space triggers button onKeyUp but we need to prevent default here
-            event.preventDefault();
-        }
-    }
-
-    _onKeyUp: (Object) => void;
-
-    /**
-     * Handles ' '(Space) key on the button to trigger onClick for
-     * accessibility.
-     *
-     * @param {Object} event - The key event.
-     * @private
-     * @returns {void}
-     */
-    _onKeyUp(event) {
-        // If the event coming to the dialog has been subject to preventDefault
-        // we don't handle it here.
-        if (event.defaultPrevented) {
-            return;
-        }
-
-        if (event.key === ' ') {
-            event.preventDefault();
-            event.stopPropagation();
-            this.props.onClick();
-        }
-    }
-
     /**
      * Renders the button of this {@code ToolbarButton}.
      *
@@ -115,13 +53,8 @@ class ToolbarButton extends AbstractToolbarButton<Props> {
         return (
             <div
                 aria-label = { this.props.accessibilityLabel }
-                aria-pressed = { this.props.toggled }
                 className = 'toolbox-button'
-                onClick = { this.props.onClick }
+                onClick = { this.props.onClick }>
-                onKeyDown = { this._onKeyDown }
-                onKeyUp = { this._onKeyUp }
-                role = 'button'
-                tabIndex = { 0 }>
                 { this.props.tooltip
                     ? <Tooltip
                         content = { this.props.tooltip }