From 8ed336ea08ea06aac0e87ce6b37181a4ba80e813 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 30 Jun 2019 10:58:59 +0100
Subject: [PATCH 1/3] Add AccessibleTooltipButton and use it for RoomSubList
 buttons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/RoomSubList.js      |  7 ++-
 .../views/elements/AccessibleTooltipButton.js | 63 +++++++++++++++++++
 2 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/components/views/elements/AccessibleTooltipButton.js

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 9ca9d3261d..8445da343a 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -194,6 +194,7 @@ const RoomSubList = React.createClass({
 
     _getHeaderJsx: function(isCollapsed) {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const AccessibleTooltipButton = sdk.getComponent('elements.AccessibleTooltipButton');
         const subListNotifications = !this.props.isInvite ?
             RoomNotifs.aggregateNotificationCount(this.props.list) :
             {count: 0, highlight: true};
@@ -234,10 +235,10 @@ const RoomSubList = React.createClass({
         let addRoomButton;
         if (this.props.onAddRoom) {
             addRoomButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     onClick={ this.props.onAddRoom }
                     className="mx_RoomSubList_addRoom"
-                    title={this.props.addRoomLabel || _t("Add room")}
+                    tooltip={this.props.addRoomLabel || _t("Add room")}
                 />
             );
         }
@@ -250,7 +251,7 @@ const RoomSubList = React.createClass({
                 'mx_RoomSubList_chevronRight': isCollapsed,
                 'mx_RoomSubList_chevronDown': !isCollapsed,
             });
-            chevron = (<div className={chevronClasses}></div>);
+            chevron = (<div className={chevronClasses} />);
         }
 
         const tabindex = this.props.isFiltered ? "0" : "-1";
diff --git a/src/components/views/elements/AccessibleTooltipButton.js b/src/components/views/elements/AccessibleTooltipButton.js
new file mode 100644
index 0000000000..0b632417d6
--- /dev/null
+++ b/src/components/views/elements/AccessibleTooltipButton.js
@@ -0,0 +1,63 @@
+/*
+ Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import AccessibleButton from "./AccessibleButton";
+import sdk from "../../../index";
+
+export default class AccessibleTooltipButton extends React.PureComponent {
+    static propTypes = {
+        ...AccessibleButton.propTypes,
+        tooltip: PropTypes.string.isRequired,
+    };
+
+    state = {
+        hover: false,
+    };
+
+    onMouseOver = () => {
+        this.setState({
+            hover: true,
+        });
+    };
+
+    onMouseOut = () => {
+        this.setState({
+            hover: false,
+        });
+    };
+
+    render() {
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
+        const {tooltip, ...props} = this.props;
+
+        const tip = this.state.hover ? <Tooltip
+            className="mx_AccessibleTooltipButton_container"
+            tooltipClassName="mx_AccessibleTooltipButton_tooltip"
+            label={tooltip}
+        /> : <div />;
+        return (
+            <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                { tip }
+            </AccessibleButton>
+        );
+    }
+}

From 46a6043e9bc07f22065a09b19716a751881a92f1 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 30 Jun 2019 11:00:21 +0100
Subject: [PATCH 2/3] Use title prop instead to minimize changes

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/RoomSubList.js                 | 2 +-
 src/components/views/elements/AccessibleTooltipButton.js | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 8445da343a..fa74180a2c 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -238,7 +238,7 @@ const RoomSubList = React.createClass({
                 <AccessibleTooltipButton
                     onClick={ this.props.onAddRoom }
                     className="mx_RoomSubList_addRoom"
-                    tooltip={this.props.addRoomLabel || _t("Add room")}
+                    title={this.props.addRoomLabel || _t("Add room")}
                 />
             );
         }
diff --git a/src/components/views/elements/AccessibleTooltipButton.js b/src/components/views/elements/AccessibleTooltipButton.js
index 0b632417d6..6f7913a3cd 100644
--- a/src/components/views/elements/AccessibleTooltipButton.js
+++ b/src/components/views/elements/AccessibleTooltipButton.js
@@ -24,7 +24,8 @@ import sdk from "../../../index";
 export default class AccessibleTooltipButton extends React.PureComponent {
     static propTypes = {
         ...AccessibleButton.propTypes,
-        tooltip: PropTypes.string.isRequired,
+        // The tooltip to render on hover
+        title: PropTypes.string.isRequired,
     };
 
     state = {
@@ -47,12 +48,12 @@ export default class AccessibleTooltipButton extends React.PureComponent {
         const Tooltip = sdk.getComponent("elements.Tooltip");
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
-        const {tooltip, ...props} = this.props;
+        const {title, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
             tooltipClassName="mx_AccessibleTooltipButton_tooltip"
-            label={tooltip}
+            label={title}
         /> : <div />;
         return (
             <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>

From 904a096f7209594c9712ad1d9c32af8525c988bd Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 2 Jul 2019 10:28:36 +0100
Subject: [PATCH 3/3] Update AccessibleTooltipButton.js

---
 src/components/views/elements/AccessibleTooltipButton.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/views/elements/AccessibleTooltipButton.js b/src/components/views/elements/AccessibleTooltipButton.js
index 6f7913a3cd..c9a08f6a47 100644
--- a/src/components/views/elements/AccessibleTooltipButton.js
+++ b/src/components/views/elements/AccessibleTooltipButton.js
@@ -14,7 +14,6 @@
  limitations under the License.
  */
 
-
 import React from 'react';
 import PropTypes from 'prop-types';