imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make FormatButton use AccessibleButtons

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-03-29 20:07:32 +01:00
parent 7bdd22ae03
commit b2d905ef2c
1 changed files with 9 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/rooms/MessageComposerFormatBar.js
View file

@ -19,12 +19,13 @@ import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import classNames from 'classnames'; import classNames from 'classnames';
import AccessibleButton from "../elements/AccessibleButton";
export default class MessageComposerFormatBar extends React.PureComponent { export default class MessageComposerFormatBar extends React.PureComponent {
static propTypes = { static propTypes = {
onAction: PropTypes.func.isRequired, onAction: PropTypes.func.isRequired,
shortcuts: PropTypes.object.isRequired, shortcuts: PropTypes.object.isRequired,
} };
constructor(props) { constructor(props) {
super(props); super(props);
@ -64,7 +65,7 @@ class FormatButton extends React.PureComponent {
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
shortcut: PropTypes.string, shortcut: PropTypes.string,
visible: PropTypes.bool, visible: PropTypes.bool,
} };
render() { render() {
const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip'); const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
@ -82,11 +83,12 @@ class FormatButton extends React.PureComponent {
return ( return (
<InteractiveTooltip content={tooltipContent} forceHidden={!this.props.visible}> <InteractiveTooltip content={tooltipContent} forceHidden={!this.props.visible}>
<span aria-label={this.props.label} <AccessibleButton
as="span"
role="button" role="button"
onClick={this.props.onClick} onClick={this.props.onClick}
className={className}> aria-label={this.props.label}
</span> className={className} />
</InteractiveTooltip> </InteractiveTooltip>
); );
} }