Add tooltips to minimized roomlist2 tiles and sublists

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/rooms/RoomSublist2.tsx

@@ -28,7 +28,7 @@ import { ListLayout } from "../../../stores/room-list/ListLayout";
 import {
     ChevronFace,
     ContextMenu,
-    ContextMenuButton,
+    ContextMenuTooltipButton,
     StyledMenuItemCheckbox,
     StyledMenuItemRadio,
 } from "../../structures/ContextMenu";
@@ -499,10 +499,10 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
 
         return (
             <React.Fragment>
-                <ContextMenuButton
+                <ContextMenuTooltipButton
                     className="mx_RoomSublist2_menuButton"
                     onClick={this.onOpenMenuClick}
-                    label={_t("List options")}
+                    title={_t("List options")}
                     isExpanded={!!this.state.contextMenuPosition}
                 />
                 {contextMenu}

src/components/views/rooms/RoomTile2.tsx

@@ -29,7 +29,7 @@ import { _t } from "../../../languageHandler";
 import {
     ChevronFace,
     ContextMenu,
-    ContextMenuButton,
+    ContextMenuTooltipButton,
     MenuItemRadio,
     MenuItemCheckbox,
     MenuItem,
@@ -54,6 +54,7 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
 import {ActionPayload} from "../../../dispatcher/payloads";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 // TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
 
@@ -373,10 +374,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
 
         return (
             <React.Fragment>
-                <ContextMenuButton
+                <ContextMenuTooltipButton
                     className={classes}
                     onClick={this.onNotificationsMenuOpenClick}
-                    label={_t("Notification options")}
+                    title={_t("Notification options")}
                     isExpanded={!!this.state.notificationsMenuPosition}
                     tabIndex={isActive ? 0 : -1}
                 />
@@ -441,10 +442,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
 
         return (
             <React.Fragment>
-                <ContextMenuButton
+                <ContextMenuTooltipButton
                     className="mx_RoomTile2_menuButton"
                     onClick={this.onGeneralMenuOpenClick}
-                    label={_t("Room options")}
+                    title={_t("Room options")}
                     isExpanded={!!this.state.generalMenuPosition}
                 />
                 {contextMenu}
@@ -537,11 +538,16 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
             ariaDescribedBy = messagePreviewId(this.props.room.roomId);
         }
 
+        let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
+        if (this.props.isMinimized) {
+            Button = AccessibleTooltipButton;
+        }
+
         return (
             <React.Fragment>
                 <RovingTabIndexWrapper inputRef={this.roomTileRef}>
                     {({onFocus, isActive, ref}) =>
-                        <AccessibleButton
+                        <Button
                             onFocus={onFocus}
                             tabIndex={isActive ? 0 : -1}
                             inputRef={ref}
@@ -554,13 +560,14 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
                             aria-label={ariaLabel}
                             aria-selected={this.state.selected}
                             aria-describedby={ariaDescribedBy}
+                            title={this.props.isMinimized ? name : undefined}
                         >
                             {roomAvatar}
                             {nameContainer}
                             {badge}
                             {this.renderGeneralMenu()}
                             {this.renderNotificationsMenu(isActive)}
-                        </AccessibleButton>
+                        </Button>
                     }
                 </RovingTabIndexWrapper>
             </React.Fragment>

src/components/views/rooms/TemporaryTile.tsx

@@ -16,7 +16,11 @@ limitations under the License.
 
 import React from "react";
 import classNames from "classnames";
-import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
+import {
+    RovingAccessibleButton,
+    RovingAccessibleTooltipButton,
+    RovingTabIndexWrapper
+} from "../../../accessibility/RovingTabIndex";
 import AccessibleButton from "../../views/elements/AccessibleButton";
 import NotificationBadge from "./NotificationBadge";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
@@ -86,30 +90,29 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
         );
         if (this.props.isMinimized) nameContainer = null;
 
+        let Button = RovingAccessibleButton;
+        if (this.props.isMinimized) {
+            Button = RovingAccessibleTooltipButton;
+        }
+
         return (
             <React.Fragment>
-                <RovingTabIndexWrapper>
-                    {({onFocus, isActive, ref}) =>
-                        <AccessibleButton
-                            onFocus={onFocus}
-                            tabIndex={isActive ? 0 : -1}
-                            inputRef={ref}
-                            className={classes}
-                            onMouseEnter={this.onTileMouseEnter}
-                            onMouseLeave={this.onTileMouseLeave}
-                            onClick={this.props.onClick}
-                            role="treeitem"
-                        >
-                            <div className="mx_RoomTile2_avatarContainer">
-                                {this.props.avatar}
-                            </div>
-                            {nameContainer}
-                            <div className="mx_RoomTile2_badgeContainer">
-                                {badge}
-                            </div>
-                        </AccessibleButton>
-                    }
-                </RovingTabIndexWrapper>
+                <Button
+                    className={classes}
+                    onMouseEnter={this.onTileMouseEnter}
+                    onMouseLeave={this.onTileMouseLeave}
+                    onClick={this.props.onClick}
+                    role="treeitem"
+                    title={this.props.isMinimized ? name : undefined}
+                >
+                    <div className="mx_RoomTile2_avatarContainer">
+                        {this.props.avatar}
+                    </div>
+                    {nameContainer}
+                    <div className="mx_RoomTile2_badgeContainer">
+                        {badge}
+                    </div>
+                </Button>
             </React.Fragment>
         );
     }