From 0bd68ce068a4155f9ce36e9fec1aa7517f51e7ef Mon Sep 17 00:00:00 2001
From: Stefan Parviainen <pafcu@iki.fi>
Date: Tue, 21 Nov 2017 09:18:59 +0100
Subject: [PATCH] Add some aria-labels to RightPanel

Signed-off-by: Stefan Parviainen <pafcu@iki.fi>
---
 src/components/structures/RightPanel.js | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index 003c9e88c..2bfe3fe58 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -49,13 +49,19 @@ class HeaderButton extends React.Component {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
-        return <AccessibleButton className="mx_RightPanel_headerButton" onClick={this.onClick} >
-            <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>;
+        return <AccessibleButton
+            aria-label={this.props.title}
+            title={this.props.title}
+            className="mx_RightPanel_headerButton"
+            onClick={this.onClick} >
+
+                <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,
     // The parameters to track the click event
     analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+    // Button title
+    title: PropTypes.string.isRequired,
 };
 
 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.
             headerButtons.push(
                 <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"/>
                 </div>,