From 778ebe63ffb9b21e680697323d319e03c39b8095 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20V=C3=A1gner?= <pvdeejay@gmail.com>
Date: Sat, 31 Mar 2018 17:42:10 +0200
Subject: [PATCH] TopUnreadMessagesBar: turn clickables into accessible buttons
 and fix over verbosity for the accessible name.

---
 .../views/rooms/TopUnreadMessagesBar.js          | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/views/rooms/TopUnreadMessagesBar.js b/src/components/views/rooms/TopUnreadMessagesBar.js
index 85a5d3863e..b2648e55a9 100644
--- a/src/components/views/rooms/TopUnreadMessagesBar.js
+++ b/src/components/views/rooms/TopUnreadMessagesBar.js
@@ -20,6 +20,7 @@ limitations under the License.
 const React = require('react');
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
 const sdk = require('../../../index');
 
 module.exports = React.createClass({
@@ -33,14 +34,19 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_TopUnreadMessagesBar">
-                <div className="mx_TopUnreadMessagesBar_scrollUp"
+                <AccessibleButton className="mx_TopUnreadMessagesBar_scrollUp"
                         onClick={this.props.onScrollUpClick}>
                     <img src="img/scrollto.svg" width="24" height="24"
-                        alt={_t('Scroll to unread messages')}
-                        title={_t('Scroll to unread messages')} />
+                        // No point on setting up non empty alt on this image
+                        // as it only complements the text which follows it.
+                        alt=""
+                        title={_t('Scroll to unread messages')}
+                        // In order not to use this title attribute for accessible name
+                        // calculation of the parent button set the role presentation
+                        role="presentation" />
                     { _t("Jump to first unread message.") }
-                </div>
-                <img className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
+                </AccessibleButton>
+                <AccessibleButton element='img' className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
                     src="img/cancel.svg" width="18" height="18"
                     alt={_t("Close")} title={_t("Close")}
                     onClick={this.props.onCloseClick} />