From 638fdf03708604fdc2e97ab612613550adbfd922 Mon Sep 17 00:00:00 2001 From: yanas Date: Fri, 10 Apr 2020 15:26:48 -0500 Subject: [PATCH] Revert "Improve accessibility of Buttons in Webapp (#5432)" This reverts commit 953f838a2a5c3e82e7e619a4e7e95436885d6d69. --- .../base/toolbox/components/AbstractButton.js | 7 +- .../toolbox/components/ToolboxItem.web.js | 75 +------------------ .../toolbox/components/web/ToolbarButton.js | 69 +---------------- 3 files changed, 6 insertions(+), 145 deletions(-) diff --git a/react/features/base/toolbox/components/AbstractButton.js b/react/features/base/toolbox/components/AbstractButton.js index c0af079d9..ded2269d5 100644 --- a/react/features/base/toolbox/components/AbstractButton.js +++ b/react/features/base/toolbox/components/AbstractButton.js @@ -230,14 +230,13 @@ export default class AbstractButton extends Component { /** * Helper function to be implemented by subclasses, which must return a - * {@code boolean} value indicating if this button is toggled or not or - * undefined if the button is not toggleable. + * {@code boolean} value indicating if this button is toggled or not. * * @protected - * @returns {?boolean} + * @returns {boolean} */ _isToggled() { - return undefined; + return false; } _onClick: (*) => void; diff --git a/react/features/base/toolbox/components/ToolboxItem.web.js b/react/features/base/toolbox/components/ToolboxItem.web.js index 73ff46e76..7fdd225c0 100644 --- a/react/features/base/toolbox/components/ToolboxItem.web.js +++ b/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 { - /** - * 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 { elementAfter, onClick, showLabel, - tooltipPosition, - toggled + tooltipPosition } = 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, - onKeyDown: this._onKeyDown, - onKeyUp: this._onKeyUp, - tabIndex: 0, - role: 'button' + onClick: disabled ? undefined : onClick }; - const elementType = showLabel ? 'li' : 'div'; const useTooltip = this.tooltip && this.tooltip.length > 0; let children = ( diff --git a/react/features/toolbox/components/web/ToolbarButton.js b/react/features/toolbox/components/web/ToolbarButton.js index c02a35543..5b779d530 100644 --- a/react/features/toolbox/components/web/ToolbarButton.js +++ b/react/features/toolbox/components/web/ToolbarButton.js @@ -41,68 +41,6 @@ class ToolbarButton extends AbstractToolbarButton { 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 { return (
+ onClick = { this.props.onClick }> { this.props.tooltip ?