haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This reverts commit 953f838a2a.
This commit is contained in:
yanas 2020-04-10 15:26:48 -05:00
parent 6ce1eaba24
commit 638fdf0370
3 changed files with 6 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
react/features/base/toolbox/components/AbstractButton.js
View File

@ -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
* 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;

75
react/features/base/toolbox/components/ToolboxItem.web.js
View File

@ -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,
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 = (

69
react/features/toolbox/components/web/ToolbarButton.js
View File

@ -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 }
onKeyDown = { this._onKeyDown }
onKeyUp = { this._onKeyUp }
role = 'button'
tabIndex = { 0 }>
onClick = { this.props.onClick }>
{ this.props.tooltip
? <Tooltip
content = { this.props.tooltip }