diff --git a/res/css/views/rooms/_MessageComposerFormatBar.pcss b/res/css/views/rooms/_MessageComposerFormatBar.pcss index 182e03fed07..3d4af9f8140 100644 --- a/res/css/views/rooms/_MessageComposerFormatBar.pcss +++ b/res/css/views/rooms/_MessageComposerFormatBar.pcss @@ -102,9 +102,4 @@ limitations under the License. font-weight: var(--cpd-font-weight-semibold); min-width: 54px; text-align: center; - - .mx_MessageComposerFormatBar_tooltipShortcut { - font-size: $font-9px; - opacity: 0.7; - } } diff --git a/res/css/views/rooms/_RoomBreadcrumbs.pcss b/res/css/views/rooms/_RoomBreadcrumbs.pcss index f502c3f4709..73c4b274329 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/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss index 8f23227c803..79cc32d23eb 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss @@ -63,20 +63,3 @@ limitations under the License. color: $tertiary-content; } } - -.mx_FormattingButtons_Tooltip { - padding: 0 2px 0 2px; - - .mx_FormattingButtons_Tooltip_KeyboardShortcut { - color: $tertiary-content; - - kbd { - margin-top: 2px; - text-align: center; - display: inline-block; - text-transform: capitalize; - font-size: 12px; - font-family: Inter, sans-serif; - } - } -} diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx index 5f3901a3916..e9e4f452c4a 100644 --- a/src/accessibility/RovingTabIndex.tsx +++ b/src/accessibility/RovingTabIndex.tsx @@ -18,7 +18,6 @@ import React, { createContext, useCallback, useContext, - useLayoutEffect, useMemo, useRef, useReducer, @@ -26,6 +25,7 @@ import React, { Dispatch, RefObject, ReactNode, + useEffect, } from "react"; import { getKeyBindingsManager } from "../KeyBindingsManager"; @@ -346,7 +346,7 @@ export const useRovingTabIndex = ( } // setup (after refs) - useLayoutEffect(() => { + useEffect(() => { context.dispatch({ type: Type.Register, payload: { ref }, diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx index feeacb45818..48d50a2cbe1 100644 --- a/src/components/structures/SpaceHierarchy.tsx +++ b/src/components/structures/SpaceHierarchy.tsx @@ -16,6 +16,7 @@ limitations under the License. import React, { ComponentProps, + ComponentType, Dispatch, KeyboardEvent, KeyboardEventHandler, @@ -73,7 +74,6 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload"; import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; import { getKeyBindingsManager } from "../../KeyBindingsManager"; -import { Alignment } from "../views/elements/Tooltip"; import { getTopic } from "../../hooks/room/useTopic"; import { SdkContextClass } from "../../contexts/SDKContext"; import { getDisplayAliasForAliasSet } from "../../Rooms"; @@ -664,13 +664,13 @@ const ManageButtons: React.FC = ({ hierarchy, selected, set const disabled = !selectedRelations.length || removing || saving; - let Button: React.ComponentType> = AccessibleButton; + let Button: ComponentType> = AccessibleButton; let props: Partial> = {}; if (!selectedRelations.length) { Button = AccessibleTooltipButton; props = { - tooltip: _t("space|select_room_below"), - alignment: Alignment.Top, + title: _t("space|select_room_below"), + side: "top", }; } diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/src/components/views/auth/InteractiveAuthEntryComponents.tsx index 0a7ed19b2ab..a5d322a9119 100644 --- a/src/components/views/auth/InteractiveAuthEntryComponents.tsx +++ b/src/components/views/auth/InteractiveAuthEntryComponents.tsx @@ -29,7 +29,6 @@ import AccessibleButton, { AccessibleButtonKind, ButtonEvent } from "../elements import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import Field from "../elements/Field"; import Spinner from "../elements/Spinner"; -import { Alignment } from "../elements/Tooltip"; import CaptchaForm from "./CaptchaForm"; /* This file contains a collection of components which are used by the @@ -509,7 +508,7 @@ export class EmailIdentityAuthEntry extends React.Component< title={ this.state.requested ? _t("auth|uia|email_resent") : _t("action|resend") } - alignment={Alignment.Right} + side="right" onHideTooltip={ this.state.requested ? () => this.setState({ requested: false }) diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx index 84c7a27fe0f..2921f3c986d 100644 --- a/src/components/views/beta/BetaCard.tsx +++ b/src/components/views/beta/BetaCard.tsx @@ -52,13 +52,8 @@ export const BetaPill: React.FC = ({ return ( -
{tooltipTitle}
-
{tooltipCaption}
- - } + title={tooltipTitle} + caption={tooltipCaption} onClick={onClick} > {_t("common|beta")} diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx index a21acd7b717..2a310f273fe 100644 --- a/src/components/views/dialogs/ForwardDialog.tsx +++ b/src/components/views/dialogs/ForwardDialog.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useEffect, useMemo, useState } from "react"; +import React, { ReactNode, useEffect, useMemo, useState } from "react"; import classnames from "classnames"; import { IContent, @@ -39,7 +39,6 @@ import { avatarUrlForUser } from "../../../Avatar"; import EventTile from "../rooms/EventTile"; import SearchBox from "../../structures/SearchBox"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; -import { Alignment } from "../elements/Tooltip"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import AutoHideScrollbar from "../../structures/AutoHideScrollbar"; import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState"; @@ -107,10 +106,10 @@ const Entry: React.FC = ({ room, type, content, matrixClient: cli, } }; - let className; + let className: string; let disabled = false; - let title; - let icon; + let title: string | undefined; + let icon: ReactNode | undefined; if (sendState === SendState.CanSend) { className = "mx_ForwardList_canSend"; if (!room.maySendMessage()) { @@ -140,7 +139,7 @@ const Entry: React.FC = ({ room, type, content, matrixClient: cli, className="mx_ForwardList_roomButton" onClick={jumpToRoom} title={_t("forward|open_room")} - alignment={Alignment.Top} + side="top" > {room.name} @@ -152,7 +151,7 @@ const Entry: React.FC = ({ room, type, content, matrixClient: cli, onClick={send} disabled={disabled} title={title} - alignment={Alignment.Top} + side="top" >
{_t("forward|send_label")}
{icon} diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index 0af5cc9625f..cc7224a7491 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -16,9 +16,9 @@ limitations under the License. */ import React, { SyntheticEvent, FocusEvent, forwardRef, useEffect, Ref, useState, ComponentProps } from "react"; +import { Tooltip } from "@vector-im/compound-web"; import AccessibleButton from "./AccessibleButton"; -import Tooltip, { Alignment } from "./Tooltip"; /** * Type of props accepted by {@link AccessibleTooltipButton}. @@ -27,29 +27,17 @@ import Tooltip, { Alignment } from "./Tooltip"; */ type Props = ComponentProps> & { /** - * Title to show in the tooltip and use as aria-label + * Title to show in the tooltip */ title?: string; - /** - * Tooltip node to show in the tooltip, takes precedence over `title` - */ - tooltip?: React.ReactNode; /** * Trigger label to render */ label?: string; - /** - * Classname to apply to the tooltip - */ - tooltipClassName?: string; /** * Force the tooltip to be hidden */ forceHide?: boolean; - /** - * Alignment to render the tooltip with - */ - alignment?: Alignment; /** * Function to call when the children are hovered over */ @@ -58,10 +46,10 @@ type Props = ComponentProps, "caption" | "side" | "align">; const AccessibleTooltipButton = forwardRef(function ( - { title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props, + { title, children, forceHide, side, align, onHideTooltip, caption, ...props }: Props, ref: Ref, ) { const [hover, setHover] = useState(false); @@ -91,23 +79,22 @@ const AccessibleTooltipButton = forwardRef(function - ); return ( - - {children} - {props.label} - {(tooltip || title) && tip} - + + + {children} + {props.label} + + ); }); diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index dd2e29f51c8..ac130a0c630 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -83,7 +83,7 @@ const ActiveCallEvent = forwardRef( kind={buttonKind} disabled={onButtonClick === null || buttonDisabledTooltip !== undefined} onClick={onButtonClick} - tooltip={buttonDisabledTooltip} + title={buttonDisabledTooltip} > {buttonText} diff --git a/src/components/views/messages/MessageActionBar.tsx b/src/components/views/messages/MessageActionBar.tsx index 9cf35922089..8cdf4ca77c7 100644 --- a/src/components/views/messages/MessageActionBar.tsx +++ b/src/components/views/messages/MessageActionBar.tsx @@ -233,15 +233,6 @@ const ReplyInThreadButton: React.FC = ({ mxEvent }) => { -
- {!hasARelation - ? _t("action|reply_in_thread") - : _t("threads|error_start_thread_existing_relation")} -
- - } title={!hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation")} onClick={onClick} onContextMenu={onClick} @@ -509,18 +500,6 @@ export default class MessageActionBar extends React.PureComponent -
- {this.props.isQuoteExpanded - ? _t("timeline|mab|collapse_reply_chain") - : _t("timeline|mab|expand_reply_chain")} -
-
- {_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")} -
- - ); toolbarOpts.push( diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx index cbb23f791d2..3fa4f2fddae 100644 --- a/src/components/views/messages/TextualBody.tsx +++ b/src/components/views/messages/TextualBody.tsx @@ -526,19 +526,12 @@ export default class TextualBody extends React.Component { const date = this.props.mxEvent.replacingEventDate(); const dateString = date && formatDate(date); - const tooltip = ( -
-
{_t("timeline|edits|tooltip_title", { date: dateString })}
-
{_t("timeline|edits|tooltip_sub")}
-
- ); - return ( {`(${_t("common|edited")})`} diff --git a/src/components/views/pips/WidgetPip.tsx b/src/components/views/pips/WidgetPip.tsx index 4a0d5e66180..6dae2ee82aa 100644 --- a/src/components/views/pips/WidgetPip.tsx +++ b/src/components/views/pips/WidgetPip.tsx @@ -34,7 +34,6 @@ import { WidgetType } from "../../../widgets/WidgetType"; import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore"; import WidgetUtils from "../../../utils/WidgetUtils"; import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions"; -import { Alignment } from "../elements/Tooltip"; interface Props { widgetId: string; @@ -124,14 +123,10 @@ export const WidgetPip: FC = ({ widgetId, room, viewingRoom, onStartMovin {roomName} + {(call !== null || WidgetType.JITSI.matches(widget?.type)) && ( - + diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx index 4fb8c1b5136..f2dfa2b8226 100644 --- a/src/components/views/right_panel/HeaderButton.tsx +++ b/src/components/views/right_panel/HeaderButton.tsx @@ -23,7 +23,6 @@ import classNames from "classnames"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { ButtonEvent } from "../elements/AccessibleButton"; -import { Alignment } from "../elements/Tooltip"; interface IProps { // Whether this button is highlighted @@ -56,7 +55,7 @@ export default class HeaderButton extends React.Component { {...props} aria-current={isHighlighted ? "true" : "false"} title={title} - alignment={Alignment.Bottom} + side="bottom" className={classes} onClick={onClick} /> diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index 4d27f05cefb..f9d0713e768 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -68,7 +68,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"; @@ -114,9 +113,8 @@ const VoiceCallButton: FC = ({ room, busy, setBusy, behavi ); @@ -237,9 +235,8 @@ const VideoCallButton: FC = ({ room, busy, setBusy, behavi ref={buttonRef} className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_videoCallButton" onClick={onClick} - title={_t("voip|video_call")} - tooltip={tooltip ?? _t("voip|video_call")} - alignment={Alignment.Bottom} + title={tooltip ?? _t("voip|video_call")} + side="bottom" disabled={disabled || busy} /> {menu} @@ -446,7 +443,7 @@ const CallLayoutSelector: FC = ({ call }) => { })} onClick={onClick} title={_t("room|header|video_call_ec_change_layout")} - alignment={Alignment.Bottom} + side="bottom" key="layout" /> {menu} @@ -600,7 +597,7 @@ export default class RoomHeader extends React.Component { className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_forgetButton" onClick={this.props.onForgetClick} title={_t("room|header|forget_room_button")} - alignment={Alignment.Bottom} + side="bottom" key="forget" />, ); @@ -619,7 +616,7 @@ export default class RoomHeader extends React.Component { : _t("room|header|show_widgets_button") } aria-checked={this.props.appsShown} - alignment={Alignment.Bottom} + side="bottom" key="apps" />, ); @@ -631,7 +628,7 @@ export default class RoomHeader extends React.Component { className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_searchButton" onClick={this.props.onSearchClick} title={_t("action|search")} - alignment={Alignment.Bottom} + side="bottom" key="search" />, ); @@ -643,7 +640,7 @@ export default class RoomHeader extends React.Component { className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_inviteButton" onClick={this.props.onInviteClick} title={_t("action|invite")} - alignment={Alignment.Bottom} + side="bottom" key="invite" />, ); @@ -667,7 +664,7 @@ export default class RoomHeader extends React.Component { className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_minimiseButton" onClick={this.onHideCallClick} title={_t("room|header|video_room_view_chat_button")} - alignment={Alignment.Bottom} + side="bottom" key="minimise" />, ); @@ -750,7 +747,7 @@ export default class RoomHeader extends React.Component { onClick={this.onContextMenuOpenClick} isExpanded={!!this.state.contextMenuPosition} title={_t("room|context_menu|title")} - alignment={Alignment.Bottom} + side="bottom" > {roomName} {this.props.room &&
} diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx index 0d737c40016..80453dedb0d 100644 --- a/src/components/views/rooms/MessageComposerFormatBar.tsx +++ b/src/components/views/rooms/MessageComposerFormatBar.tsx @@ -127,16 +127,6 @@ interface IFormatButtonProps { class FormatButton extends React.PureComponent { public render(): React.ReactNode { const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`; - let shortcut; - if (this.props.shortcut) { - shortcut =
{this.props.shortcut}
; - } - const tooltip = ( -
-
{this.props.label}
-
{shortcut}
-
- ); // element="button" and type="button" are necessary for the buttons to work on WebKit, // otherwise the text is deselected before onClick can ever be called @@ -146,7 +136,7 @@ class FormatButton extends React.PureComponent { type="button" onClick={this.props.onClick} title={this.props.label} - tooltip={tooltip} + caption={this.props.shortcut} className={className} /> ); diff --git a/src/components/views/rooms/RoomBreadcrumbs.tsx b/src/components/views/rooms/RoomBreadcrumbs.tsx index eca8da46240..1ade82cfab9 100644 --- a/src/components/views/rooms/RoomBreadcrumbs.tsx +++ b/src/components/views/rooms/RoomBreadcrumbs.tsx @@ -52,7 +52,6 @@ const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => v onClick={onClick} aria-label={_t("a11y|room_name", { name: room.name })} title={room.name} - tooltipClassName="mx_RoomBreadcrumbs_Tooltip" onFocus={onFocus} ref={ref} tabIndex={isActive ? 0 : -1} diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx index bf0ad48cf56..71d2f2f9f7f 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx @@ -31,37 +31,22 @@ import { Icon as CodeBlockIcon } from "../../../../../../res/img/element-icons/r import { Icon as IndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_increase.svg"; import { Icon as UnIndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_decrease.svg"; import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton"; -import { Alignment } from "../../../elements/Tooltip"; -import { KeyboardShortcut } from "../../../settings/KeyboardShortcut"; -import { KeyCombo } from "../../../../../KeyBindingsManager"; import { _t } from "../../../../../languageHandler"; import { ButtonEvent } from "../../../elements/AccessibleButton"; import { openLinkModal } from "./LinkModal"; import { useComposerContext } from "../ComposerContext"; +import { IS_MAC, Key } from "../../../../../Keyboard"; +import { ALTERNATE_KEY_NAME } from "../../../../../accessibility/KeyboardShortcuts"; -interface TooltipProps { +interface ButtonProps { label: string; - keyCombo?: KeyCombo; -} - -function Tooltip({ label, keyCombo }: TooltipProps): JSX.Element { - return ( -
- {label} - {keyCombo && ( - - )} -
- ); -} - -interface ButtonProps extends TooltipProps { + shortcut?: string; icon: ReactNode; actionState: ActionState; onClick: MouseEventHandler; } -function Button({ label, keyCombo, onClick, actionState, icon }: ButtonProps): JSX.Element { +function Button({ label, shortcut, onClick, actionState, icon }: ButtonProps): JSX.Element { return ( } + caption={shortcut} forceHide={actionState === "disabled"} - alignment={Alignment.Top} + side="top" > {icon} @@ -86,6 +71,10 @@ interface FormattingButtonsProps { actionStates: AllActionStates; } +function ctrlShortcutLabel(key: string): string { + return (IS_MAC ? "⌘" : _t(ALTERNATE_KEY_NAME[Key.CONTROL])) + "+" + key; +} + export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps): JSX.Element { const composerContext = useComposerContext(); const isInList = actionStates.unorderedList === "reversed" || actionStates.orderedList === "reversed"; @@ -94,21 +83,21 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
); diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx index fd8c85874ed..258421a9cf7 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx +++ b/src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx @@ -23,7 +23,6 @@ import { MatrixCall } from "matrix-js-sdk/src/webrtc/call"; import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; import LegacyCallContextMenu from "../../context_menus/LegacyCallContextMenu"; import DialpadContextMenu from "../../context_menus/DialpadContextMenu"; -import { Alignment } from "../../elements/Tooltip"; import { alwaysMenuProps, alwaysAboveRightOf, @@ -60,7 +59,7 @@ const LegacyCallViewToggleButton = forwardRef( ref={ref} className={classes} title={isOn ? onLabel : offLabel} - alignment={Alignment.Top} + side="top" {...props} > {children} @@ -265,7 +264,7 @@ export default class LegacyCallViewButtons extends React.Component )} )} ); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index cc1cd4d79bb..567b731af92 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3203,7 +3203,6 @@ "download_action_decrypting": "Decrypting", "download_action_downloading": "Downloading", "edits": { - "tooltip_label": "Edited at %(date)s. Click to view edits.", "tooltip_sub": "Click to view edits", "tooltip_title": "Edited at %(date)s" }, diff --git a/src/toasts/IncomingCallToast.tsx b/src/toasts/IncomingCallToast.tsx index 1bd8dad4cc2..4f29c4911e8 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.tsx @@ -35,7 +35,7 @@ import { LiveContentType, } from "../components/views/rooms/LiveContentSummary"; import { useCall, useJoinCallButtonDisabledTooltip } from "../hooks/useCall"; -import { ButtonEvent } from "../components/views/elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../components/views/elements/AccessibleButton"; import { useDispatcher } from "../hooks/useDispatcher"; import { ActionPayload } from "../dispatcher/payloads"; import { Call } from "../models/Call"; @@ -58,7 +58,7 @@ function JoinCallButtonWithCall({ onClick, call }: JoinCallButtonWithCallProps): className="mx_IncomingCallToast_joinButton" onClick={onClick} disabled={disabledTooltip !== null} - tooltip={disabledTooltip ?? undefined} + title={disabledTooltip ?? undefined} kind="primary" > {_t("action|join")} @@ -178,13 +178,9 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element { {call ? ( ) : ( - + {_t("action|join")} - + )} { renderComponent(); expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.FilterContainer); expect(screen.getByRole("button", { name: /search/i })).toBeInTheDocument(); - expect(screen.getByRole("button", { name: "Explore rooms" })).toBeInTheDocument(); + expect(screen.getByTestId("Explore rooms")).toBeInTheDocument(); }); }); diff --git a/test/components/structures/LoggedInView-test.tsx b/test/components/structures/LoggedInView-test.tsx index a8cf7ffb344..117fc584a95 100644 --- a/test/components/structures/LoggedInView-test.tsx +++ b/test/components/structures/LoggedInView-test.tsx @@ -19,6 +19,7 @@ import { render, RenderResult } from "@testing-library/react"; import { ConditionKind, EventType, IPushRule, MatrixEvent, ClientEvent, PushRuleKind } from "matrix-js-sdk/src/matrix"; import { MediaHandler } from "matrix-js-sdk/src/webrtc/mediaHandler"; import { logger } from "matrix-js-sdk/src/logger"; +import { TooltipProvider } from "@vector-im/compound-web"; import LoggedInView from "../../../src/components/structures/LoggedInView"; import { SDKContext } from "../../../src/contexts/SDKContext"; @@ -58,7 +59,11 @@ describe("", () => { const getComponent = (props = {}): RenderResult => render(, { - wrapper: ({ children }) => {children}, + wrapper: ({ children }) => ( + + {children} + + ), }); beforeEach(() => { diff --git a/test/components/structures/PipContainer-test.tsx b/test/components/structures/PipContainer-test.tsx index 2af7f05000b..b793f364013 100644 --- a/test/components/structures/PipContainer-test.tsx +++ b/test/components/structures/PipContainer-test.tsx @@ -16,12 +16,12 @@ limitations under the License. import React from "react"; import { mocked, Mocked } from "jest-mock"; -import { screen, render, act, cleanup } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { MatrixClient, PendingEventOrdering, Room, MatrixEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix"; import { Widget, ClientWidgetApi } from "matrix-widget-api"; import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup"; +import { screen, render, act, cleanup } from "../.."; import type { RoomMember } from "matrix-js-sdk/src/matrix"; import { useMockedCalls, @@ -268,7 +268,7 @@ describe("PipContainer", () => { // The leave button should disconnect from the call const disconnectSpy = jest.spyOn(call, "disconnect"); - await user.click(screen.getByRole("button", { name: "Leave" })); + await user.click(screen.getByTestId("Leave")); expect(disconnectSpy).toHaveBeenCalled(); }); }); @@ -296,7 +296,7 @@ describe("PipContainer", () => { await user.click(await screen.findByRole("button", { name: "Back" })); expect(moveSpy).toHaveBeenCalledWith(room, widget, Container.Center); - expect(screen.queryByRole("button", { name: "Leave" })).toBeNull(); + expect(screen.queryByTestId("Leave")).toBeNull(); }); WidgetStore.instance.removeVirtualWidget("1", room.roomId); @@ -341,7 +341,7 @@ describe("PipContainer", () => { .mockResolvedValue({}); const mockMessaging = { transport: { send: sendSpy }, stop: () => {} } as unknown as ClientWidgetApi; WidgetMessagingStore.instance.storeMessaging(new Widget(widget), room.roomId, mockMessaging); - await user.click(screen.getByRole("button", { name: "Leave" })); + await user.click(screen.getByTestId("Leave")); expect(sendSpy).toHaveBeenCalledWith(ElementWidgetActions.HangupCall, {}); }); @@ -366,7 +366,7 @@ describe("PipContainer", () => { // Broadcast: Check for the „Live“ badge to be present expect(screen.queryByText("Live")).toBeInTheDocument(); // Call: Check for the „Leave“ button to be present - screen.getByRole("button", { name: "Leave" }); + screen.getByTestId("Leave"); }); }); }); diff --git a/test/components/structures/RoomSearchView-test.tsx b/test/components/structures/RoomSearchView-test.tsx index 5d69f6595a3..8ee0be9464f 100644 --- a/test/components/structures/RoomSearchView-test.tsx +++ b/test/components/structures/RoomSearchView-test.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; -import { render, screen } from "@testing-library/react"; import { Room, MatrixClient, @@ -28,6 +27,7 @@ import { } from "matrix-js-sdk/src/matrix"; import { defer } from "matrix-js-sdk/src/utils"; +import { render, screen } from "../.."; import { RoomSearchView } from "../../../src/components/structures/RoomSearchView"; import { SearchScope } from "../../../src/components/views/rooms/SearchBar"; import ResizeNotifier from "../../../src/utils/ResizeNotifier"; diff --git a/test/components/structures/RoomView-test.tsx b/test/components/structures/RoomView-test.tsx index 066f8b38a20..f414e010259 100644 --- a/test/components/structures/RoomView-test.tsx +++ b/test/components/structures/RoomView-test.tsx @@ -546,7 +546,7 @@ describe("RoomView", () => { mocked(cli.isGuest).mockReturnValue(false); await mountRoomView(); - expect(screen.getByLabelText("Forget room")).toBeInTheDocument(); + expect(screen.getByTestId("Forget room")).toBeInTheDocument(); }); it("should not show forget room button for guests", async () => { @@ -599,7 +599,7 @@ describe("RoomView", () => { const eventMapper = (obj: Partial) => new MatrixEvent(obj); const roomViewRef = createRef<_RoomView>(); - const { container, getByText, findByLabelText } = await mountRoomView(roomViewRef); + const { container, getByText, findByTestId } = await mountRoomView(roomViewRef); // @ts-ignore - triggering a search organically is a lot of work roomViewRef.current!.setState({ search: { @@ -646,7 +646,7 @@ describe("RoomView", () => { const prom = waitForElementToBeRemoved(() => container.querySelector(".mx_RoomView_searchResultsPanel")); await userEvent.hover(getByText("search term")); - await userEvent.click(await findByLabelText("Edit")); + await userEvent.click(await findByTestId("Edit")); await prom; }); @@ -660,7 +660,7 @@ describe("RoomView", () => { const eventMapper = (obj: Partial) => new MatrixEvent(obj); const roomViewRef = createRef<_RoomView>(); - const { container, getByText, findByLabelText } = await mountRoomView(roomViewRef); + const { container, getByText, findByTestId } = await mountRoomView(roomViewRef); // @ts-ignore - triggering a search organically is a lot of work roomViewRef.current!.setState({ search: { @@ -707,7 +707,7 @@ describe("RoomView", () => { const prom = untilDispatch(Action.ViewRoom, dis); await userEvent.hover(getByText("search term")); - await userEvent.click(await findByLabelText("Edit")); + await userEvent.click(await findByTestId("Edit")); await expect(prom).resolves.toEqual(expect.objectContaining({ room_id: room2.roomId })); }); diff --git a/test/components/structures/ThreadView-test.tsx b/test/components/structures/ThreadView-test.tsx index 83eed5eb9d3..c1cc2d5939f 100644 --- a/test/components/structures/ThreadView-test.tsx +++ b/test/components/structures/ThreadView-test.tsx @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; import { @@ -29,6 +28,7 @@ import { } from "matrix-js-sdk/src/matrix"; import React, { useState } from "react"; +import { act, getByTestId, render, RenderResult, waitFor } from "../.."; import ThreadView from "../../../src/components/structures/ThreadView"; import MatrixClientContext from "../../../src/contexts/MatrixClientContext"; import RoomContext from "../../../src/contexts/RoomContext"; diff --git a/test/components/structures/ViewSource-test.tsx b/test/components/structures/ViewSource-test.tsx index 44c122e901d..a8019e79b97 100644 --- a/test/components/structures/ViewSource-test.tsx +++ b/test/components/structures/ViewSource-test.tsx @@ -14,10 +14,10 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { render } from "@testing-library/react"; import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix"; import React from "react"; +import { render } from "../.."; import ViewSource from "../../../src/components/structures/ViewSource"; import { mkEvent, stubClient, mkMessage } from "../../test-utils/test-utils"; import { MatrixClientPeg } from "../../../src/MatrixClientPeg"; diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index 517d318412d..de818bae27c 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -395,43 +395,49 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = role="toolbar" >