From caef3c1921b6db19de7ac6c7e88cf7657ea456be Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Tue, 7 May 2024 12:20:46 +0200 Subject: [PATCH] Tooltip: improve accessibility in room (#12493) * Migrate to `AccessibleButton` * Update snapshots * Update snapshots --- ...with-apps-button-not-highlighted-linux.png | Bin 6737 -> 6867 bytes res/css/views/rooms/_RoomBreadcrumbs.pcss | 5 -- .../views/rooms/CollapsibleButton.tsx | 10 +--- .../views/rooms/LegacyRoomHeader.tsx | 44 +++++++++--------- .../views/rooms/PinnedEventTile.tsx | 3 +- .../views/rooms/RoomBreadcrumbs.tsx | 9 ++-- src/components/views/rooms/RoomList.tsx | 4 +- src/components/views/rooms/RoomSublist.tsx | 10 +--- src/components/views/rooms/RoomTile.tsx | 16 ++----- .../views/rooms/VoiceRecordComposerTile.tsx | 6 +-- 10 files changed, 38 insertions(+), 69 deletions(-) diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png index 51fb245f60a2c183b55ade76ccc50b83c0e00e19..498853a97303c07d5340d71a2bf989e9b43e24d3 100644 GIT binary patch literal 6867 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 UY`6=^S1N##oI0pl#ys@D0BR*p3;+NC literal 6737 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 diff --git a/res/css/views/rooms/_RoomBreadcrumbs.pcss b/res/css/views/rooms/_RoomBreadcrumbs.pcss index f502c3f470..73c4b27432 100644 --- a/res/css/views/rooms/_RoomBreadcrumbs.pcss +++ b/res/css/views/rooms/_RoomBreadcrumbs.pcss @@ -49,8 +49,3 @@ limitations under the License. height: 32px; } } - -.mx_RoomBreadcrumbs_Tooltip { - margin-left: -42px; - margin-top: -42px; -} diff --git a/src/components/views/rooms/CollapsibleButton.tsx b/src/components/views/rooms/CollapsibleButton.tsx index c2c658de10..157e7f7a1a 100644 --- a/src/components/views/rooms/CollapsibleButton.tsx +++ b/src/components/views/rooms/CollapsibleButton.tsx @@ -18,7 +18,6 @@ import React, { ComponentProps, useContext } from "react"; import classNames from "classnames"; import AccessibleButton from "../elements/AccessibleButton"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { OverflowMenuContext } from "./MessageComposerButtons"; import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu"; import { Ref } from "../../../accessibility/roving/types"; @@ -43,13 +42,8 @@ export const CollapsibleButton: React.FC = ({ } return ( - + {children} - + ); }; diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index 5fab692046..82080fbd07 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -33,7 +33,6 @@ import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons"; import E2EIcon from "./E2EIcon"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import RoomTopic from "../elements/RoomTopic"; import RoomName from "../elements/RoomName"; import { E2EStatus } from "../../../utils/ShieldUtils"; @@ -68,7 +67,6 @@ import IconizedContextMenu, { } from "../context_menus/IconizedContextMenu"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { SessionDuration } from "../voip/CallDuration"; -import { Alignment } from "../elements/Tooltip"; import RoomCallBanner from "../beacon/RoomCallBanner"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; @@ -111,12 +109,12 @@ const VoiceCallButton: FC = ({ room, busy, setBusy, behavi }, [behavior, room, setBusy]); return ( - ); @@ -237,13 +235,13 @@ const VideoCallButton: FC = ({ room, busy, setBusy, behavi return ( <> - {menu} @@ -442,7 +440,7 @@ const CallLayoutSelector: FC = ({ call }) => { return ( <> - = ({ call }) => { })} onClick={onClick} title={_t("room|header|video_call_ec_change_layout")} - alignment={Alignment.Bottom} + placement="bottom" key="layout" /> {menu} @@ -600,11 +598,11 @@ export default class RoomHeader extends React.Component { if (!this.props.viewingCall && this.props.onForgetClick) { startButtons.push( - , ); @@ -612,7 +610,7 @@ export default class RoomHeader extends React.Component { if (!this.props.viewingCall && this.props.onAppsClick) { startButtons.push( - { : _t("room|header|show_widgets_button") } aria-checked={this.props.appsShown} - alignment={Alignment.Bottom} + placement="bottom" key="apps" />, ); @@ -631,11 +629,11 @@ export default class RoomHeader extends React.Component { if (!this.props.viewingCall && this.props.onSearchClick && this.props.inRoom) { startButtons.push( - , ); @@ -643,11 +641,11 @@ export default class RoomHeader extends React.Component { if (this.props.onInviteClick && (!this.props.viewingCall || isVideoRoom) && this.props.inRoom) { startButtons.push( - , ); @@ -667,11 +665,11 @@ export default class RoomHeader extends React.Component { ); } else { endButtons.push( - , ); @@ -754,7 +752,7 @@ export default class RoomHeader extends React.Component { onClick={this.onContextMenuOpenClick} isExpanded={!!this.state.contextMenuPosition} title={_t("room|context_menu|title")} - alignment={Alignment.Bottom} + placement="bottom" > {roomName} {this.props.room &&
} diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx index 1395dcc2c5..581583d1d5 100644 --- a/src/components/views/rooms/PinnedEventTile.tsx +++ b/src/components/views/rooms/PinnedEventTile.tsx @@ -27,7 +27,6 @@ import { _t } from "../../../languageHandler"; import { formatDate } from "../../../DateUtils"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { getUserNameColorClass } from "../../../utils/FormattingUtils"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; @@ -76,7 +75,7 @@ export default class PinnedEventTile extends React.Component { let unpinButton: JSX.Element | undefined; if (this.props.onUnpinClicked) { unpinButton = ( - v const [onFocus, isActive, ref] = useRovingTabIndex(); return ( - v hideIfDot={true} tooltipProps={{ tabIndex: isActive ? 0 : -1 }} /> - + ); }; diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index d573f3bbf0..c277bd5aca 100644 --- a/src/components/views/rooms/RoomList.tsx +++ b/src/components/views/rooms/RoomList.tsx @@ -57,10 +57,10 @@ import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList, } from "../context_menus/IconizedContextMenu"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ExtraTile from "./ExtraTile"; import RoomSublist, { IAuxButtonProps } from "./RoomSublist"; import { SdkContextClass } from "../../../contexts/SDKContext"; +import AccessibleButton from "../elements/AccessibleButton"; interface IProps { onKeyDown: (ev: React.KeyboardEvent, state: IRovingTabIndexState) => void; @@ -185,7 +185,7 @@ const DmAuxButton: React.FC = ({ tabIndex, dispatcher = default ); } else if (!activeSpace && showCreateRooms) { return ( - { dispatcher.dispatch({ action: "view_create_chat" }); diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index c8ad9d4aca..6fbccaff6a 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -49,7 +49,6 @@ import ContextMenu, { StyledMenuItemRadio, } from "../../structures/ContextMenu"; import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ExtraTile from "./ExtraTile"; import SettingsStore from "../../../settings/SettingsStore"; import { SlidingSyncManager } from "../../../SlidingSyncManager"; @@ -684,11 +683,6 @@ export default class RoomSublist extends React.Component { const badgeContainer =
{badge}
; - let Button: React.ComponentType> = AccessibleButton; - if (this.props.isMinimized) { - Button = AccessibleTooltipButton; - } - // Note: the addRoomButton conditionally gets moved around // the DOM depending on whether or not the list is minimized. // If we're minimized, we want it below the header so it @@ -707,7 +701,7 @@ export default class RoomSublist extends React.Component { >
- + {this.renderMenu()} {this.props.isMinimized ? null : badgeContainer} {this.props.isMinimized ? null : addRoomButton} diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 61f865e9fc..aae949858e 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -37,7 +37,6 @@ import NotificationBadge from "./NotificationBadge"; import { ActionPayload } from "../../../dispatcher/payloads"; import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore"; import { NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { EchoChamber } from "../../../stores/local-echo/EchoChamber"; import { CachedRoomKey, RoomEchoChamber } from "../../../stores/local-echo/RoomEchoChamber"; import { PROPERTY_UPDATED } from "../../../stores/local-echo/GenericEchoChamber"; @@ -464,21 +463,11 @@ export class RoomTile extends React.PureComponent { ariaDescribedBy = messagePreviewId(this.props.room.roomId); } - const props: Partial> = {}; - let Button: React.ComponentType> = AccessibleButton; - if (this.props.isMinimized) { - Button = AccessibleTooltipButton; - props.title = name; - // force the tooltip to hide whilst we are showing the context menu - props.forceHide = !!this.state.generalMenuPosition; - } - return ( {({ onFocus, isActive, ref }) => ( - + )} diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 70cabb474c..1001def386 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -19,7 +19,6 @@ import { Room, IEventRelation, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { Optional } from "matrix-events-sdk"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { _t } from "../../../languageHandler"; import { RecordingState } from "../../../audio/VoiceRecording"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; @@ -44,6 +43,7 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import RoomContext from "../../../contexts/RoomContext"; import { IUpload, VoiceMessageRecording } from "../../../audio/VoiceMessageRecording"; import { createVoiceMessageContent } from "../../../utils/createVoiceMessageContent"; +import AccessibleButton from "../elements/AccessibleButton"; interface IProps { room: Room; @@ -271,7 +271,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent