OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add tooltips to minimized roomlist2 tiles and sublists 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-17 18:16:00 +01:00
parent efd0bd3d00
commit 23fa952905
3 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/views/rooms/RoomSublist2.tsx
View File

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

21
src/components/views/rooms/RoomTile2.tsx
View File

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

49
src/components/views/rooms/TemporaryTile.tsx
View File

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