Merge pull request #3165 from matrix-org/t3chguy/tooltip_accessible_b…

…utton

Add AccessibleTooltipButton and use it for RoomSubList buttons

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,7 +235,7 @@ 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")}
@@ -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";

src/components/views/elements/AccessibleTooltipButton.js

@@ -0,0 +1,63 @@
+/*
+ Copyright 2019 Michael Telatynski <[email protected]>
+
+ 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,
+        // The tooltip to render on hover
+        title: 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 {title, ...props} = this.props;
+
+        const tip = this.state.hover ? <Tooltip
+            className="mx_AccessibleTooltipButton_container"
+            tooltipClassName="mx_AccessibleTooltipButton_tooltip"
+            label={title}
+        /> : <div />;
+        return (
+            <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                { tip }
+            </AccessibleButton>
+        );
+    }
+}