Sprinkle and consolidate some tooltips

res/css/_components.scss

@@ -108,7 +108,6 @@
 @import "./views/elements/_IconButton.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InlineSpinner.scss";
-@import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";

res/css/views/elements/_Tooltip.scss

@@ -51,21 +51,27 @@ limitations under the License.
 .mx_Tooltip {
     display: none;
     position: fixed;
-    border: 1px solid $menu-border-color;
     border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
-    background-color: $menu-bg-color;
     z-index: 6000; // Higher than context menu so tooltips can be used everywhere
     padding: 10px;
     pointer-events: none;
     line-height: $font-14px;
     font-size: $font-12px;
     font-weight: 500;
-    color: $primary-fg-color;
     max-width: 200px;
     word-break: break-word;
     margin-right: 50px;
 
+    background-color: $inverted-bg-color;
+    color: $accent-fg-color;
+    border: 0;
+    text-align: center;
+
+    .mx_Tooltip_chevron {
+        display: none;
+    }
+
     &.mx_Tooltip_visible {
         animation: mx_fadein 0.2s forwards;
     }
@@ -75,19 +81,6 @@ limitations under the License.
     }
 }
 
-.mx_Tooltip_timeline {
-    &.mx_Tooltip {
-        background-color: $inverted-bg-color;
-        color: $accent-fg-color;
-        border: 0;
-        text-align: center;
-
-        .mx_Tooltip_chevron {
-            display: none;
-        }
-    }
-}
-
 .mx_Tooltip_title {
     font-weight: 600;
 }

res/css/views/rooms/_RoomBreadcrumbs2.scss

@@ -55,14 +55,4 @@ limitations under the License.
 .mx_RoomBreadcrumbs2_Tooltip {
     margin-left: -42px;
     margin-top: -42px;
-
-    &.mx_Tooltip {
-        background-color: $inverted-bg-color;
-        color: $accent-fg-color;
-        border: 0;
-
-        .mx_Tooltip_chevron {
-            display: none;
-        }
-    }
 }

src/accessibility/context_menu/ContextMenuButton.tsx

@@ -18,9 +18,9 @@ limitations under the License.
 
 import React from "react";
 
-import AccessibleButton, {IProps as IAccessibleButtonProps} from "../../components/views/elements/AccessibleButton";
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
 
-interface IProps extends IAccessibleButtonProps {
+interface IProps extends React.ComponentProps<typeof AccessibleButton> {
     label?: string;
     // whether or not the context menu is currently open
     isExpanded: boolean;

src/accessibility/context_menu/ContextMenuTooltipButton.tsx

@@ -0,0 +1,47 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+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 AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+
+interface IProps extends React.ComponentProps<typeof AccessibleTooltipButton>  {
+    // whether or not the context menu is currently open
+    isExpanded: boolean;
+}
+
+// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
+export const ContextMenuTooltipButton: React.FC<IProps> = ({
+    isExpanded,
+    children,
+    onClick,
+    onContextMenu,
+    ...props
+}) => {
+    return (
+        <AccessibleTooltipButton
+            {...props}
+            onClick={onClick}
+            onContextMenu={onContextMenu || onClick}
+            aria-haspopup={true}
+            aria-expanded={isExpanded}
+        >
+            { children }
+        </AccessibleTooltipButton>
+    );
+};

src/components/structures/ContextMenu.tsx

@@ -461,6 +461,7 @@ export function createMenu(ElementClass, props) {
 
 // re-export the semantic helper components for simplicity
 export {ContextMenuButton} from "../../accessibility/context_menu/ContextMenuButton";
+export {ContextMenuTooltipButton} from "../../accessibility/context_menu/ContextMenuTooltipButton";
 export {MenuGroup} from "../../accessibility/context_menu/MenuGroup";
 export {MenuItem} from "../../accessibility/context_menu/MenuItem";
 export {MenuItemCheckbox} from "../../accessibility/context_menu/MenuItemCheckbox";

src/components/structures/LeftPanel2.tsx

@@ -34,6 +34,7 @@ import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore2";
 import {Key} from "../../Keyboard";
 import IndicatorScrollbar from "../structures/IndicatorScrollbar";
+import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 
 // TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
 
@@ -347,7 +348,7 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
                     onVerticalArrow={this.onKeyDown}
                     onEnter={this.onEnter}
                 />
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className="mx_LeftPanel2_exploreButton"
                     onClick={this.onExplore}
                     title={_t("Explore rooms")}

src/components/views/elements/AccessibleButton.tsx

@@ -27,7 +27,7 @@ export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Elemen
  * onClick:  (required) Event handler for button activation. Should be
  *           implemented exactly like a normal onClick handler.
  */
-export interface IProps extends React.InputHTMLAttributes<Element> {
+interface IProps extends React.InputHTMLAttributes<Element> {
     inputRef?: React.Ref<Element>;
     element?: string;
     // The kind of button, similar to how Bootstrap works.
@@ -118,7 +118,7 @@ export default function AccessibleButton({
 AccessibleButton.defaultProps = {
     element: 'div',
     role: 'button',
-    tabIndex: "0",
+    tabIndex: 0,
 };
 
 AccessibleButton.displayName = "AccessibleButton";

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -19,10 +19,9 @@ import React from 'react';
 import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import {IProps} from "./AccessibleButton";
 import Tooltip from './Tooltip';
 
-interface ITooltipProps extends IProps {
+interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
     title: string;
     tooltip?: React.ReactNode;
     tooltipClassName?: string;