mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-03 20:36:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5661 from pafcu/sidebar-a11y

Browse source 
Add some aria-labels to RightPanel
This commit is contained in:
Matthew Hodgson 2017-11-21 18:47:37 +00:00 committed by GitHub
commit c28d9e5cde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/structures/RightPanel.js
View file

@ -49,13 +49,19 @@ class HeaderButton extends React.Component {
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
return <AccessibleButton className="mx_RightPanel_headerButton" onClick={this.onClick} > return <AccessibleButton
<div className="mx_RightPanel_headerButton_badge"> aria-label={this.props.title}
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> } title={this.props.title}
</div> className="mx_RightPanel_headerButton"
<TintableSvg src={this.props.iconSrc} width="25" height="25"/> onClick={this.onClick} >
{ this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight"></div> : <div/> }
</AccessibleButton>; <div className="mx_RightPanel_headerButton_badge">
{ this.props.badge ? this.props.badge : <span>&nbsp;</span> }
</div>
<TintableSvg src={this.props.iconSrc} width="25" height="25"/>
{ this.props.isHighlighted ? <div className="mx_RightPanel_headerButton_highlight"></div> : <div/> }
</AccessibleButton>;
} }
} }
@ -71,6 +77,9 @@ HeaderButton.propTypes = {
badge: PropTypes.node, badge: PropTypes.node,
// The parameters to track the click event // The parameters to track the click event
analytics: PropTypes.arrayOf(PropTypes.string).isRequired, analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
// Button title
title: PropTypes.string.isRequired,
}; };
module.exports = React.createClass({ module.exports = React.createClass({
@ -329,7 +338,7 @@ module.exports = React.createClass({
// button on these 2 screens or you won't be able to re-expand the panel. // button on these 2 screens or you won't be able to re-expand the panel.
headerButtons.push( headerButtons.push(
<div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton" <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" key="_minimizeButton"
title={ _t("Hide panel") } onClick={ this.onCollapseClick } title={ _t("Hide panel") } aria-label={ _t("Hide panel") } onClick={ this.onCollapseClick }
> >
<TintableSvg src="img/minimise.svg" width="10" height="16"/> <TintableSvg src="img/minimise.svg" width="10" height="16"/>
</div>, </div>,