From a3fa53c4357fe10536ccc33d8650b79bfffd537f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 15 Jan 2024 10:41:27 +0000 Subject: [PATCH 01/23] Deprecate AccessibleTooltipButton Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/LeftPanel.tsx | 7 +++--- src/components/structures/SpaceHierarchy.tsx | 4 +-- src/components/structures/SpaceRoomView.tsx | 3 +-- .../views/audio_messages/PlayPauseButton.tsx | 3 ++- src/components/views/beta/BetaCard.tsx | 14 +++-------- .../views/dialogs/spotlight/TooltipOption.tsx | 4 +-- .../views/elements/AccessibleButton.tsx | 22 +++++++++++++++- .../elements/AccessibleTooltipButton.tsx | 3 +++ src/components/views/elements/ImageView.tsx | 14 +++++------ src/components/views/elements/SSOButtons.tsx | 5 ++-- src/components/views/messages/CallEvent.tsx | 8 +++--- .../views/messages/LegacyCallEvent.tsx | 3 +-- src/components/views/messages/TextualBody.tsx | 16 +++--------- .../views/right_panel/RoomSummaryCard.tsx | 4 +-- .../views/rooms/CollapsibleButton.tsx | 10 ++------ .../views/rooms/MessageComposer.tsx | 5 ++-- .../views/rooms/MessageComposerButtons.tsx | 5 ++-- .../views/rooms/PinnedEventTile.tsx | 3 +-- src/components/views/rooms/RoomList.tsx | 4 +-- .../views/rooms/VoiceRecordComposerTile.tsx | 6 ++--- .../devices/DeviceExpandDetailsButton.tsx | 11 ++++---- .../views/spaces/SpaceCreateMenu.tsx | 3 +-- src/components/views/spaces/SpacePanel.tsx | 25 +++++++------------ .../LegacyCallView/LegacyCallViewHeader.tsx | 8 +++--- src/toasts/IncomingCallToast.tsx | 19 ++++++-------- src/toasts/IncomingLegacyCallToast.tsx | 3 +-- .../components/atoms/VoiceBroadcastHeader.tsx | 5 ++-- .../molecules/VoiceBroadcastRecordingPip.tsx | 6 ++--- 28 files changed, 102 insertions(+), 121 deletions(-) diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index c2454e04fb0..084afdaf8ba 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -26,7 +26,6 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist"; import { Action } from "../../dispatcher/actions"; import RoomSearch from "./RoomSearch"; import ResizeNotifier from "../../utils/ResizeNotifier"; -import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import SpaceStore from "../../stores/spaces/SpaceStore"; import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces"; import { getKeyBindingsManager } from "../../KeyBindingsManager"; @@ -41,7 +40,7 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; import { shouldShowComponent } from "../../customisations/helpers/UIComponents"; import { UIComponent } from "../../settings/UIFeature"; -import { ButtonEvent } from "../views/elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton"; import PosthogTrackers from "../../PosthogTrackers"; import PageType from "../../PageTypes"; import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton"; @@ -333,7 +332,7 @@ export default class LeftPanel extends React.Component { // to start a new call if (LegacyCallHandler.instance.getSupportsPstnProtocol()) { dialPadButton = ( - { let rightButton: JSX.Element | undefined; if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) { rightButton = ( - = ({ let button: ReactElement; if (busy) { button = ( - = ({ title={_t("space|joining_space")} > - + ); } else if (joinedRoom) { button = ( diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index dc79a25489a..3f61f1ad3a3 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -59,7 +59,6 @@ import { defaultRoomsRenderer, } from "../views/dialogs/AddExistingToSpaceDialog"; import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton"; -import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import ErrorBoundary from "../views/elements/ErrorBoundary"; import Field from "../views/elements/Field"; import RoomFacePile from "../views/elements/RoomFacePile"; @@ -247,7 +246,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => { let settingsButton; if (shouldShowSpaceSettings(space)) { settingsButton = ( - { showSpaceSettings(space); diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index 63f266fbf74..853546a88d3 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/src/components/views/audio_messages/PlayPauseButton.tsx @@ -20,6 +20,7 @@ import classNames from "classnames"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { _t } from "../../../languageHandler"; import { Playback, PlaybackState } from "../../../audio/Playback"; +import AccessibleButton from "../elements/AccessibleButton"; type Props = Omit< ComponentProps, @@ -61,7 +62,7 @@ export default class PlayPauseButton extends React.PureComponent { }); return ( - = ({ }) => { if (onClick) { return ( - -
{tooltipTitle}
-
{tooltipCaption}
- - } + title={tooltipTitle} + caption={tooltipCaption} onClick={onClick} > {_t("common|beta")} - + ); } diff --git a/src/components/views/dialogs/spotlight/TooltipOption.tsx b/src/components/views/dialogs/spotlight/TooltipOption.tsx index 2233e762d46..9eb54e24c0f 100644 --- a/src/components/views/dialogs/spotlight/TooltipOption.tsx +++ b/src/components/views/dialogs/spotlight/TooltipOption.tsx @@ -19,7 +19,7 @@ import React, { ComponentProps, ReactNode } from "react"; import { RovingAccessibleTooltipButton } from "../../../../accessibility/roving/RovingAccessibleTooltipButton"; import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex"; -import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; +import AccessibleButton from "../../elements/AccessibleButton"; interface TooltipOptionProps extends ComponentProps { endAdornment?: ReactNode; @@ -28,7 +28,7 @@ interface TooltipOptionProps extends ComponentProps = ({ inputRef, className, ...props }) => { const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); return ( - = DynamicHtmlElementProps & * Event handler for button activation. Should be implemented exactly like a normal `onClick` handler. */ onClick: ((e: ButtonEvent) => void | Promise) | null; + /** + * The tooltip to show on hover or focus. + */ + title?: string; + /** + * The caption to show within a tooltip as above, only valid when used in conjunction with `title`. + */ + caption?: string; }; /** @@ -116,6 +125,8 @@ const AccessibleButton = forwardRef(function , ref: Ref, @@ -182,7 +193,16 @@ const AccessibleButton = forwardRef(function + {button} + + ); + } + return button; }); // Type assertion required due to forwardRef type workaround in react.d.ts diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index 0af5cc9625f..4bb5d6effff 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -60,6 +60,9 @@ type Props = ComponentProps( { title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props, ref: Ref, diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index 6f5815e95a1..6006e1dc5ff 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -21,7 +21,7 @@ import FocusLock from "react-focus-lock"; import { MatrixEvent } from "matrix-js-sdk/src/matrix"; import { _t } from "../../../languageHandler"; -import AccessibleTooltipButton from "./AccessibleTooltipButton"; +import AccessibleButton from "./AccessibleButton"; import MemberAvatar from "../avatars/MemberAvatar"; import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton"; import MessageContextMenu from "../context_menus/MessageContextMenu"; @@ -513,14 +513,14 @@ export default class ImageView extends React.Component { } const zoomOutButton = ( - ); const zoomInButton = ( - {
{zoomOutButton} {zoomInButton} - - - {contextMenuButton} - = ({ if (mini) { // TODO fallback icon return ( - + {icon} - + ); } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index dd2e29f51c8..e59d8037353 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -34,7 +34,7 @@ import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary import FacePile from "../elements/FacePile"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { CallDuration, SessionDuration } from "../voip/CallDuration"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import AccessibleButton from "../elements/AccessibleButton"; const MAX_FACES = 8; @@ -78,15 +78,15 @@ const ActiveCallEvent = forwardRef(
{call && } - {buttonText} - + diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx index 3c8241d4ea1..a5bcf169a9b 100644 --- a/src/components/views/messages/LegacyCallEvent.tsx +++ b/src/components/views/messages/LegacyCallEvent.tsx @@ -24,7 +24,6 @@ import MemberAvatar from "../avatars/MemberAvatar"; import LegacyCallEventGrouper, { LegacyCallEventGrouperEvent } from "../../structures/LegacyCallEventGrouper"; import AccessibleButton from "../elements/AccessibleButton"; import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { formatPreciseDuration } from "../../../DateUtils"; import Clock from "../audio_messages/Clock"; @@ -114,7 +113,7 @@ export default class LegacyCallEvent extends React.PureComponent }); return ( - { 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/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 4a6ea31b488..3a33edc7c01 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -206,13 +206,13 @@ const AppRow: React.FC = ({ app, room }) => { /> )} - - = ({ } return ( - + {children} - + ); }; diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index 53e05e69a17..de9cdd05a5a 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -35,7 +35,6 @@ import { makeRoomPermalink, RoomPermalinkCreator } from "../../../utils/permalin import E2EIcon from "./E2EIcon"; import SettingsStore from "../../../settings/SettingsStore"; import { aboveLeftOf, MenuProps } from "../../structures/ContextMenu"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ReplyPreview from "./ReplyPreview"; import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import VoiceRecordComposerTile from "./VoiceRecordComposerTile"; @@ -52,7 +51,7 @@ import UIStore, { UI_EVENTS } from "../../../stores/UIStore"; import RoomContext from "../../../contexts/RoomContext"; import { SettingUpdatedPayload } from "../../../dispatcher/payloads/SettingUpdatedPayload"; import MessageComposerButtons from "./MessageComposerButtons"; -import { ButtonEvent } from "../elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { isLocalRoom } from "../../../utils/localRoom/isLocalRoom"; import { Features } from "../../../settings/Settings"; @@ -75,7 +74,7 @@ interface ISendButtonProps { function SendButton(props: ISendButtonProps): JSX.Element { return ( - boolean; @@ -128,7 +127,7 @@ const MessageComposerButtons: React.FC = (props: IProps) => { {mainButtons} {moreButtons.length > 0 && ( - { let unpinButton: JSX.Element | undefined; if (this.props.onUnpinClicked) { unpinButton = ( - void; @@ -181,7 +181,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/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 5cc469a2958..e794b39f215 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 = Omit< - ComponentProps>, - "aria-label" | "title" | "kind" | "className" | "onClick" + ComponentProps>, + "title" | "kind" | "className" | "onClick" > & { isExpanded: boolean; onClick: () => void; @@ -36,9 +36,8 @@ export const DeviceExpandDetailsButton = }: Props): JSX.Element => { const label = isExpanded ? _t("settings|sessions|hide_details") : _t("settings|sessions|show_details"); return ( - onClick={onClick} > - + ); }; diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index 2ded20912d2..a690d3494d8 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -38,7 +38,6 @@ import { import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../languageHandler"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ContextMenu, { ChevronFace } from "../../structures/ContextMenu"; import createRoom, { IOpts as ICreateOpts } from "../../../createRoom"; import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; @@ -310,7 +309,7 @@ const SpaceCreateMenu: React.FC<{ } else { body = ( - setVisibility(null)} title={_t("action|go_back")} diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index aac1273543f..bfbab67ec0f 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -34,7 +34,6 @@ import { _t } from "../../../languageHandler"; import { useContextMenu } from "../../structures/ContextMenu"; import SpaceCreateMenu from "./SpaceCreateMenu"; import { SpaceButton, SpaceItem } from "./SpaceTreeLevel"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter"; import SpaceStore from "../../../stores/spaces/SpaceStore"; import { @@ -72,6 +71,7 @@ import { NotificationState } from "../../../stores/notifications/NotificationSta import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; +import AccessibleButton from "../elements/AccessibleButton"; const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => { const invites = useEventEmitterState(SpaceStore.instance, UPDATE_INVITED_SPACES, () => { @@ -371,24 +371,17 @@ const SpacePanel: React.FC = () => { aria-label={_t("common|spaces")} > - setPanelCollapsed(!isPanelCollapsed)} title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")} - tooltip={ -
-
- {isPanelCollapsed ? _t("action|expand") : _t("action|collapse")} -
-
- {IS_MAC - ? "⌘ + ⇧ + D" - : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + - " + " + - _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + - " + D"} -
-
+ caption={ + IS_MAC + ? "⌘ + ⇧ + D" + : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + + " + " + + _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + + " + D" } /> diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx index 33484eb3ced..c60b70c932b 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx +++ b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx @@ -19,7 +19,7 @@ import React from "react"; import { _t } from "../../../../languageHandler"; import RoomAvatar from "../../avatars/RoomAvatar"; -import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; +import AccessibleButton from "../../elements/AccessibleButton"; interface LegacyCallControlsProps { onExpand?: () => void; @@ -31,21 +31,21 @@ const LegacyCallViewHeaderControls: React.FC = ({ onExp return (
{onMaximize && ( - )} {onPin && ( - )} {onExpand && ( - {_t("action|join")} - + ); } @@ -178,16 +177,12 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element { {call ? ( ) : ( - + {_t("action|join")} - + )}
- `call_${callId}`; @@ -136,7 +135,7 @@ export default class IncomingLegacyCallToast extends React.Component - = ({ }); const microphoneLine = microphoneLabel && ( - {microphoneLabel} - + ); const onRoomAvatarOrNameClick = (): void => { diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx index 026cf40ce13..46ca3f9319e 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx @@ -32,7 +32,7 @@ import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.sv import { _t } from "../../../languageHandler"; import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection"; import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu"; -import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton"; +import AccessibleButton from "../../../components/views/elements/AccessibleButton"; interface VoiceBroadcastRecordingPipProps { recording: VoiceBroadcastRecording; @@ -92,12 +92,12 @@ export const VoiceBroadcastRecordingPip: React.FC {toggleControl} - setShowDeviceSelect(true)} title={_t("voip|change_input_device")} > - + } label="Stop Recording" From 5cdd4350078d05de0a3c3bee19d3c2ad68d38c84 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 15 Jan 2024 11:29:04 +0000 Subject: [PATCH 02/23] Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/LeftPanel.tsx | 7 ++-- src/components/structures/SpaceHierarchy.tsx | 4 +-- .../views/dialogs/spotlight/TooltipOption.tsx | 4 +-- .../views/rooms/LegacyRoomHeader.tsx | 4 +-- .../devices/DeviceExpandDetailsButton.tsx | 11 +++--- src/i18n/strings/en_EN.json | 1 - src/toasts/IncomingCallToast.tsx | 19 ++++++---- test/components/structures/LeftPanel-test.tsx | 2 +- test/components/structures/UserMenu-test.tsx | 2 +- .../__snapshots__/RoomView-test.tsx.snap | 12 +++---- .../__snapshots__/UserMenu-test.tsx.snap | 2 +- .../audio_messages/RecordingPlayback-test.tsx | 2 +- .../location/LocationViewDialog-test.tsx | 2 +- .../views/location/ZoomButtons-test.tsx | 2 +- .../LocationViewDialog-test.tsx.snap | 4 +-- .../__snapshots__/ZoomButtons-test.tsx.snap | 4 +-- .../views/right_panel/UserInfo-test.tsx | 18 +++++----- .../__snapshots__/UserInfo-test.tsx.snap | 8 ++--- .../views/rooms/RoomListHeader-test.tsx | 2 +- .../views/rooms/RoomPreviewCard-test.tsx | 2 +- .../rooms/VoiceRecordComposerTile-test.tsx | 2 +- .../__snapshots__/MemberTile-test.tsx.snap | 6 ++-- .../devices/CurrentDeviceSection-test.tsx | 2 +- .../settings/devices/LoginWithQRFlow-test.tsx | 2 +- .../CurrentDeviceSection-test.tsx.snap | 4 +-- .../LoginWithQRFlow-test.tsx.snap | 12 +++---- .../views/spaces/SpacePanel-test.tsx | 2 +- test/index.ts | 36 +++++++++++++++++++ .../atoms/VoiceBroadcastHeader-test.tsx | 2 +- .../VoiceBroadcastHeader-test.tsx.snap | 8 ++--- .../VoiceBroadcastPlaybackBody-test.tsx | 2 +- .../VoiceBroadcastPreRecordingPip-test.tsx | 2 +- .../VoiceBroadcastRecordingBody-test.tsx | 2 +- .../VoiceBroadcastSmallPlaybackBody-test.tsx | 2 +- .../VoiceBroadcastPlaybackBody-test.tsx.snap | 14 ++++---- ...oiceBroadcastPreRecordingPip-test.tsx.snap | 2 +- .../VoiceBroadcastRecordingBody-test.tsx.snap | 4 +-- ...ceBroadcastSmallPlaybackBody-test.tsx.snap | 10 +++--- 38 files changed, 135 insertions(+), 91 deletions(-) create mode 100644 test/index.ts diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 084afdaf8ba..c2454e04fb0 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -26,6 +26,7 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist"; import { Action } from "../../dispatcher/actions"; import RoomSearch from "./RoomSearch"; import ResizeNotifier from "../../utils/ResizeNotifier"; +import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import SpaceStore from "../../stores/spaces/SpaceStore"; import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces"; import { getKeyBindingsManager } from "../../KeyBindingsManager"; @@ -40,7 +41,7 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; import { shouldShowComponent } from "../../customisations/helpers/UIComponents"; import { UIComponent } from "../../settings/UIFeature"; -import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton"; +import { ButtonEvent } from "../views/elements/AccessibleButton"; import PosthogTrackers from "../../PosthogTrackers"; import PageType from "../../PageTypes"; import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton"; @@ -332,7 +333,7 @@ export default class LeftPanel extends React.Component { // to start a new call if (LegacyCallHandler.instance.getSupportsPstnProtocol()) { dialPadButton = ( - { let rightButton: JSX.Element | undefined; if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) { rightButton = ( - = ({ let button: ReactElement; if (busy) { button = ( - = ({ title={_t("space|joining_space")} > - + ); } else if (joinedRoom) { button = ( diff --git a/src/components/views/dialogs/spotlight/TooltipOption.tsx b/src/components/views/dialogs/spotlight/TooltipOption.tsx index 9eb54e24c0f..2233e762d46 100644 --- a/src/components/views/dialogs/spotlight/TooltipOption.tsx +++ b/src/components/views/dialogs/spotlight/TooltipOption.tsx @@ -19,7 +19,7 @@ import React, { ComponentProps, ReactNode } from "react"; import { RovingAccessibleTooltipButton } from "../../../../accessibility/roving/RovingAccessibleTooltipButton"; import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex"; -import AccessibleButton from "../../elements/AccessibleButton"; +import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; interface TooltipOptionProps extends ComponentProps { endAdornment?: ReactNode; @@ -28,7 +28,7 @@ interface TooltipOptionProps extends ComponentProps = ({ inputRef, className, ...props }) => { const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); return ( - { if (this.props.viewingCall && !isVideoRoom) { if (this.props.activeCall === null) { endButtons.push( - = Omit< - ComponentProps>, - "title" | "kind" | "className" | "onClick" + ComponentProps>, + "aria-label" | "title" | "kind" | "className" | "onClick" > & { isExpanded: boolean; onClick: () => void; @@ -36,8 +36,9 @@ export const DeviceExpandDetailsButton = }: Props): JSX.Element => { const label = isExpanded ? _t("settings|sessions|hide_details") : _t("settings|sessions|show_details"); return ( - onClick={onClick} > - + ); }; 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 bf51eccfaad..1bd8dad4cc2 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.tsx @@ -28,13 +28,14 @@ import defaultDispatcher from "../dispatcher/dispatcher"; import { ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload"; import { Action } from "../dispatcher/actions"; import ToastStore from "../stores/ToastStore"; +import AccessibleTooltipButton from "../components/views/elements/AccessibleTooltipButton"; import { LiveContentSummary, LiveContentSummaryWithCall, LiveContentType, } from "../components/views/rooms/LiveContentSummary"; import { useCall, useJoinCallButtonDisabledTooltip } from "../hooks/useCall"; -import AccessibleButton, { ButtonEvent } from "../components/views/elements/AccessibleButton"; +import { ButtonEvent } from "../components/views/elements/AccessibleButton"; import { useDispatcher } from "../hooks/useDispatcher"; import { ActionPayload } from "../dispatcher/payloads"; import { Call } from "../models/Call"; @@ -53,15 +54,15 @@ function JoinCallButtonWithCall({ onClick, call }: JoinCallButtonWithCallProps): const disabledTooltip = useJoinCallButtonDisabledTooltip(call); return ( - {_t("action|join")} - + ); } @@ -177,12 +178,16 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element { {call ? ( ) : ( - + {_t("action|join")} - + )} -
@@ -709,20 +709,20 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t class="mx_MessageComposer_actions" >
diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap index 3ec58f59a69..72b1e32f5c9 100644 --- a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap +++ b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap @@ -10,9 +10,9 @@ exports[` when rendered should render as expected 1`] = ` aria-haspopup="true" aria-label="User menu" class="mx_AccessibleButton mx_UserMenu_contextMenuButton" + data-state="closed" role="button" tabindex="0" - title="User menu" >
", () => { diff --git a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap index 62847f2dc47..84f0b9cd2d2 100644 --- a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap +++ b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap @@ -24,10 +24,10 @@ exports[` renders map correctly 1`] = ` >
renders map correctly 1`] = `
renders buttons 1`] = ` >
renders buttons 1`] = `
", () => { it("renders close button correctly when encryption panel with a pending verification request", () => { renderComponent({ phase: RightPanelPhases.EncryptionPanel, verificationRequest }); - expect(screen.getByTestId("base-card-close-button")).toHaveAttribute("title", "Cancel"); + screen.getByTestId("base-card-close-button").focus(); + expect(screen.getByRole("tooltip")).toHaveTextContent("Cancel"); }); }); @@ -355,11 +356,8 @@ describe("", () => { // click it await userEvent.click(devicesButton); - // there should now be a button with the device id ... - const deviceButton = screen.getByRole("button", { description: "d1" }); - - // ... which should contain the device name - expect(within(deviceButton).getByText("my device")).toBeInTheDocument(); + // there should now be a button with the device id which should contain the device name + expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument(); }); it("renders ", async () => { @@ -460,7 +458,11 @@ describe("", () => { const renderComponent = (props = {}) => { const Wrapper = (wrapperProps = {}) => { - return ; + return ( + + + + ); }; return render(, { diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap index da9346dbd41..4397e124b69 100644 --- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap @@ -4,9 +4,9 @@ exports[` ambiguous display name 1`] = `
with display name 1`] = `
without display name 1`] = `
with crypto enabled renders 1`] = ` >
renders device and correct security card when class="mx_DeviceTile_actions" >
renders device and correct security card when class="mx_DeviceTile_actions" >
renders QR code 1`] = ` >
@@ -721,10 +721,10 @@ exports[` renders spinner while connecting 1`] = ` >
@@ -783,10 +783,10 @@ exports[` renders spinner while loading 1`] = ` >
@@ -833,10 +833,10 @@ exports[` renders spinner while signing in 1`] = ` >
@@ -895,10 +895,10 @@ exports[` renders spinner while verifying 1`] = ` >
@@ -948,10 +948,10 @@ exports[` renders spinner whilst QR generating 1`] = ` >
diff --git a/test/components/views/spaces/SpacePanel-test.tsx b/test/components/views/spaces/SpacePanel-test.tsx index c05db7ae8a9..cf1c4b26a74 100644 --- a/test/components/views/spaces/SpacePanel-test.tsx +++ b/test/components/views/spaces/SpacePanel-test.tsx @@ -15,10 +15,10 @@ limitations under the License. */ import React from "react"; -import { render, screen, fireEvent, act } from "@testing-library/react"; import { mocked } from "jest-mock"; import { MatrixClient, Room } from "matrix-js-sdk/src/matrix"; +import { render, screen, fireEvent, act } from "../../.."; import UnwrappedSpacePanel from "../../../../src/components/views/spaces/SpacePanel"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MetaSpace, SpaceKey } from "../../../../src/stores/spaces"; diff --git a/test/index.ts b/test/index.ts new file mode 100644 index 00000000000..e48b0940471 --- /dev/null +++ b/test/index.ts @@ -0,0 +1,36 @@ +/* +Copyright 2022 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 { ReactElement } from "react"; +import { TooltipProvider } from "@vector-im/compound-web"; +import { queries, Queries, render as baseRender, RenderOptions, RenderResult } from "@testing-library/react"; + +export * from "@testing-library/react"; + +// Wrapper around RTL render function to provide the TooltipProvider from Compound/Radix +export function render< + Q extends Queries = typeof queries, + Container extends Element | DocumentFragment = HTMLElement, + BaseElement extends Element | DocumentFragment = Container, +>( + ui: ReactElement, + options?: Omit, "queries" | "wrapper">, +): RenderResult { + return baseRender(ui, { + ...options, + wrapper: TooltipProvider, + }); +} diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx index 988d2b52e6f..a16b2397708 100644 --- a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx +++ b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx @@ -13,8 +13,8 @@ limitations under the License. import React from "react"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; -import { render, RenderResult } from "@testing-library/react"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastHeader, VoiceBroadcastLiveness } from "../../../../src/voice-broadcast"; import { mkRoom, stubClient } from "../../../test-utils"; diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap index c378b9737d4..77b6f975404 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap @@ -24,8 +24,8 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
@@ -81,8 +81,8 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
@@ -138,8 +138,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
@@ -211,8 +211,8 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx index adc3a558241..fa8f017ef1a 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx @@ -16,10 +16,10 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; -import { act, render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; +import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastLiveness, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx index a15efc86bc6..9861808f3d9 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx @@ -17,9 +17,9 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; -import { act, render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastPlaybacksStore, VoiceBroadcastPreRecording, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx index 7d3fd700f57..27c62f4e062 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React from "react"; -import { render, RenderResult } from "@testing-library/react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx index bb374ea73ab..f8bf06891b5 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx @@ -16,10 +16,10 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; -import { render, RenderResult } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastLiveness, diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap index 722f44886bd..a12d9aa9e7b 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap @@ -27,8 +27,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
@@ -157,8 +157,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
@@ -283,8 +283,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
@@ -397,8 +397,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
@@ -511,8 +511,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
@@ -633,8 +633,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
@@ -727,8 +727,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap index c630405fba7..bf56201da03 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap @@ -39,8 +39,8 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap index 799af889bc9..6e5370b0347 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap @@ -27,8 +27,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
@@ -80,8 +80,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap index 3daf466827f..b0e5ed6eca4 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap @@ -39,8 +39,8 @@ exports[` when rendering a { state: 'pause',
@@ -115,8 +115,8 @@ exports[` when rendering a { state: 'playing'
@@ -210,8 +210,8 @@ exports[` when rendering a buffering broadcas
@@ -294,8 +294,8 @@ exports[` when rendering a playing broadcast
@@ -370,8 +370,8 @@ exports[` when rendering a stopped broadcast
From d4ef09a39ad5bef1db4a45dad97b850cbd17dcb7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 15 Jan 2024 11:29:04 +0000 Subject: [PATCH 03/23] Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/LeftPanel.tsx | 7 ++-- src/components/structures/SpaceHierarchy.tsx | 4 +-- .../views/dialogs/spotlight/TooltipOption.tsx | 4 +-- src/components/views/rooms/EmojiButton.tsx | 1 + src/components/views/rooms/EntityTile.tsx | 1 + .../views/rooms/LegacyRoomHeader.tsx | 4 +-- .../views/rooms/MessageComposer.tsx | 5 +-- .../views/rooms/MessageComposerButtons.tsx | 6 ++-- src/components/views/rooms/RoomKnocksBar.tsx | 2 ++ .../devices/DeviceExpandDetailsButton.tsx | 11 +++--- src/i18n/strings/en_EN.json | 1 - src/toasts/IncomingCallToast.tsx | 19 ++++++---- src/toasts/IncomingLegacyCallToast.tsx | 3 +- test/components/structures/LeftPanel-test.tsx | 2 +- .../structures/LoggedInView-test.tsx | 7 +++- .../structures/PipContainer-test.tsx | 2 +- test/components/structures/UserMenu-test.tsx | 2 +- .../__snapshots__/RoomView-test.tsx.snap | 12 +++---- .../__snapshots__/UserMenu-test.tsx.snap | 2 +- .../components/structures/auth/Login-test.tsx | 2 +- .../audio_messages/RecordingPlayback-test.tsx | 2 +- .../beacon/LeftPanelLiveShareWarning-test.tsx | 2 +- .../beacon/RoomLiveShareWarning-test.tsx | 2 +- .../__snapshots__/DialogSidebar-test.tsx.snap | 4 +-- .../LeftPanelLiveShareWarning-test.tsx.snap | 2 +- .../RoomLiveShareWarning-test.tsx.snap | 2 +- .../location/LocationViewDialog-test.tsx | 2 +- .../views/location/ZoomButtons-test.tsx | 2 +- .../LocationViewDialog-test.tsx.snap | 4 +-- .../__snapshots__/ZoomButtons-test.tsx.snap | 4 +-- .../views/messages/TextualBody-test.tsx | 2 +- .../right_panel/PinnedMessagesCard-test.tsx | 2 +- .../views/right_panel/UserInfo-test.tsx | 18 +++++----- .../RoomSummaryCard-test.tsx.snap | 2 +- .../__snapshots__/UserInfo-test.tsx.snap | 8 ++--- .../views/rooms/MemberList-test.tsx | 2 +- .../rooms/MessageComposerButtons-test.tsx | 2 +- .../views/rooms/RoomKnocksBar-test.tsx | 2 +- .../views/rooms/RoomListHeader-test.tsx | 2 +- .../views/rooms/RoomPreviewCard-test.tsx | 2 +- .../rooms/VoiceRecordComposerTile-test.tsx | 2 +- .../__snapshots__/MemberTile-test.tsx.snap | 6 ++-- .../devices/CurrentDeviceSection-test.tsx | 2 +- .../settings/devices/LoginWithQRFlow-test.tsx | 2 +- .../LoginWithQRFlow-test.tsx.snap | 12 +++---- .../views/spaces/SpacePanel-test.tsx | 2 +- test/index.ts | 36 +++++++++++++++++++ .../atoms/VoiceBroadcastHeader-test.tsx | 2 +- .../VoiceBroadcastHeader-test.tsx.snap | 8 ++--- .../VoiceBroadcastPlaybackBody-test.tsx | 2 +- .../VoiceBroadcastPreRecordingPip-test.tsx | 2 +- .../VoiceBroadcastRecordingBody-test.tsx | 2 +- .../VoiceBroadcastSmallPlaybackBody-test.tsx | 2 +- .../VoiceBroadcastPlaybackBody-test.tsx.snap | 14 ++++---- ...oiceBroadcastPreRecordingPip-test.tsx.snap | 2 +- .../VoiceBroadcastRecordingBody-test.tsx.snap | 4 +-- ...ceBroadcastSmallPlaybackBody-test.tsx.snap | 10 +++--- 57 files changed, 166 insertions(+), 109 deletions(-) create mode 100644 test/index.ts diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 084afdaf8ba..c2454e04fb0 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -26,6 +26,7 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist"; import { Action } from "../../dispatcher/actions"; import RoomSearch from "./RoomSearch"; import ResizeNotifier from "../../utils/ResizeNotifier"; +import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import SpaceStore from "../../stores/spaces/SpaceStore"; import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces"; import { getKeyBindingsManager } from "../../KeyBindingsManager"; @@ -40,7 +41,7 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs"; import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts"; import { shouldShowComponent } from "../../customisations/helpers/UIComponents"; import { UIComponent } from "../../settings/UIFeature"; -import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton"; +import { ButtonEvent } from "../views/elements/AccessibleButton"; import PosthogTrackers from "../../PosthogTrackers"; import PageType from "../../PageTypes"; import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton"; @@ -332,7 +333,7 @@ export default class LeftPanel extends React.Component { // to start a new call if (LegacyCallHandler.instance.getSupportsPstnProtocol()) { dialPadButton = ( - { let rightButton: JSX.Element | undefined; if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) { rightButton = ( - = ({ let button: ReactElement; if (busy) { button = ( - = ({ title={_t("space|joining_space")} > - + ); } else if (joinedRoom) { button = ( diff --git a/src/components/views/dialogs/spotlight/TooltipOption.tsx b/src/components/views/dialogs/spotlight/TooltipOption.tsx index 9eb54e24c0f..2233e762d46 100644 --- a/src/components/views/dialogs/spotlight/TooltipOption.tsx +++ b/src/components/views/dialogs/spotlight/TooltipOption.tsx @@ -19,7 +19,7 @@ import React, { ComponentProps, ReactNode } from "react"; import { RovingAccessibleTooltipButton } from "../../../../accessibility/roving/RovingAccessibleTooltipButton"; import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex"; -import AccessibleButton from "../../elements/AccessibleButton"; +import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; interface TooltipOptionProps extends ComponentProps { endAdornment?: ReactNode; @@ -28,7 +28,7 @@ interface TooltipOptionProps extends ComponentProps = ({ inputRef, className, ...props }) => { const [onFocus, isActive, ref] = useRovingTabIndex(inputRef); return ( - diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx index cfb579b11cb..3fc0873f5cb 100644 --- a/src/components/views/rooms/EntityTile.tsx +++ b/src/components/views/rooms/EntityTile.tsx @@ -178,6 +178,7 @@ export default class EntityTile extends React.PureComponent {
diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index 4d27f05cefb..43b936207d3 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -32,7 +32,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons"; import E2EIcon from "./E2EIcon"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; -import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; +import { ButtonEvent } from "../elements/AccessibleButton"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import RoomTopic from "../elements/RoomTopic"; import RoomName from "../elements/RoomName"; @@ -654,7 +654,7 @@ export default class RoomHeader extends React.Component { if (this.props.viewingCall && !isVideoRoom) { if (this.props.activeCall === null) { endButtons.push( - boolean; @@ -127,7 +128,7 @@ const MessageComposerButtons: React.FC = (props: IProps) => { {mainButtons} {moreButtons.length > 0 && ( - { iconClassName="mx_MessageComposer_upload" onClick={onClick} title={_t("common|attachment")} + aria-label={_t("common|attachment")} /> ); }; diff --git a/src/components/views/rooms/RoomKnocksBar.tsx b/src/components/views/rooms/RoomKnocksBar.tsx index edac6d47a8f..24563781af5 100644 --- a/src/components/views/rooms/RoomKnocksBar.tsx +++ b/src/components/views/rooms/RoomKnocksBar.tsx @@ -98,6 +98,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => { kind="icon_primary_outline" onClick={() => handleDeny(knockMembers[0].userId)} title={_t("action|deny")} + aria-label={_t("action|deny")} > @@ -107,6 +108,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => { kind="icon_primary" onClick={() => handleApprove(knockMembers[0].userId)} title={_t("action|approve")} + aria-label={_t("action|approve")} > diff --git a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx index 0e29cfb870c..cd3cd4ccec6 100644 --- a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx +++ b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx @@ -19,11 +19,11 @@ import React, { ComponentProps } from "react"; import { Icon as CaretIcon } from "../../../../../res/img/feather-customised/dropdown-arrow.svg"; import { _t } from "../../../../languageHandler"; -import AccessibleButton from "../../elements/AccessibleButton"; +import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; type Props = Omit< - ComponentProps>, - "title" | "kind" | "className" | "onClick" + ComponentProps>, + "aria-label" | "title" | "kind" | "className" | "onClick" > & { isExpanded: boolean; onClick: () => void; @@ -36,8 +36,9 @@ export const DeviceExpandDetailsButton = }: Props): JSX.Element => { const label = isExpanded ? _t("settings|sessions|hide_details") : _t("settings|sessions|show_details"); return ( - onClick={onClick} > - + ); }; 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 bf51eccfaad..1bd8dad4cc2 100644 --- a/src/toasts/IncomingCallToast.tsx +++ b/src/toasts/IncomingCallToast.tsx @@ -28,13 +28,14 @@ import defaultDispatcher from "../dispatcher/dispatcher"; import { ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload"; import { Action } from "../dispatcher/actions"; import ToastStore from "../stores/ToastStore"; +import AccessibleTooltipButton from "../components/views/elements/AccessibleTooltipButton"; import { LiveContentSummary, LiveContentSummaryWithCall, LiveContentType, } from "../components/views/rooms/LiveContentSummary"; import { useCall, useJoinCallButtonDisabledTooltip } from "../hooks/useCall"; -import AccessibleButton, { ButtonEvent } from "../components/views/elements/AccessibleButton"; +import { ButtonEvent } from "../components/views/elements/AccessibleButton"; import { useDispatcher } from "../hooks/useDispatcher"; import { ActionPayload } from "../dispatcher/payloads"; import { Call } from "../models/Call"; @@ -53,15 +54,15 @@ function JoinCallButtonWithCall({ onClick, call }: JoinCallButtonWithCallProps): const disabledTooltip = useJoinCallButtonDisabledTooltip(call); return ( - {_t("action|join")} - + ); } @@ -177,12 +178,16 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element { {call ? ( ) : ( - + {_t("action|join")} - + )}
- `call_${callId}`; @@ -135,7 +136,7 @@ export default class IncomingLegacyCallToast extends React.Component
- ", () => { 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..9e45c16cfdb 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, diff --git a/test/components/structures/UserMenu-test.tsx b/test/components/structures/UserMenu-test.tsx index 49a6907246e..963d873241f 100644 --- a/test/components/structures/UserMenu-test.tsx +++ b/test/components/structures/UserMenu-test.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React from "react"; -import { act, render, RenderResult } from "@testing-library/react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { act, render, RenderResult } from "../.."; import UnwrappedUserMenu from "../../../src/components/structures/UserMenu"; import { stubClient, wrapInSdkContext } from "../../test-utils"; import { diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index 517d318412d..ebfe755afc6 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -462,20 +462,20 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = class="mx_MessageComposer_actions" >
@@ -709,20 +709,20 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t class="mx_MessageComposer_actions" >
diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap index 3ec58f59a69..72b1e32f5c9 100644 --- a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap +++ b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap @@ -10,9 +10,9 @@ exports[` when rendered should render as expected 1`] = ` aria-haspopup="true" aria-label="User menu" class="mx_AccessibleButton mx_UserMenu_contextMenuButton" + data-state="closed" role="button" tabindex="0" - title="User menu" >
renders sidebar correctly with beacons 1`] = `
renders sidebar correctly without beacons 1`] = `
when user has live location monitor rende
when user has live beacons and geolocation is
ambiguous display name 1`] = `
with display name 1`] = `
without display name 1`] = `
with crypto enabled renders 1`] = ` >
{ let prevMember: RoomMember | undefined; for (const tile of memberTiles) { const memberA = prevMember; - const memberB = memberListRoom.currentState.members[tile.getAttribute("title")!.split(" ")[0]]; + const memberB = memberListRoom.currentState.members[tile.getAttribute("aria-label")!.split(" ")[0]]; prevMember = memberB; // just in case an expect fails, set this early if (!memberA) { continue; diff --git a/test/components/views/rooms/MessageComposerButtons-test.tsx b/test/components/views/rooms/MessageComposerButtons-test.tsx index 2ddd8d9b016..6d3a68e0371 100644 --- a/test/components/views/rooms/MessageComposerButtons-test.tsx +++ b/test/components/views/rooms/MessageComposerButtons-test.tsx @@ -15,8 +15,8 @@ limitations under the License. */ import React from "react"; -import { render, screen } from "@testing-library/react"; +import { render, screen } from "../../.."; import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; import RoomContext from "../../../../src/contexts/RoomContext"; import { createTestClient, getRoomContext, mkStubRoom } from "../../../test-utils"; diff --git a/test/components/views/rooms/RoomKnocksBar-test.tsx b/test/components/views/rooms/RoomKnocksBar-test.tsx index 89a1863cbc2..bdd8f3ca262 100644 --- a/test/components/views/rooms/RoomKnocksBar-test.tsx +++ b/test/components/views/rooms/RoomKnocksBar-test.tsx @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { act, fireEvent, render, screen } from "@testing-library/react"; import { EventTimeline, EventType, @@ -27,6 +26,7 @@ import { } from "matrix-js-sdk/src/matrix"; import React from "react"; +import { act, fireEvent, render, screen } from "../../.."; import ErrorDialog from "../../../../src/components/views/dialogs/ErrorDialog"; import { RoomSettingsTab } from "../../../../src/components/views/dialogs/RoomSettingsDialog"; import { RoomKnocksBar } from "../../../../src/components/views/rooms/RoomKnocksBar"; diff --git a/test/components/views/rooms/RoomListHeader-test.tsx b/test/components/views/rooms/RoomListHeader-test.tsx index 47cceedd202..1706acd2b54 100644 --- a/test/components/views/rooms/RoomListHeader-test.tsx +++ b/test/components/views/rooms/RoomListHeader-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { MatrixClient, Room, EventType } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; -import { act, render, screen, fireEvent, RenderResult } from "@testing-library/react"; +import { act, render, screen, fireEvent, RenderResult } from "../../.."; import SpaceStore from "../../../../src/stores/spaces/SpaceStore"; import { MetaSpace } from "../../../../src/stores/spaces"; import _RoomListHeader from "../../../../src/components/views/rooms/RoomListHeader"; diff --git a/test/components/views/rooms/RoomPreviewCard-test.tsx b/test/components/views/rooms/RoomPreviewCard-test.tsx index c062497ec89..c53d297c1fb 100644 --- a/test/components/views/rooms/RoomPreviewCard-test.tsx +++ b/test/components/views/rooms/RoomPreviewCard-test.tsx @@ -16,9 +16,9 @@ limitations under the License. import React from "react"; import { mocked, Mocked } from "jest-mock"; -import { render, screen, act } from "@testing-library/react"; import { PendingEventOrdering, Room, RoomStateEvent, RoomType } from "matrix-js-sdk/src/matrix"; +import { render, screen, act } from "../../.."; import type { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix"; import { stubClient, wrapInMatrixClientContext, mkRoomMember } from "../../../test-utils"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; diff --git a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx index 72456f3c190..f2154b32e3e 100644 --- a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx +++ b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx @@ -15,10 +15,10 @@ limitations under the License. */ import React, { createRef, RefObject } from "react"; -import { render } from "@testing-library/react"; import { MatrixClient, MsgType, Room } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; +import { render } from "../../.."; import VoiceRecordComposerTile from "../../../../src/components/views/rooms/VoiceRecordComposerTile"; import { doMaybeLocalRoomAction } from "../../../../src/utils/local-room"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; diff --git a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap index a26d2c0fd4c..14826a5a365 100644 --- a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap @@ -5,9 +5,9 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
renders QR code 1`] = ` >
@@ -721,10 +721,10 @@ exports[` renders spinner while connecting 1`] = ` >
@@ -783,10 +783,10 @@ exports[` renders spinner while loading 1`] = ` >
@@ -833,10 +833,10 @@ exports[` renders spinner while signing in 1`] = ` >
@@ -895,10 +895,10 @@ exports[` renders spinner while verifying 1`] = ` >
@@ -948,10 +948,10 @@ exports[` renders spinner whilst QR generating 1`] = ` >
diff --git a/test/components/views/spaces/SpacePanel-test.tsx b/test/components/views/spaces/SpacePanel-test.tsx index c05db7ae8a9..cf1c4b26a74 100644 --- a/test/components/views/spaces/SpacePanel-test.tsx +++ b/test/components/views/spaces/SpacePanel-test.tsx @@ -15,10 +15,10 @@ limitations under the License. */ import React from "react"; -import { render, screen, fireEvent, act } from "@testing-library/react"; import { mocked } from "jest-mock"; import { MatrixClient, Room } from "matrix-js-sdk/src/matrix"; +import { render, screen, fireEvent, act } from "../../.."; import UnwrappedSpacePanel from "../../../../src/components/views/spaces/SpacePanel"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MetaSpace, SpaceKey } from "../../../../src/stores/spaces"; diff --git a/test/index.ts b/test/index.ts new file mode 100644 index 00000000000..e48b0940471 --- /dev/null +++ b/test/index.ts @@ -0,0 +1,36 @@ +/* +Copyright 2022 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 { ReactElement } from "react"; +import { TooltipProvider } from "@vector-im/compound-web"; +import { queries, Queries, render as baseRender, RenderOptions, RenderResult } from "@testing-library/react"; + +export * from "@testing-library/react"; + +// Wrapper around RTL render function to provide the TooltipProvider from Compound/Radix +export function render< + Q extends Queries = typeof queries, + Container extends Element | DocumentFragment = HTMLElement, + BaseElement extends Element | DocumentFragment = Container, +>( + ui: ReactElement, + options?: Omit, "queries" | "wrapper">, +): RenderResult { + return baseRender(ui, { + ...options, + wrapper: TooltipProvider, + }); +} diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx index 988d2b52e6f..a16b2397708 100644 --- a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx +++ b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx @@ -13,8 +13,8 @@ limitations under the License. import React from "react"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; -import { render, RenderResult } from "@testing-library/react"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastHeader, VoiceBroadcastLiveness } from "../../../../src/voice-broadcast"; import { mkRoom, stubClient } from "../../../test-utils"; diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap index c378b9737d4..77b6f975404 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap @@ -24,8 +24,8 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
@@ -81,8 +81,8 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
@@ -138,8 +138,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
@@ -211,8 +211,8 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx index adc3a558241..fa8f017ef1a 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx @@ -16,10 +16,10 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; -import { act, render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; +import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastLiveness, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx index a15efc86bc6..9861808f3d9 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx @@ -17,9 +17,9 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; -import { act, render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastPlaybacksStore, VoiceBroadcastPreRecording, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx index 7d3fd700f57..27c62f4e062 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React from "react"; -import { render, RenderResult } from "@testing-library/react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx index bb374ea73ab..f8bf06891b5 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx @@ -16,10 +16,10 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; -import { render, RenderResult } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastLiveness, diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap index 722f44886bd..a12d9aa9e7b 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap @@ -27,8 +27,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
@@ -157,8 +157,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
@@ -283,8 +283,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
@@ -397,8 +397,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
@@ -511,8 +511,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
@@ -633,8 +633,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
@@ -727,8 +727,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap index c630405fba7..bf56201da03 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap @@ -39,8 +39,8 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap index 799af889bc9..6e5370b0347 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap @@ -27,8 +27,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
@@ -80,8 +80,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap index 3daf466827f..b0e5ed6eca4 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap @@ -39,8 +39,8 @@ exports[` when rendering a { state: 'pause',
@@ -115,8 +115,8 @@ exports[` when rendering a { state: 'playing'
@@ -210,8 +210,8 @@ exports[` when rendering a buffering broadcas
@@ -294,8 +294,8 @@ exports[` when rendering a playing broadcast
@@ -370,8 +370,8 @@ exports[` when rendering a stopped broadcast
From 43768d8939bf78b649d6841e14df481d47abff5b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 15 Jan 2024 10:41:27 +0000 Subject: [PATCH 04/23] Deprecate AccessibleTooltipButton Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/SpaceRoomView.tsx | 3 +-- .../views/audio_messages/PlayPauseButton.tsx | 3 ++- src/components/views/beta/BetaCard.tsx | 14 +++-------- .../views/elements/AccessibleButton.tsx | 22 +++++++++++++++- .../elements/AccessibleTooltipButton.tsx | 3 +++ src/components/views/elements/AppTile.tsx | 14 +++++------ src/components/views/elements/ImageView.tsx | 14 +++++------ src/components/views/elements/SSOButtons.tsx | 5 ++-- src/components/views/messages/CallEvent.tsx | 8 +++--- .../views/messages/LegacyCallEvent.tsx | 3 +-- src/components/views/messages/TextualBody.tsx | 16 +++--------- .../views/right_panel/RoomSummaryCard.tsx | 4 +-- .../views/rooms/CollapsibleButton.tsx | 10 ++------ src/components/views/rooms/EmojiButton.tsx | 1 + src/components/views/rooms/EntityTile.tsx | 1 + .../views/rooms/LegacyRoomHeader.tsx | 4 +-- .../views/rooms/MessageComposerButtons.tsx | 1 + .../views/rooms/PinnedEventTile.tsx | 3 +-- src/components/views/rooms/RoomKnocksBar.tsx | 2 ++ src/components/views/rooms/RoomList.tsx | 4 +-- .../views/rooms/VoiceRecordComposerTile.tsx | 6 ++--- .../tabs/room/PeopleRoomSettingsTab.tsx | 2 ++ .../views/spaces/SpaceCreateMenu.tsx | 3 +-- src/components/views/spaces/SpacePanel.tsx | 25 +++++++------------ .../LegacyCallView/LegacyCallViewHeader.tsx | 8 +++--- src/i18n/strings/en_EN.json | 1 - .../components/atoms/VoiceBroadcastHeader.tsx | 5 ++-- 27 files changed, 91 insertions(+), 94 deletions(-) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index dc79a25489a..3f61f1ad3a3 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -59,7 +59,6 @@ import { defaultRoomsRenderer, } from "../views/dialogs/AddExistingToSpaceDialog"; import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton"; -import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import ErrorBoundary from "../views/elements/ErrorBoundary"; import Field from "../views/elements/Field"; import RoomFacePile from "../views/elements/RoomFacePile"; @@ -247,7 +246,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => { let settingsButton; if (shouldShowSpaceSettings(space)) { settingsButton = ( - { showSpaceSettings(space); diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index 63f266fbf74..853546a88d3 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/src/components/views/audio_messages/PlayPauseButton.tsx @@ -20,6 +20,7 @@ import classNames from "classnames"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { _t } from "../../../languageHandler"; import { Playback, PlaybackState } from "../../../audio/Playback"; +import AccessibleButton from "../elements/AccessibleButton"; type Props = Omit< ComponentProps, @@ -61,7 +62,7 @@ export default class PlayPauseButton extends React.PureComponent { }); return ( - = ({ }) => { if (onClick) { return ( - -
{tooltipTitle}
-
{tooltipCaption}
-
- } + title={tooltipTitle} + caption={tooltipCaption} onClick={onClick} > {_t("common|beta")} - + ); } diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index 1eb03792b8d..6a5e0ac10fb 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -16,6 +16,7 @@ import React, { forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react"; import classnames from "classnames"; +import { Tooltip } from "@vector-im/compound-web"; import { getKeyBindingsManager } from "../../../KeyBindingsManager"; import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts"; @@ -86,6 +87,14 @@ type Props = DynamicHtmlElementProps & * Event handler for button activation. Should be implemented exactly like a normal `onClick` handler. */ onClick: ((e: ButtonEvent) => void | Promise) | null; + /** + * The tooltip to show on hover or focus. + */ + title?: string; + /** + * The caption to show within a tooltip as above, only valid when used in conjunction with `title`. + */ + caption?: string; }; /** @@ -116,6 +125,8 @@ const AccessibleButton = forwardRef(function , ref: Ref, @@ -182,7 +193,16 @@ const AccessibleButton = forwardRef(function + {button} + + ); + } + return button; }); // Type assertion required due to forwardRef type workaround in react.d.ts diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx index 0af5cc9625f..4bb5d6effff 100644 --- a/src/components/views/elements/AccessibleTooltipButton.tsx +++ b/src/components/views/elements/AccessibleTooltipButton.tsx @@ -60,6 +60,9 @@ type Props = ComponentProps( { title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props, ref: Ref, diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index c33cfc571c3..b56152f4e17 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -24,7 +24,6 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; -import AccessibleButton from "./AccessibleButton"; import { _t } from "../../../languageHandler"; import AppPermission from "./AppPermission"; import AppWarning from "./AppWarning"; @@ -57,6 +56,7 @@ import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingSto import { SdkContextClass } from "../../../contexts/SDKContext"; import { ModuleRunner } from "../../../modules/ModuleRunner"; import { parseUrl } from "../../../utils/UrlUtils"; +import AccessibleTooltipButton from "./AccessibleTooltipButton"; interface IProps { app: IWidget | IApp; @@ -741,7 +741,7 @@ export default class AppTile extends React.Component { WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center); layoutButtons.push( - { ) : ( )} - , + , ); layoutButtons.push( - - , + , ); } @@ -781,13 +781,13 @@ export default class AppTile extends React.Component { {layoutButtons} {this.props.showPopout && !this.state.requiresClient && ( - - + )} {this.state.hasContextMenuOptions && ( { } const zoomOutButton = ( - ); const zoomInButton = ( - {
{zoomOutButton} {zoomInButton} - - - {contextMenuButton} - = ({ if (mini) { // TODO fallback icon return ( - + {icon} - + ); } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index dd2e29f51c8..e59d8037353 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -34,7 +34,7 @@ import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary import FacePile from "../elements/FacePile"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { CallDuration, SessionDuration } from "../voip/CallDuration"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; +import AccessibleButton from "../elements/AccessibleButton"; const MAX_FACES = 8; @@ -78,15 +78,15 @@ const ActiveCallEvent = forwardRef(
{call && } - {buttonText} - +
diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx index 3c8241d4ea1..a5bcf169a9b 100644 --- a/src/components/views/messages/LegacyCallEvent.tsx +++ b/src/components/views/messages/LegacyCallEvent.tsx @@ -24,7 +24,6 @@ import MemberAvatar from "../avatars/MemberAvatar"; import LegacyCallEventGrouper, { LegacyCallEventGrouperEvent } from "../../structures/LegacyCallEventGrouper"; import AccessibleButton from "../elements/AccessibleButton"; import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { formatPreciseDuration } from "../../../DateUtils"; import Clock from "../audio_messages/Clock"; @@ -114,7 +113,7 @@ export default class LegacyCallEvent extends React.PureComponent }); return ( - { 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/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 4a6ea31b488..3a33edc7c01 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -206,13 +206,13 @@ const AppRow: React.FC = ({ app, room }) => { /> )} - - = ({ } return ( - + {children} - + ); }; diff --git a/src/components/views/rooms/EmojiButton.tsx b/src/components/views/rooms/EmojiButton.tsx index 6139043a16c..6ece4172334 100644 --- a/src/components/views/rooms/EmojiButton.tsx +++ b/src/components/views/rooms/EmojiButton.tsx @@ -61,6 +61,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP iconClassName="mx_EmojiButton_icon" onClick={openMenu} title={_t("common|emoji")} + aria-label={_t("common|emoji")} inputRef={button} /> diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx index cfb579b11cb..3fc0873f5cb 100644 --- a/src/components/views/rooms/EntityTile.tsx +++ b/src/components/views/rooms/EntityTile.tsx @@ -178,6 +178,7 @@ export default class EntityTile extends React.PureComponent {
diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index 4d27f05cefb..43b936207d3 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -32,7 +32,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons"; import E2EIcon from "./E2EIcon"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; -import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; +import { ButtonEvent } from "../elements/AccessibleButton"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import RoomTopic from "../elements/RoomTopic"; import RoomName from "../elements/RoomName"; @@ -654,7 +654,7 @@ export default class RoomHeader extends React.Component { if (this.props.viewingCall && !isVideoRoom) { if (this.props.activeCall === null) { endButtons.push( - { iconClassName="mx_MessageComposer_upload" onClick={onClick} title={_t("common|attachment")} + aria-label={_t("common|attachment")} /> ); }; diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx index 1395dcc2c5a..581583d1d5a 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 = ( - = ({ room }) => { kind="icon_primary_outline" onClick={() => handleDeny(knockMembers[0].userId)} title={_t("action|deny")} + aria-label={_t("action|deny")} > @@ -107,6 +108,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => { kind="icon_primary" onClick={() => handleApprove(knockMembers[0].userId)} title={_t("action|approve")} + aria-label={_t("action|approve")} > diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 9c1fad223b1..e61266b7400 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; @@ -181,7 +181,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/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 5cc469a2958..e794b39f215 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 handleDeny(roomMember.userId)} title={_t("action|deny")} + aria-label={_t("action|deny")} > @@ -104,6 +105,7 @@ const Knock: VFC<{ kind="icon_primary" onClick={() => handleApprove(roomMember.userId)} title={_t("action|approve")} + aria-label={_t("action|approve")} > diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index 2ded20912d2..a690d3494d8 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -38,7 +38,6 @@ import { import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../languageHandler"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ContextMenu, { ChevronFace } from "../../structures/ContextMenu"; import createRoom, { IOpts as ICreateOpts } from "../../../createRoom"; import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; @@ -310,7 +309,7 @@ const SpaceCreateMenu: React.FC<{ } else { body = ( - setVisibility(null)} title={_t("action|go_back")} diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index aac1273543f..bfbab67ec0f 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -34,7 +34,6 @@ import { _t } from "../../../languageHandler"; import { useContextMenu } from "../../structures/ContextMenu"; import SpaceCreateMenu from "./SpaceCreateMenu"; import { SpaceButton, SpaceItem } from "./SpaceTreeLevel"; -import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter"; import SpaceStore from "../../../stores/spaces/SpaceStore"; import { @@ -72,6 +71,7 @@ import { NotificationState } from "../../../stores/notifications/NotificationSta import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; +import AccessibleButton from "../elements/AccessibleButton"; const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => { const invites = useEventEmitterState(SpaceStore.instance, UPDATE_INVITED_SPACES, () => { @@ -371,24 +371,17 @@ const SpacePanel: React.FC = () => { aria-label={_t("common|spaces")} > - setPanelCollapsed(!isPanelCollapsed)} title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")} - tooltip={ -
-
- {isPanelCollapsed ? _t("action|expand") : _t("action|collapse")} -
-
- {IS_MAC - ? "⌘ + ⇧ + D" - : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + - " + " + - _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + - " + D"} -
-
+ caption={ + IS_MAC + ? "⌘ + ⇧ + D" + : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + + " + " + + _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + + " + D" } /> diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx index 33484eb3ced..c60b70c932b 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx +++ b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx @@ -19,7 +19,7 @@ import React from "react"; import { _t } from "../../../../languageHandler"; import RoomAvatar from "../../avatars/RoomAvatar"; -import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; +import AccessibleButton from "../../elements/AccessibleButton"; interface LegacyCallControlsProps { onExpand?: () => void; @@ -31,21 +31,21 @@ const LegacyCallViewHeaderControls: React.FC = ({ onExp return (
{onMaximize && ( - )} {onPin && ( - )} {onExpand && ( - = ({ }); const microphoneLine = microphoneLabel && ( - {microphoneLabel} - + ); const onRoomAvatarOrNameClick = (): void => { From 2c69bcb566588c2c646eb83032586f716190c4c9 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 15 Jan 2024 12:26:57 +0000 Subject: [PATCH 05/23] Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- test/components/structures/LeftPanel-test.tsx | 2 +- .../structures/LoggedInView-test.tsx | 7 +++- .../structures/PipContainer-test.tsx | 2 +- .../components/structures/ThreadView-test.tsx | 2 +- test/components/structures/UserMenu-test.tsx | 2 +- .../__snapshots__/RoomView-test.tsx.snap | 4 +++ .../__snapshots__/UserMenu-test.tsx.snap | 2 +- .../components/structures/auth/Login-test.tsx | 2 +- .../audio_messages/RecordingPlayback-test.tsx | 2 +- .../beacon/LeftPanelLiveShareWarning-test.tsx | 2 +- .../beacon/RoomLiveShareWarning-test.tsx | 2 +- .../__snapshots__/DialogSidebar-test.tsx.snap | 4 +-- .../LeftPanelLiveShareWarning-test.tsx.snap | 2 +- .../RoomLiveShareWarning-test.tsx.snap | 2 +- .../views/elements/AppTile-test.tsx | 10 +++--- .../__snapshots__/AppTile-test.tsx.snap | 22 ++++++------ .../location/LocationViewDialog-test.tsx | 2 +- .../views/location/ZoomButtons-test.tsx | 2 +- .../LocationViewDialog-test.tsx.snap | 4 +-- .../__snapshots__/ZoomButtons-test.tsx.snap | 4 +-- .../views/messages/TextualBody-test.tsx | 2 +- .../right_panel/PinnedMessagesCard-test.tsx | 2 +- .../views/right_panel/UserInfo-test.tsx | 18 +++++----- .../RoomSummaryCard-test.tsx.snap | 2 +- .../__snapshots__/UserInfo-test.tsx.snap | 8 ++--- .../views/rooms/MemberList-test.tsx | 2 +- .../rooms/MessageComposerButtons-test.tsx | 2 +- .../views/rooms/RoomKnocksBar-test.tsx | 2 +- test/components/views/rooms/RoomList-test.tsx | 2 +- .../views/rooms/RoomListHeader-test.tsx | 2 +- .../views/rooms/RoomPreviewCard-test.tsx | 2 +- .../rooms/VoiceRecordComposerTile-test.tsx | 2 +- .../__snapshots__/MemberTile-test.tsx.snap | 9 +++-- .../devices/CurrentDeviceSection-test.tsx | 2 +- .../settings/devices/LoginWithQRFlow-test.tsx | 2 +- .../LoginWithQRFlow-test.tsx.snap | 12 +++---- .../tabs/room/PeopleRoomSettingsTab-test.tsx | 2 +- .../PeopleRoomSettingsTab-test.tsx.snap | 12 ++++--- .../views/spaces/SpacePanel-test.tsx | 2 +- test/index.ts | 36 +++++++++++++++++++ .../atoms/VoiceBroadcastHeader-test.tsx | 2 +- .../VoiceBroadcastHeader-test.tsx.snap | 8 ++--- .../VoiceBroadcastPlaybackBody-test.tsx | 2 +- .../VoiceBroadcastPreRecordingPip-test.tsx | 2 +- .../VoiceBroadcastRecordingBody-test.tsx | 2 +- .../VoiceBroadcastSmallPlaybackBody-test.tsx | 2 +- .../VoiceBroadcastPlaybackBody-test.tsx.snap | 14 ++++---- ...oiceBroadcastPreRecordingPip-test.tsx.snap | 2 +- .../VoiceBroadcastRecordingBody-test.tsx.snap | 4 +-- ...ceBroadcastSmallPlaybackBody-test.tsx.snap | 10 +++--- 50 files changed, 153 insertions(+), 99 deletions(-) create mode 100644 test/index.ts diff --git a/test/components/structures/LeftPanel-test.tsx b/test/components/structures/LeftPanel-test.tsx index 1c990aa2310..65634ceba15 100644 --- a/test/components/structures/LeftPanel-test.tsx +++ b/test/components/structures/LeftPanel-test.tsx @@ -16,9 +16,9 @@ limitations under the License. */ import React from "react"; -import { render, RenderResult, screen } from "@testing-library/react"; import { mocked } from "jest-mock"; +import { render, RenderResult, screen } from "../.."; import LeftPanel from "../../../src/components/structures/LeftPanel"; import PageType from "../../../src/PageTypes"; import ResizeNotifier from "../../../src/utils/ResizeNotifier"; 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..9e45c16cfdb 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, 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/UserMenu-test.tsx b/test/components/structures/UserMenu-test.tsx index 49a6907246e..963d873241f 100644 --- a/test/components/structures/UserMenu-test.tsx +++ b/test/components/structures/UserMenu-test.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React from "react"; -import { act, render, RenderResult } from "@testing-library/react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { act, render, RenderResult } from "../.."; import UnwrappedUserMenu from "../../../src/components/structures/UserMenu"; import { stubClient, wrapInSdkContext } from "../../test-utils"; import { diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index 517d318412d..dbead28811d 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -464,12 +464,14 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
@@ -711,12 +713,14 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap index 3ec58f59a69..72b1e32f5c9 100644 --- a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap +++ b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap @@ -10,9 +10,9 @@ exports[` when rendered should render as expected 1`] = ` aria-haspopup="true" aria-label="User menu" class="mx_AccessibleButton mx_UserMenu_contextMenuButton" + data-state="closed" role="button" tabindex="0" - title="User menu" >
renders sidebar correctly with beacons 1`] = `
renders sidebar correctly without beacons 1`] = `
when user has live location monitor rende
when user has live beacons and geolocation is
ambiguous display name 1`] = `
with display name 1`] = `
without display name 1`] = `
with crypto enabled renders 1`] = ` >
{ let prevMember: RoomMember | undefined; for (const tile of memberTiles) { const memberA = prevMember; - const memberB = memberListRoom.currentState.members[tile.getAttribute("title")!.split(" ")[0]]; + const memberB = memberListRoom.currentState.members[tile.getAttribute("aria-label")!.split(" ")[0]]; prevMember = memberB; // just in case an expect fails, set this early if (!memberA) { continue; diff --git a/test/components/views/rooms/MessageComposerButtons-test.tsx b/test/components/views/rooms/MessageComposerButtons-test.tsx index 2ddd8d9b016..6d3a68e0371 100644 --- a/test/components/views/rooms/MessageComposerButtons-test.tsx +++ b/test/components/views/rooms/MessageComposerButtons-test.tsx @@ -15,8 +15,8 @@ limitations under the License. */ import React from "react"; -import { render, screen } from "@testing-library/react"; +import { render, screen } from "../../.."; import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; import RoomContext from "../../../../src/contexts/RoomContext"; import { createTestClient, getRoomContext, mkStubRoom } from "../../../test-utils"; diff --git a/test/components/views/rooms/RoomKnocksBar-test.tsx b/test/components/views/rooms/RoomKnocksBar-test.tsx index 89a1863cbc2..bdd8f3ca262 100644 --- a/test/components/views/rooms/RoomKnocksBar-test.tsx +++ b/test/components/views/rooms/RoomKnocksBar-test.tsx @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { act, fireEvent, render, screen } from "@testing-library/react"; import { EventTimeline, EventType, @@ -27,6 +26,7 @@ import { } from "matrix-js-sdk/src/matrix"; import React from "react"; +import { act, fireEvent, render, screen } from "../../.."; import ErrorDialog from "../../../../src/components/views/dialogs/ErrorDialog"; import { RoomSettingsTab } from "../../../../src/components/views/dialogs/RoomSettingsDialog"; import { RoomKnocksBar } from "../../../../src/components/views/rooms/RoomKnocksBar"; diff --git a/test/components/views/rooms/RoomList-test.tsx b/test/components/views/rooms/RoomList-test.tsx index 5e9fd48df99..5a2ac3f19e2 100644 --- a/test/components/views/rooms/RoomList-test.tsx +++ b/test/components/views/rooms/RoomList-test.tsx @@ -16,11 +16,11 @@ limitations under the License. */ import React, { ComponentProps } from "react"; -import { render, screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; import { Room } from "matrix-js-sdk/src/matrix"; +import { render, screen, within } from "../../.."; import RoomList from "../../../../src/components/views/rooms/RoomList"; import ResizeNotifier from "../../../../src/utils/ResizeNotifier"; import { MetaSpace } from "../../../../src/stores/spaces"; diff --git a/test/components/views/rooms/RoomListHeader-test.tsx b/test/components/views/rooms/RoomListHeader-test.tsx index 47cceedd202..1706acd2b54 100644 --- a/test/components/views/rooms/RoomListHeader-test.tsx +++ b/test/components/views/rooms/RoomListHeader-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { MatrixClient, Room, EventType } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; -import { act, render, screen, fireEvent, RenderResult } from "@testing-library/react"; +import { act, render, screen, fireEvent, RenderResult } from "../../.."; import SpaceStore from "../../../../src/stores/spaces/SpaceStore"; import { MetaSpace } from "../../../../src/stores/spaces"; import _RoomListHeader from "../../../../src/components/views/rooms/RoomListHeader"; diff --git a/test/components/views/rooms/RoomPreviewCard-test.tsx b/test/components/views/rooms/RoomPreviewCard-test.tsx index c062497ec89..c53d297c1fb 100644 --- a/test/components/views/rooms/RoomPreviewCard-test.tsx +++ b/test/components/views/rooms/RoomPreviewCard-test.tsx @@ -16,9 +16,9 @@ limitations under the License. import React from "react"; import { mocked, Mocked } from "jest-mock"; -import { render, screen, act } from "@testing-library/react"; import { PendingEventOrdering, Room, RoomStateEvent, RoomType } from "matrix-js-sdk/src/matrix"; +import { render, screen, act } from "../../.."; import type { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix"; import { stubClient, wrapInMatrixClientContext, mkRoomMember } from "../../../test-utils"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; diff --git a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx index 72456f3c190..f2154b32e3e 100644 --- a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx +++ b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx @@ -15,10 +15,10 @@ limitations under the License. */ import React, { createRef, RefObject } from "react"; -import { render } from "@testing-library/react"; import { MatrixClient, MsgType, Room } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; +import { render } from "../../.."; import VoiceRecordComposerTile from "../../../../src/components/views/rooms/VoiceRecordComposerTile"; import { doMaybeLocalRoomAction } from "../../../../src/utils/local-room"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; diff --git a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap index a26d2c0fd4c..3aa8ea474fa 100644 --- a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap @@ -4,10 +4,11 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
renders QR code 1`] = ` >
@@ -721,10 +721,10 @@ exports[` renders spinner while connecting 1`] = ` >
@@ -783,10 +783,10 @@ exports[` renders spinner while loading 1`] = ` >
@@ -833,10 +833,10 @@ exports[` renders spinner while signing in 1`] = ` >
@@ -895,10 +895,10 @@ exports[` renders spinner while verifying 1`] = ` >
@@ -948,10 +948,10 @@ exports[` renders spinner whilst QR generating 1`] = ` >
diff --git a/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx b/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx index 6c9051c0afc..d494eb030c1 100644 --- a/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx +++ b/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx @@ -14,7 +14,6 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { act, fireEvent, render, screen, within } from "@testing-library/react"; import { EventTimeline, EventType, @@ -26,6 +25,7 @@ import { } from "matrix-js-sdk/src/matrix"; import React from "react"; +import { act, fireEvent, render, screen, within } from "../../../../.."; import ErrorDialog from "../../../../../../src/components/views/dialogs/ErrorDialog"; import { PeopleRoomSettingsTab } from "../../../../../../src/components/views/settings/tabs/room/PeopleRoomSettingsTab"; import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext"; diff --git a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap index 232e36f6265..1e7ec39202d 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap @@ -68,10 +68,11 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
( + ui: ReactElement, + options?: Omit, "queries" | "wrapper">, +): RenderResult { + return baseRender(ui, { + ...options, + wrapper: TooltipProvider, + }); +} diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx index 988d2b52e6f..a16b2397708 100644 --- a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx +++ b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx @@ -13,8 +13,8 @@ limitations under the License. import React from "react"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; -import { render, RenderResult } from "@testing-library/react"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastHeader, VoiceBroadcastLiveness } from "../../../../src/voice-broadcast"; import { mkRoom, stubClient } from "../../../test-utils"; diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap index c378b9737d4..77b6f975404 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap @@ -24,8 +24,8 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
@@ -81,8 +81,8 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
@@ -138,8 +138,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
@@ -211,8 +211,8 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx index adc3a558241..fa8f017ef1a 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx @@ -16,10 +16,10 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; -import { act, render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; +import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastLiveness, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx index a15efc86bc6..9861808f3d9 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx @@ -17,9 +17,9 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; -import { act, render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastPlaybacksStore, VoiceBroadcastPreRecording, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx index 7d3fd700f57..27c62f4e062 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React from "react"; -import { render, RenderResult } from "@testing-library/react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx index bb374ea73ab..f8bf06891b5 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx @@ -16,10 +16,10 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; -import { render, RenderResult } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; +import { render, RenderResult } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastLiveness, diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap index 722f44886bd..a12d9aa9e7b 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap @@ -27,8 +27,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
@@ -157,8 +157,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
@@ -283,8 +283,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
@@ -397,8 +397,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
@@ -511,8 +511,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
@@ -633,8 +633,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
@@ -727,8 +727,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap index c630405fba7..bf56201da03 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap @@ -39,8 +39,8 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap index 799af889bc9..6e5370b0347 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap @@ -27,8 +27,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
@@ -80,8 +80,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap index 3daf466827f..b0e5ed6eca4 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap @@ -39,8 +39,8 @@ exports[` when rendering a { state: 'pause',
@@ -115,8 +115,8 @@ exports[` when rendering a { state: 'playing'
@@ -210,8 +210,8 @@ exports[` when rendering a buffering broadcas
@@ -294,8 +294,8 @@ exports[` when rendering a playing broadcast
@@ -370,8 +370,8 @@ exports[` when rendering a stopped broadcast
From 42d7566f65388b1e206d7ae30a17f6fee8e7e614 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 15 Jan 2024 12:39:51 +0000 Subject: [PATCH 06/23] Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/SpaceRoomView.tsx | 3 ++- .../views/audio_messages/PlayPauseButton.tsx | 3 +-- src/components/views/elements/ImageView.tsx | 14 +++++++------- src/components/views/elements/SSOButtons.tsx | 5 +++-- src/components/views/messages/CallEvent.tsx | 8 ++++---- src/components/views/messages/LegacyCallEvent.tsx | 3 ++- .../views/right_panel/RoomSummaryCard.tsx | 4 ++-- .../molecules/VoiceBroadcastRecordingPip.tsx | 6 +++--- .../__snapshots__/RoomView-test.tsx.snap | 8 ++++++-- .../CurrentDeviceSection-test.tsx.snap | 4 ++-- .../molecules/VoiceBroadcastRecordingPip-test.tsx | 2 +- 11 files changed, 33 insertions(+), 27 deletions(-) diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 3f61f1ad3a3..dc79a25489a 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -59,6 +59,7 @@ import { defaultRoomsRenderer, } from "../views/dialogs/AddExistingToSpaceDialog"; import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton"; +import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import ErrorBoundary from "../views/elements/ErrorBoundary"; import Field from "../views/elements/Field"; import RoomFacePile from "../views/elements/RoomFacePile"; @@ -246,7 +247,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => { let settingsButton; if (shouldShowSpaceSettings(space)) { settingsButton = ( - { showSpaceSettings(space); diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index 853546a88d3..63f266fbf74 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/src/components/views/audio_messages/PlayPauseButton.tsx @@ -20,7 +20,6 @@ import classNames from "classnames"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { _t } from "../../../languageHandler"; import { Playback, PlaybackState } from "../../../audio/Playback"; -import AccessibleButton from "../elements/AccessibleButton"; type Props = Omit< ComponentProps, @@ -62,7 +61,7 @@ export default class PlayPauseButton extends React.PureComponent { }); return ( - { } const zoomOutButton = ( - ); const zoomInButton = ( - {
{zoomOutButton} {zoomInButton} - - - {contextMenuButton} - = ({ if (mini) { // TODO fallback icon return ( - + {icon} - + ); } diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx index e59d8037353..dd2e29f51c8 100644 --- a/src/components/views/messages/CallEvent.tsx +++ b/src/components/views/messages/CallEvent.tsx @@ -34,7 +34,7 @@ import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary import FacePile from "../elements/FacePile"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import { CallDuration, SessionDuration } from "../voip/CallDuration"; -import AccessibleButton from "../elements/AccessibleButton"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; const MAX_FACES = 8; @@ -78,15 +78,15 @@ const ActiveCallEvent = forwardRef(
{call && } - {buttonText} - +
diff --git a/src/components/views/messages/LegacyCallEvent.tsx b/src/components/views/messages/LegacyCallEvent.tsx index a5bcf169a9b..3c8241d4ea1 100644 --- a/src/components/views/messages/LegacyCallEvent.tsx +++ b/src/components/views/messages/LegacyCallEvent.tsx @@ -24,6 +24,7 @@ import MemberAvatar from "../avatars/MemberAvatar"; import LegacyCallEventGrouper, { LegacyCallEventGrouperEvent } from "../../structures/LegacyCallEventGrouper"; import AccessibleButton from "../elements/AccessibleButton"; import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { formatPreciseDuration } from "../../../DateUtils"; import Clock from "../audio_messages/Clock"; @@ -113,7 +114,7 @@ export default class LegacyCallEvent extends React.PureComponent }); return ( - = ({ app, room }) => { /> )} - - {toggleControl} - setShowDeviceSelect(true)} title={_t("voip|change_input_device")} > - + } label="Stop Recording" diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index ebfe755afc6..dbead28811d 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -462,20 +462,22 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = class="mx_MessageComposer_actions" >
@@ -709,20 +711,22 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t class="mx_MessageComposer_actions" >
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap index a5217693671..a1b700c003a 100644 --- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap @@ -237,8 +237,8 @@ exports[` renders device and correct security card when class="mx_DeviceTile_actions" >
renders device and correct security card when class="mx_DeviceTile_actions" >
Date: Tue, 16 Apr 2024 17:54:53 +0200 Subject: [PATCH 07/23] Fix `UserInfo-test.tsx` --- test/components/views/right_panel/UserInfo-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/views/right_panel/UserInfo-test.tsx b/test/components/views/right_panel/UserInfo-test.tsx index 1f4ea3148ef..ed8169b83a0 100644 --- a/test/components/views/right_panel/UserInfo-test.tsx +++ b/test/components/views/right_panel/UserInfo-test.tsx @@ -15,7 +15,7 @@ limitations under the License. */ import React from "react"; -import { fireEvent, render, screen, waitFor, cleanup, act } from "@testing-library/react"; +import { fireEvent, render, screen, waitFor, cleanup, act, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { Mocked, mocked } from "jest-mock"; import { From 5d1b5e62e23e1fd5164633e7e4e6b24353a359cd Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Tue, 16 Apr 2024 18:00:14 +0200 Subject: [PATCH 08/23] Update `LoginWithQRFlow-test.tsx` snapshot --- .../__snapshots__/LoginWithQRFlow-test.tsx.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap index 953e28635e8..b9216f2d636 100644 --- a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap @@ -518,10 +518,10 @@ exports[` renders QR code 1`] = ` >
@@ -650,10 +650,10 @@ exports[` renders spinner while connecting 1`] = ` >
@@ -720,10 +720,10 @@ exports[` renders spinner while loading 1`] = ` >
@@ -778,10 +778,10 @@ exports[` renders spinner while signing in 1`] = ` >
@@ -848,10 +848,10 @@ exports[` renders spinner while verifying 1`] = ` >
@@ -909,10 +909,10 @@ exports[` renders spinner whilst QR generating 1`] = ` >
From 7ac566532f851cb5992630d04d5cf3cbbec8e274 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 18 Apr 2024 16:51:37 +0200 Subject: [PATCH 09/23] Remove tooltip provider from test --- test/components/structures/LeftPanel-test.tsx | 2 +- .../structures/LoggedInView-test.tsx | 7 +--- .../structures/PipContainer-test.tsx | 2 +- .../components/structures/ThreadView-test.tsx | 2 +- test/components/structures/UserMenu-test.tsx | 2 +- .../components/structures/auth/Login-test.tsx | 2 +- .../audio_messages/RecordingPlayback-test.tsx | 2 +- .../beacon/LeftPanelLiveShareWarning-test.tsx | 2 +- .../beacon/RoomLiveShareWarning-test.tsx | 2 +- .../views/elements/AppTile-test.tsx | 2 +- .../location/LocationViewDialog-test.tsx | 2 +- .../views/location/ZoomButtons-test.tsx | 2 +- .../views/messages/TextualBody-test.tsx | 2 +- .../right_panel/PinnedMessagesCard-test.tsx | 2 +- .../views/right_panel/UserInfo-test.tsx | 6 +--- .../rooms/MessageComposerButtons-test.tsx | 2 +- .../views/rooms/RoomKnocksBar-test.tsx | 2 +- test/components/views/rooms/RoomList-test.tsx | 2 +- .../views/rooms/RoomListHeader-test.tsx | 2 +- .../views/rooms/RoomPreviewCard-test.tsx | 2 +- .../rooms/VoiceRecordComposerTile-test.tsx | 2 +- .../devices/CurrentDeviceSection-test.tsx | 2 +- .../settings/devices/LoginWithQRFlow-test.tsx | 2 +- .../tabs/room/PeopleRoomSettingsTab-test.tsx | 2 +- .../views/spaces/SpacePanel-test.tsx | 2 +- test/index.ts | 36 ------------------- .../atoms/VoiceBroadcastHeader-test.tsx | 2 +- .../VoiceBroadcastPlaybackBody-test.tsx | 2 +- .../VoiceBroadcastPreRecordingPip-test.tsx | 2 +- .../VoiceBroadcastRecordingBody-test.tsx | 2 +- .../VoiceBroadcastRecordingPip-test.tsx | 2 +- .../VoiceBroadcastSmallPlaybackBody-test.tsx | 2 +- 32 files changed, 31 insertions(+), 76 deletions(-) delete mode 100644 test/index.ts diff --git a/test/components/structures/LeftPanel-test.tsx b/test/components/structures/LeftPanel-test.tsx index 65634ceba15..4932ba480ce 100644 --- a/test/components/structures/LeftPanel-test.tsx +++ b/test/components/structures/LeftPanel-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; +import { render, RenderResult, screen } from "@testing-library/react"; -import { render, RenderResult, screen } from "../.."; import LeftPanel from "../../../src/components/structures/LeftPanel"; import PageType from "../../../src/PageTypes"; import ResizeNotifier from "../../../src/utils/ResizeNotifier"; diff --git a/test/components/structures/LoggedInView-test.tsx b/test/components/structures/LoggedInView-test.tsx index 0d523ee816c..04c8b43811a 100644 --- a/test/components/structures/LoggedInView-test.tsx +++ b/test/components/structures/LoggedInView-test.tsx @@ -19,7 +19,6 @@ 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"; @@ -60,11 +59,7 @@ 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 ee5622214fa..3240bb26fa5 100644 --- a/test/components/structures/PipContainer-test.tsx +++ b/test/components/structures/PipContainer-test.tsx @@ -20,8 +20,8 @@ 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 "@testing-library/react"; -import { screen, render, act, cleanup } from "../.."; import type { RoomMember } from "matrix-js-sdk/src/matrix"; import { useMockedCalls, diff --git a/test/components/structures/ThreadView-test.tsx b/test/components/structures/ThreadView-test.tsx index c1cc2d5939f..1a7a3147d8a 100644 --- a/test/components/structures/ThreadView-test.tsx +++ b/test/components/structures/ThreadView-test.tsx @@ -27,8 +27,8 @@ import { THREAD_RELATION_TYPE, } from "matrix-js-sdk/src/matrix"; import React, { useState } from "react"; +import { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/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/UserMenu-test.tsx b/test/components/structures/UserMenu-test.tsx index df60591d9d2..d08b31d0f4c 100644 --- a/test/components/structures/UserMenu-test.tsx +++ b/test/components/structures/UserMenu-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; +import { act, render, RenderResult, screen, waitFor } from "@testing-library/react"; -import { act, render, RenderResult, screen, waitFor } from "../.."; import UnwrappedUserMenu from "../../../src/components/structures/UserMenu"; import { stubClient, wrapInSdkContext } from "../../test-utils"; import { diff --git a/test/components/structures/auth/Login-test.tsx b/test/components/structures/auth/Login-test.tsx index b40a572d86e..8655ecfceb7 100644 --- a/test/components/structures/auth/Login-test.tsx +++ b/test/components/structures/auth/Login-test.tsx @@ -21,8 +21,8 @@ import { DELEGATED_OIDC_COMPATIBILITY, IdentityProviderBrand, OidcClientConfig } import { logger } from "matrix-js-sdk/src/logger"; import * as Matrix from "matrix-js-sdk/src/matrix"; import { OidcError } from "matrix-js-sdk/src/oidc/error"; +import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react"; -import { fireEvent, render, screen, waitForElementToBeRemoved } from "../../.."; import SdkConfig from "../../../../src/SdkConfig"; import { mkServerConfig, mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils"; import Login from "../../../../src/components/structures/auth/Login"; diff --git a/test/components/views/audio_messages/RecordingPlayback-test.tsx b/test/components/views/audio_messages/RecordingPlayback-test.tsx index 7647ced69fe..e48570021a1 100644 --- a/test/components/views/audio_messages/RecordingPlayback-test.tsx +++ b/test/components/views/audio_messages/RecordingPlayback-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; import { logger } from "matrix-js-sdk/src/logger"; +import { fireEvent, render, RenderResult } from "@testing-library/react"; -import { fireEvent, render, RenderResult } from "../../.."; import RecordingPlayback, { PlaybackLayout } from "../../../../src/components/views/audio_messages/RecordingPlayback"; import { Playback } from "../../../../src/audio/Playback"; import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext"; diff --git a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx index 9543d41a5c1..d3a5927afde 100644 --- a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx +++ b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix"; +import { act, fireEvent, render } from "@testing-library/react"; -import { act, fireEvent, render } from "../../.."; import LeftPanelLiveShareWarning from "../../../../src/components/views/beacon/LeftPanelLiveShareWarning"; import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../../src/stores/OwnBeaconStore"; import { flushPromises, makeBeaconInfoEvent } from "../../../test-utils"; diff --git a/test/components/views/beacon/RoomLiveShareWarning-test.tsx b/test/components/views/beacon/RoomLiveShareWarning-test.tsx index f0a6ca14610..1432bcc818f 100644 --- a/test/components/views/beacon/RoomLiveShareWarning-test.tsx +++ b/test/components/views/beacon/RoomLiveShareWarning-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { Room, Beacon, BeaconEvent, getBeaconInfoIdentifier, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; +import { act, fireEvent, getByTestId, render, screen, waitFor } from "@testing-library/react"; -import { act, fireEvent, getByTestId, render, screen, waitFor } from "../../.."; import RoomLiveShareWarning from "../../../../src/components/views/beacon/RoomLiveShareWarning"; import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../../src/stores/OwnBeaconStore"; import { diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx index 90f3ed09aeb..b8437d4d193 100644 --- a/test/components/views/elements/AppTile-test.tsx +++ b/test/components/views/elements/AppTile-test.tsx @@ -26,8 +26,8 @@ import { WidgetInfo, WidgetLifecycle, } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; +import { act, render, RenderResult } from "@testing-library/react"; -import { act, render, RenderResult } from "../../.."; import RightPanel from "../../../../src/components/structures/RightPanel"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import ResizeNotifier from "../../../../src/utils/ResizeNotifier"; diff --git a/test/components/views/location/LocationViewDialog-test.tsx b/test/components/views/location/LocationViewDialog-test.tsx index 72f9b3734ee..1fcb690a207 100644 --- a/test/components/views/location/LocationViewDialog-test.tsx +++ b/test/components/views/location/LocationViewDialog-test.tsx @@ -16,8 +16,8 @@ limitations under the License. import React from "react"; import { RoomMember, LocationAssetType } from "matrix-js-sdk/src/matrix"; +import { render, RenderResult } from "@testing-library/react"; -import { render, RenderResult } from "../../.."; import LocationViewDialog from "../../../../src/components/views/location/LocationViewDialog"; import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils"; import { getMockClientWithEventEmitter, makeLocationEvent } from "../../../test-utils"; diff --git a/test/components/views/location/ZoomButtons-test.tsx b/test/components/views/location/ZoomButtons-test.tsx index 398794641c4..8fbe6710ebd 100644 --- a/test/components/views/location/ZoomButtons-test.tsx +++ b/test/components/views/location/ZoomButtons-test.tsx @@ -16,8 +16,8 @@ limitations under the License. import React from "react"; import * as maplibregl from "maplibre-gl"; +import { render, screen } from "@testing-library/react"; -import { render, screen } from "../../.."; import ZoomButtons from "../../../../src/components/views/location/ZoomButtons"; describe("", () => { diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx index 6bdb40c84d8..7ef8f1bd0cb 100644 --- a/test/components/views/messages/TextualBody-test.tsx +++ b/test/components/views/messages/TextualBody-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { mocked, MockedObject } from "jest-mock"; +import { render } from "@testing-library/react"; -import { render } from "../../.."; import { getMockClientWithEventEmitter, mkEvent, mkMessage, mkStubRoom } from "../../../test-utils"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import * as languageHandler from "../../../../src/languageHandler"; diff --git a/test/components/views/right_panel/PinnedMessagesCard-test.tsx b/test/components/views/right_panel/PinnedMessagesCard-test.tsx index 475ab2fbc35..a1e88d3f77c 100644 --- a/test/components/views/right_panel/PinnedMessagesCard-test.tsx +++ b/test/components/views/right_panel/PinnedMessagesCard-test.tsx @@ -31,8 +31,8 @@ import { import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent"; import { PollResponseEvent } from "matrix-js-sdk/src/extensible_events_v1/PollResponseEvent"; import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEvent"; +import { render, act, RenderResult, fireEvent, waitForElementToBeRemoved, screen } from "@testing-library/react"; -import { render, act, RenderResult, fireEvent, waitForElementToBeRemoved, screen } from "../../.."; import { stubClient, mkEvent, mkMessage, flushPromises } from "../../../test-utils"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import PinnedMessagesCard from "../../../../src/components/views/right_panel/PinnedMessagesCard"; diff --git a/test/components/views/right_panel/UserInfo-test.tsx b/test/components/views/right_panel/UserInfo-test.tsx index d63ff6affbf..6a735b52534 100644 --- a/test/components/views/right_panel/UserInfo-test.tsx +++ b/test/components/views/right_panel/UserInfo-test.tsx @@ -663,11 +663,7 @@ describe("", () => { const renderComponent = (props = {}) => { const Wrapper = (wrapperProps = {}) => { - return ( - - - - ); + return ; }; return render(, { diff --git a/test/components/views/rooms/MessageComposerButtons-test.tsx b/test/components/views/rooms/MessageComposerButtons-test.tsx index 6d3a68e0371..2ddd8d9b016 100644 --- a/test/components/views/rooms/MessageComposerButtons-test.tsx +++ b/test/components/views/rooms/MessageComposerButtons-test.tsx @@ -15,8 +15,8 @@ limitations under the License. */ import React from "react"; +import { render, screen } from "@testing-library/react"; -import { render, screen } from "../../.."; import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; import RoomContext from "../../../../src/contexts/RoomContext"; import { createTestClient, getRoomContext, mkStubRoom } from "../../../test-utils"; diff --git a/test/components/views/rooms/RoomKnocksBar-test.tsx b/test/components/views/rooms/RoomKnocksBar-test.tsx index ba4f7518b93..c5db8f276c6 100644 --- a/test/components/views/rooms/RoomKnocksBar-test.tsx +++ b/test/components/views/rooms/RoomKnocksBar-test.tsx @@ -26,8 +26,8 @@ import { } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import React from "react"; +import { act, fireEvent, render, screen } from "@testing-library/react"; -import { act, fireEvent, render, screen } from "../../.."; import ErrorDialog from "../../../../src/components/views/dialogs/ErrorDialog"; import { RoomSettingsTab } from "../../../../src/components/views/dialogs/RoomSettingsDialog"; import { RoomKnocksBar } from "../../../../src/components/views/rooms/RoomKnocksBar"; diff --git a/test/components/views/rooms/RoomList-test.tsx b/test/components/views/rooms/RoomList-test.tsx index a630b21fcf0..e1200347b22 100644 --- a/test/components/views/rooms/RoomList-test.tsx +++ b/test/components/views/rooms/RoomList-test.tsx @@ -19,8 +19,8 @@ import React, { ComponentProps } from "react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; import { Room } from "matrix-js-sdk/src/matrix"; +import { cleanup, queryByRole, render, screen, within } from "@testing-library/react"; -import { cleanup, queryByRole, render, screen, within } from "../../.."; import RoomList from "../../../../src/components/views/rooms/RoomList"; import ResizeNotifier from "../../../../src/utils/ResizeNotifier"; import { MetaSpace } from "../../../../src/stores/spaces"; diff --git a/test/components/views/rooms/RoomListHeader-test.tsx b/test/components/views/rooms/RoomListHeader-test.tsx index 1706acd2b54..47cceedd202 100644 --- a/test/components/views/rooms/RoomListHeader-test.tsx +++ b/test/components/views/rooms/RoomListHeader-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { MatrixClient, Room, EventType } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; +import { act, render, screen, fireEvent, RenderResult } from "@testing-library/react"; -import { act, render, screen, fireEvent, RenderResult } from "../../.."; import SpaceStore from "../../../../src/stores/spaces/SpaceStore"; import { MetaSpace } from "../../../../src/stores/spaces"; import _RoomListHeader from "../../../../src/components/views/rooms/RoomListHeader"; diff --git a/test/components/views/rooms/RoomPreviewCard-test.tsx b/test/components/views/rooms/RoomPreviewCard-test.tsx index 9bd9954a43e..24c47f37d5e 100644 --- a/test/components/views/rooms/RoomPreviewCard-test.tsx +++ b/test/components/views/rooms/RoomPreviewCard-test.tsx @@ -18,8 +18,8 @@ import React from "react"; import { mocked, Mocked } from "jest-mock"; import { PendingEventOrdering, Room, RoomStateEvent, RoomType } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; +import { render, screen, act } from "@testing-library/react"; -import { render, screen, act } from "../../.."; import type { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix"; import { stubClient, wrapInMatrixClientContext, mkRoomMember } from "../../../test-utils"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; diff --git a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx index f2154b32e3e..c3b7fb1907f 100644 --- a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx +++ b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React, { createRef, RefObject } from "react"; import { MatrixClient, MsgType, Room } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; +import { render } from "@testing-library/react"; -import { render } from "../../.."; import VoiceRecordComposerTile from "../../../../src/components/views/rooms/VoiceRecordComposerTile"; import { doMaybeLocalRoomAction } from "../../../../src/utils/local-room"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; diff --git a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx index 1453fcde1a5..15266827031 100644 --- a/test/components/views/settings/devices/CurrentDeviceSection-test.tsx +++ b/test/components/views/settings/devices/CurrentDeviceSection-test.tsx @@ -15,8 +15,8 @@ limitations under the License. */ import React from "react"; +import { act, fireEvent, render } from "@testing-library/react"; -import { act, fireEvent, render } from "../../../.."; import CurrentDeviceSection from "../../../../../src/components/views/settings/devices/CurrentDeviceSection"; import { DeviceType } from "../../../../../src/utils/device/parseUserAgent"; diff --git a/test/components/views/settings/devices/LoginWithQRFlow-test.tsx b/test/components/views/settings/devices/LoginWithQRFlow-test.tsx index 81ecfe6330e..08a188d6775 100644 --- a/test/components/views/settings/devices/LoginWithQRFlow-test.tsx +++ b/test/components/views/settings/devices/LoginWithQRFlow-test.tsx @@ -16,8 +16,8 @@ limitations under the License. import React from "react"; import { RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous"; +import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"; -import { cleanup, fireEvent, render, screen, waitFor } from "../../../.."; import LoginWithQRFlow from "../../../../../src/components/views/auth/LoginWithQRFlow"; import { Click, diff --git a/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx b/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx index 9134af31574..f5d51977435 100644 --- a/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx +++ b/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx @@ -25,8 +25,8 @@ import { } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import React from "react"; +import { act, fireEvent, render, screen, within } from "@testing-library/react"; -import { act, fireEvent, render, screen, within } from "../../../../.."; import ErrorDialog from "../../../../../../src/components/views/dialogs/ErrorDialog"; import { PeopleRoomSettingsTab } from "../../../../../../src/components/views/settings/tabs/room/PeopleRoomSettingsTab"; import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext"; diff --git a/test/components/views/spaces/SpacePanel-test.tsx b/test/components/views/spaces/SpacePanel-test.tsx index b9245b98eee..6b0833932b5 100644 --- a/test/components/views/spaces/SpacePanel-test.tsx +++ b/test/components/views/spaces/SpacePanel-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; import { MatrixClient, Room } from "matrix-js-sdk/src/matrix"; +import { render, screen, fireEvent, act, cleanup } from "@testing-library/react"; -import { render, screen, fireEvent, act, cleanup } from "../../.."; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MetaSpace, SpaceKey } from "../../../../src/stores/spaces"; import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents"; diff --git a/test/index.ts b/test/index.ts deleted file mode 100644 index e48b0940471..00000000000 --- a/test/index.ts +++ /dev/null @@ -1,36 +0,0 @@ -/* -Copyright 2022 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 { ReactElement } from "react"; -import { TooltipProvider } from "@vector-im/compound-web"; -import { queries, Queries, render as baseRender, RenderOptions, RenderResult } from "@testing-library/react"; - -export * from "@testing-library/react"; - -// Wrapper around RTL render function to provide the TooltipProvider from Compound/Radix -export function render< - Q extends Queries = typeof queries, - Container extends Element | DocumentFragment = HTMLElement, - BaseElement extends Element | DocumentFragment = Container, ->( - ui: ReactElement, - options?: Omit, "queries" | "wrapper">, -): RenderResult { - return baseRender(ui, { - ...options, - wrapper: TooltipProvider, - }); -} diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx index a16b2397708..988d2b52e6f 100644 --- a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx +++ b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx @@ -13,8 +13,8 @@ limitations under the License. import React from "react"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; +import { render, RenderResult } from "@testing-library/react"; -import { render, RenderResult } from "../../.."; import { VoiceBroadcastHeader, VoiceBroadcastLiveness } from "../../../../src/voice-broadcast"; import { mkRoom, stubClient } from "../../../test-utils"; diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx index fa8f017ef1a..8f7bcefcbd4 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx @@ -18,8 +18,8 @@ import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; +import { act, render, RenderResult, screen } from "@testing-library/react"; -import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastLiveness, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx index 9861808f3d9..5190be07e4c 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx @@ -18,8 +18,8 @@ import React from "react"; import { mocked } from "jest-mock"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; import userEvent from "@testing-library/user-event"; +import { act, render, RenderResult, screen } from "@testing-library/react"; -import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastPlaybacksStore, VoiceBroadcastPreRecording, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx index 27c62f4e062..4806a01e718 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx @@ -16,8 +16,8 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { render, RenderResult } from "@testing-library/react"; -import { render, RenderResult } from "../../.."; import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx index a5daec56001..20f1698226a 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx @@ -20,8 +20,8 @@ import userEvent from "@testing-library/user-event"; import { ClientEvent, MatrixClient, MatrixEvent, SyncState } from "matrix-js-sdk/src/matrix"; import { sleep } from "matrix-js-sdk/src/utils"; import { mocked } from "jest-mock"; +import { act, render, RenderResult, screen } from "@testing-library/react"; -import { act, render, RenderResult, screen } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastRecording, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx index f8bf06891b5..cf913fbe151 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx @@ -18,8 +18,8 @@ import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; +import { render, RenderResult } from "@testing-library/react"; -import { render, RenderResult } from "../../.."; import { VoiceBroadcastInfoState, VoiceBroadcastLiveness, From 058dcf63e34dbc5e752dc69e045df3d9efe184b9 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 18 Apr 2024 17:38:32 +0200 Subject: [PATCH 10/23] Fix `AccessibleButton` --- src/components/views/elements/AccessibleButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index 6a5e0ac10fb..8d334314e17 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -125,12 +125,13 @@ const AccessibleButton = forwardRef(function , ref: Ref, ): JSX.Element { + const { title } = restProps; + const newProps: RenderedElementProps = restProps; if (disabled) { newProps["aria-disabled"] = true; From 14c0f22e72b5753ba3a5c5573a9f9c62e1266470 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 18 Apr 2024 18:38:45 +0200 Subject: [PATCH 11/23] Update snapshots --- .../structures/__snapshots__/RoomView-test.tsx.snap | 4 ++++ .../structures/__snapshots__/UserMenu-test.tsx.snap | 1 + .../views/beacon/__snapshots__/DialogSidebar-test.tsx.snap | 2 ++ .../__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap | 1 + .../__snapshots__/RoomLiveShareWarning-test.tsx.snap | 1 + .../views/elements/__snapshots__/AppTile-test.tsx.snap | 5 +++++ .../__snapshots__/LocationViewDialog-test.tsx.snap | 2 ++ .../views/location/__snapshots__/ZoomButtons-test.tsx.snap | 2 ++ .../__snapshots__/RoomSummaryCard-test.tsx.snap | 1 + .../views/right_panel/__snapshots__/UserInfo-test.tsx.snap | 4 ++++ .../views/rooms/__snapshots__/MemberTile-test.tsx.snap | 3 +++ .../devices/__snapshots__/LoginWithQRFlow-test.tsx.snap | 6 ++++++ .../room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap | 4 ++++ .../views/spaces/__snapshots__/SpacePanel-test.tsx.snap | 4 +++- .../atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap | 4 ++++ .../__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap | 7 +++++++ .../VoiceBroadcastPreRecordingPip-test.tsx.snap | 1 + .../VoiceBroadcastRecordingBody-test.tsx.snap | 2 ++ .../VoiceBroadcastSmallPlaybackBody-test.tsx.snap | 5 +++++ 19 files changed, 58 insertions(+), 1 deletion(-) diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index 360cca983b2..8968bae579a 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -467,6 +467,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] = data-state="closed" role="button" tabindex="0" + title="Emoji" />
when video broadcast when rendered should render data-state="closed" role="button" tabindex="0" + title="User menu" >
renders sidebar correctly with beacons 1`] = ` data-testid="dialog-sidebar-close" role="button" tabindex="0" + title="Close sidebar" >
renders sidebar correctly without beacons 1`] = ` data-testid="dialog-sidebar-close" role="button" tabindex="0" + title="Close sidebar" >
when user has live location monitor rende data-state="closed" role="button" tabindex="0" + title="You are sharing your live location" >
when user has live beacons and geolocation is data-testid="room-live-share-wire-error-close-button" role="button" tabindex="0" + title="Stop and close" >
@@ -163,6 +165,7 @@ exports[`AppTile for a pinned widget should render 1`] = ` data-state="closed" role="button" tabindex="0" + title="Options" >
renders map correctly 1`] = ` data-testid="map-zoom-in-button" role="button" tabindex="0" + title="Zoom in" >
renders map correctly 1`] = ` data-testid="map-zoom-out-button" role="button" tabindex="0" + title="Zoom out" >
renders buttons 1`] = ` data-testid="map-zoom-in-button" role="button" tabindex="0" + title="Zoom in" >
renders buttons 1`] = ` data-testid="map-zoom-out-button" role="button" tabindex="0" + title="Zoom out" >
renders the room summary 1`] = ` data-testid="base-card-close-button" role="button" tabindex="0" + title="Close" />
ambiguous display name 1`] = ` data-state="closed" role="button" tabindex="0" + title="deviceId" >
with display name 1`] = ` data-state="closed" role="button" tabindex="0" + title="deviceId" >
without display name 1`] = ` data-state="closed" role="button" tabindex="0" + title="deviceId" >
with crypto enabled renders 1`] = ` data-testid="base-card-close-button" role="button" tabindex="0" + title="Close" />
renders QR code 1`] = ` data-testid="back-button" role="button" tabindex="0" + title="Back" >
@@ -654,6 +655,7 @@ exports[` renders spinner while connecting 1`] = ` data-testid="back-button" role="button" tabindex="0" + title="Back" >
@@ -724,6 +726,7 @@ exports[` renders spinner while loading 1`] = ` data-testid="back-button" role="button" tabindex="0" + title="Back" >
@@ -782,6 +785,7 @@ exports[` renders spinner while signing in 1`] = ` data-testid="back-button" role="button" tabindex="0" + title="Back" >
@@ -852,6 +856,7 @@ exports[` renders spinner while verifying 1`] = ` data-testid="back-button" role="button" tabindex="0" + title="Back" >
@@ -913,6 +918,7 @@ exports[` renders spinner whilst QR generating 1`] = ` data-testid="back-button" role="button" tabindex="0" + title="Back" >
diff --git a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap index 1c720bf01d6..08c8793d0b7 100644 --- a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap @@ -73,6 +73,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`] data-state="closed" role="button" tabindex="0" + title="Deny" >
should show all activated MetaSpaces in the correct orde aria-haspopup="true" aria-label="User menu" class="mx_AccessibleButton mx_UserMenu_contextMenuButton" + data-state="closed" role="button" tabindex="0" title="User menu" @@ -34,10 +35,11 @@ exports[` should show all activated MetaSpaces in the correct orde
    when rendering a { state: 'pause', data-state="closed" role="button" tabindex="0" + title="Change input device" >
    when rendering a { state: 'playing' data-state="closed" role="button" tabindex="0" + title="Change input device" >
    when rendering a buffering broadcas data-state="closed" role="button" tabindex="0" + title="Change input device" >
    when rendering a playing broadcast data-state="closed" role="button" tabindex="0" + title="Change input device" >
    when rendering a stopped broadcast data-state="closed" role="button" tabindex="0" + title="Change input device" >
    Date: Fri, 19 Apr 2024 10:45:35 +0200 Subject: [PATCH 12/23] Revert to original import --- test/components/structures/LeftPanel-test.tsx | 2 +- test/components/structures/PipContainer-test.tsx | 2 +- test/components/structures/ThreadView-test.tsx | 2 +- test/components/structures/UserMenu-test.tsx | 2 +- test/components/structures/auth/Login-test.tsx | 2 +- test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx | 2 +- test/components/views/elements/AppTile-test.tsx | 2 +- test/components/views/location/LocationViewDialog-test.tsx | 2 +- test/components/views/right_panel/PinnedMessagesCard-test.tsx | 2 +- test/components/views/rooms/RoomKnocksBar-test.tsx | 2 +- test/components/views/rooms/RoomList-test.tsx | 2 +- test/components/views/rooms/RoomPreviewCard-test.tsx | 2 +- test/components/views/rooms/VoiceRecordComposerTile-test.tsx | 2 +- test/components/views/settings/devices/LoginWithQRFlow-test.tsx | 2 +- .../views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx | 2 +- test/components/views/spaces/SpacePanel-test.tsx | 2 +- .../components/molecules/VoiceBroadcastPlaybackBody-test.tsx | 2 +- .../components/molecules/VoiceBroadcastPreRecordingPip-test.tsx | 2 +- .../components/molecules/VoiceBroadcastRecordingBody-test.tsx | 2 +- .../components/molecules/VoiceBroadcastRecordingPip-test.tsx | 2 +- .../molecules/VoiceBroadcastSmallPlaybackBody-test.tsx | 2 +- 21 files changed, 21 insertions(+), 21 deletions(-) diff --git a/test/components/structures/LeftPanel-test.tsx b/test/components/structures/LeftPanel-test.tsx index 4932ba480ce..1c990aa2310 100644 --- a/test/components/structures/LeftPanel-test.tsx +++ b/test/components/structures/LeftPanel-test.tsx @@ -16,8 +16,8 @@ limitations under the License. */ import React from "react"; -import { mocked } from "jest-mock"; import { render, RenderResult, screen } from "@testing-library/react"; +import { mocked } from "jest-mock"; import LeftPanel from "../../../src/components/structures/LeftPanel"; import PageType from "../../../src/PageTypes"; diff --git a/test/components/structures/PipContainer-test.tsx b/test/components/structures/PipContainer-test.tsx index 3240bb26fa5..bac22091f84 100644 --- a/test/components/structures/PipContainer-test.tsx +++ b/test/components/structures/PipContainer-test.tsx @@ -16,11 +16,11 @@ 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 "@testing-library/react"; import type { RoomMember } from "matrix-js-sdk/src/matrix"; import { diff --git a/test/components/structures/ThreadView-test.tsx b/test/components/structures/ThreadView-test.tsx index 1a7a3147d8a..83eed5eb9d3 100644 --- a/test/components/structures/ThreadView-test.tsx +++ b/test/components/structures/ThreadView-test.tsx @@ -14,6 +14,7 @@ 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 { @@ -27,7 +28,6 @@ import { THREAD_RELATION_TYPE, } from "matrix-js-sdk/src/matrix"; import React, { useState } from "react"; -import { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/react"; import ThreadView from "../../../src/components/structures/ThreadView"; import MatrixClientContext from "../../../src/contexts/MatrixClientContext"; diff --git a/test/components/structures/UserMenu-test.tsx b/test/components/structures/UserMenu-test.tsx index d08b31d0f4c..22addc5a359 100644 --- a/test/components/structures/UserMenu-test.tsx +++ b/test/components/structures/UserMenu-test.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React from "react"; +import { act, render, RenderResult, screen, waitFor } from "@testing-library/react"; import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; -import { act, render, RenderResult, screen, waitFor } from "@testing-library/react"; import UnwrappedUserMenu from "../../../src/components/structures/UserMenu"; import { stubClient, wrapInSdkContext } from "../../test-utils"; diff --git a/test/components/structures/auth/Login-test.tsx b/test/components/structures/auth/Login-test.tsx index 8655ecfceb7..93a02f31db0 100644 --- a/test/components/structures/auth/Login-test.tsx +++ b/test/components/structures/auth/Login-test.tsx @@ -15,13 +15,13 @@ limitations under the License. */ import React from "react"; +import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react"; import { mocked, MockedObject } from "jest-mock"; import fetchMock from "fetch-mock-jest"; import { DELEGATED_OIDC_COMPATIBILITY, IdentityProviderBrand, OidcClientConfig } from "matrix-js-sdk/src/matrix"; import { logger } from "matrix-js-sdk/src/logger"; import * as Matrix from "matrix-js-sdk/src/matrix"; import { OidcError } from "matrix-js-sdk/src/oidc/error"; -import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react"; import SdkConfig from "../../../../src/SdkConfig"; import { mkServerConfig, mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils"; diff --git a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx index d3a5927afde..5cd3fad032b 100644 --- a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx +++ b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx @@ -16,8 +16,8 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; -import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix"; import { act, fireEvent, render } from "@testing-library/react"; +import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix"; import LeftPanelLiveShareWarning from "../../../../src/components/views/beacon/LeftPanelLiveShareWarning"; import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../../src/stores/OwnBeaconStore"; diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx index b8437d4d193..69a3b60036b 100644 --- a/test/components/views/elements/AppTile-test.tsx +++ b/test/components/views/elements/AppTile-test.tsx @@ -19,6 +19,7 @@ import { jest } from "@jest/globals"; import { Room, MatrixClient } from "matrix-js-sdk/src/matrix"; import { ClientWidgetApi, IWidget, MatrixWidgetType } from "matrix-widget-api"; import { Optional } from "matrix-events-sdk"; +import { act, render, RenderResult } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { SpiedFunction } from "jest-mock"; import { @@ -26,7 +27,6 @@ import { WidgetInfo, WidgetLifecycle, } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; -import { act, render, RenderResult } from "@testing-library/react"; import RightPanel from "../../../../src/components/structures/RightPanel"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; diff --git a/test/components/views/location/LocationViewDialog-test.tsx b/test/components/views/location/LocationViewDialog-test.tsx index 1fcb690a207..e566f0319c0 100644 --- a/test/components/views/location/LocationViewDialog-test.tsx +++ b/test/components/views/location/LocationViewDialog-test.tsx @@ -15,8 +15,8 @@ limitations under the License. */ import React from "react"; -import { RoomMember, LocationAssetType } from "matrix-js-sdk/src/matrix"; import { render, RenderResult } from "@testing-library/react"; +import { RoomMember, LocationAssetType } from "matrix-js-sdk/src/matrix"; import LocationViewDialog from "../../../../src/components/views/location/LocationViewDialog"; import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils"; diff --git a/test/components/views/right_panel/PinnedMessagesCard-test.tsx b/test/components/views/right_panel/PinnedMessagesCard-test.tsx index a1e88d3f77c..aa49c1a55e5 100644 --- a/test/components/views/right_panel/PinnedMessagesCard-test.tsx +++ b/test/components/views/right_panel/PinnedMessagesCard-test.tsx @@ -15,6 +15,7 @@ limitations under the License. */ import React from "react"; +import { render, act, RenderResult, fireEvent, waitForElementToBeRemoved, screen } from "@testing-library/react"; import { mocked } from "jest-mock"; import { MatrixEvent, @@ -31,7 +32,6 @@ import { import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent"; import { PollResponseEvent } from "matrix-js-sdk/src/extensible_events_v1/PollResponseEvent"; import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEvent"; -import { render, act, RenderResult, fireEvent, waitForElementToBeRemoved, screen } from "@testing-library/react"; import { stubClient, mkEvent, mkMessage, flushPromises } from "../../../test-utils"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; diff --git a/test/components/views/rooms/RoomKnocksBar-test.tsx b/test/components/views/rooms/RoomKnocksBar-test.tsx index c5db8f276c6..22d69863f94 100644 --- a/test/components/views/rooms/RoomKnocksBar-test.tsx +++ b/test/components/views/rooms/RoomKnocksBar-test.tsx @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { act, fireEvent, render, screen } from "@testing-library/react"; import { EventTimeline, EventType, @@ -26,7 +27,6 @@ import { } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import React from "react"; -import { act, fireEvent, render, screen } from "@testing-library/react"; import ErrorDialog from "../../../../src/components/views/dialogs/ErrorDialog"; import { RoomSettingsTab } from "../../../../src/components/views/dialogs/RoomSettingsDialog"; diff --git a/test/components/views/rooms/RoomList-test.tsx b/test/components/views/rooms/RoomList-test.tsx index e1200347b22..d92b25e347c 100644 --- a/test/components/views/rooms/RoomList-test.tsx +++ b/test/components/views/rooms/RoomList-test.tsx @@ -16,10 +16,10 @@ limitations under the License. */ import React, { ComponentProps } from "react"; +import { cleanup, queryByRole, render, screen, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; import { Room } from "matrix-js-sdk/src/matrix"; -import { cleanup, queryByRole, render, screen, within } from "@testing-library/react"; import RoomList from "../../../../src/components/views/rooms/RoomList"; import ResizeNotifier from "../../../../src/utils/ResizeNotifier"; diff --git a/test/components/views/rooms/RoomPreviewCard-test.tsx b/test/components/views/rooms/RoomPreviewCard-test.tsx index 24c47f37d5e..dbec1c72527 100644 --- a/test/components/views/rooms/RoomPreviewCard-test.tsx +++ b/test/components/views/rooms/RoomPreviewCard-test.tsx @@ -16,9 +16,9 @@ limitations under the License. import React from "react"; import { mocked, Mocked } from "jest-mock"; +import { render, screen, act } from "@testing-library/react"; import { PendingEventOrdering, Room, RoomStateEvent, RoomType } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; -import { render, screen, act } from "@testing-library/react"; import type { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix"; import { stubClient, wrapInMatrixClientContext, mkRoomMember } from "../../../test-utils"; diff --git a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx index c3b7fb1907f..72456f3c190 100644 --- a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx +++ b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React, { createRef, RefObject } from "react"; +import { render } from "@testing-library/react"; import { MatrixClient, MsgType, Room } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; -import { render } from "@testing-library/react"; import VoiceRecordComposerTile from "../../../../src/components/views/rooms/VoiceRecordComposerTile"; import { doMaybeLocalRoomAction } from "../../../../src/utils/local-room"; diff --git a/test/components/views/settings/devices/LoginWithQRFlow-test.tsx b/test/components/views/settings/devices/LoginWithQRFlow-test.tsx index 08a188d6775..614a8d3ffd4 100644 --- a/test/components/views/settings/devices/LoginWithQRFlow-test.tsx +++ b/test/components/views/settings/devices/LoginWithQRFlow-test.tsx @@ -14,9 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"; import React from "react"; import { RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous"; -import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"; import LoginWithQRFlow from "../../../../../src/components/views/auth/LoginWithQRFlow"; import { diff --git a/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx b/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx index f5d51977435..c91d0029af8 100644 --- a/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx +++ b/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { act, fireEvent, render, screen, within } from "@testing-library/react"; import { EventTimeline, EventType, @@ -25,7 +26,6 @@ import { } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import React from "react"; -import { act, fireEvent, render, screen, within } from "@testing-library/react"; import ErrorDialog from "../../../../../../src/components/views/dialogs/ErrorDialog"; import { PeopleRoomSettingsTab } from "../../../../../../src/components/views/settings/tabs/room/PeopleRoomSettingsTab"; diff --git a/test/components/views/spaces/SpacePanel-test.tsx b/test/components/views/spaces/SpacePanel-test.tsx index 6b0833932b5..d5a63d5ef52 100644 --- a/test/components/views/spaces/SpacePanel-test.tsx +++ b/test/components/views/spaces/SpacePanel-test.tsx @@ -15,9 +15,9 @@ limitations under the License. */ import React from "react"; +import { render, screen, fireEvent, act, cleanup } from "@testing-library/react"; import { mocked } from "jest-mock"; import { MatrixClient, Room } from "matrix-js-sdk/src/matrix"; -import { render, screen, fireEvent, act, cleanup } from "@testing-library/react"; import { MatrixClientPeg } from "../../../../src/MatrixClientPeg"; import { MetaSpace, SpaceKey } from "../../../../src/stores/spaces"; diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx index 8f7bcefcbd4..adc3a558241 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx @@ -16,9 +16,9 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { act, render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; -import { act, render, RenderResult, screen } from "@testing-library/react"; import { VoiceBroadcastInfoState, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx index 5190be07e4c..a15efc86bc6 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx @@ -17,8 +17,8 @@ limitations under the License. import React from "react"; import { mocked } from "jest-mock"; import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix"; -import userEvent from "@testing-library/user-event"; import { act, render, RenderResult, screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import { VoiceBroadcastPlaybacksStore, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx index 4806a01e718..7d3fd700f57 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx @@ -15,8 +15,8 @@ limitations under the License. */ import React from "react"; -import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { render, RenderResult } from "@testing-library/react"; +import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { VoiceBroadcastInfoEventType, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx index 20f1698226a..5c2371e1a0e 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx @@ -16,11 +16,11 @@ limitations under the License. // import React from "react"; +import { act, render, RenderResult, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { ClientEvent, MatrixClient, MatrixEvent, SyncState } from "matrix-js-sdk/src/matrix"; import { sleep } from "matrix-js-sdk/src/utils"; import { mocked } from "jest-mock"; -import { act, render, RenderResult, screen } from "@testing-library/react"; import { VoiceBroadcastInfoState, diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx index cf913fbe151..bb374ea73ab 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx +++ b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx @@ -16,9 +16,9 @@ limitations under the License. import React from "react"; import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix"; +import { render, RenderResult } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { mocked } from "jest-mock"; -import { render, RenderResult } from "@testing-library/react"; import { VoiceBroadcastInfoState, From ad7048afc6beea369ed68d342e272b096cd024c9 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 19 Apr 2024 11:01:43 +0200 Subject: [PATCH 13/23] Use title to populate aria-label --- src/components/views/elements/AccessibleButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx index 8d334314e17..2bdd0af1657 100644 --- a/src/components/views/elements/AccessibleButton.tsx +++ b/src/components/views/elements/AccessibleButton.tsx @@ -125,14 +125,14 @@ const AccessibleButton = forwardRef(function , ref: Ref, ): JSX.Element { - const { title } = restProps; - const newProps: RenderedElementProps = restProps; + newProps["aria-label"] = newProps["aria-label"] ?? title; if (disabled) { newProps["aria-disabled"] = true; newProps["disabled"] = true; From 52909ee3ce54c68d2725f9e770cae3f14c435663 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 19 Apr 2024 11:11:48 +0200 Subject: [PATCH 14/23] Rollback AccessibleButton or Tooltip changes. Will come in another PR --- src/components/views/beta/BetaCard.tsx | 14 ++++++++--- src/components/views/elements/AppTile.tsx | 14 +++++------ src/components/views/messages/TextualBody.tsx | 16 +++++++++--- .../views/rooms/CollapsibleButton.tsx | 10 ++++++-- src/components/views/rooms/EmojiButton.tsx | 1 - src/components/views/rooms/EntityTile.tsx | 1 - .../views/rooms/LegacyRoomHeader.tsx | 4 +-- .../views/rooms/MessageComposerButtons.tsx | 1 - .../views/rooms/PinnedEventTile.tsx | 3 ++- src/components/views/rooms/RoomKnocksBar.tsx | 2 -- src/components/views/rooms/RoomList.tsx | 4 +-- .../views/rooms/VoiceRecordComposerTile.tsx | 6 ++--- .../tabs/room/PeopleRoomSettingsTab.tsx | 2 -- .../views/spaces/SpaceCreateMenu.tsx | 3 ++- src/components/views/spaces/SpacePanel.tsx | 25 ++++++++++++------- .../LegacyCallView/LegacyCallViewHeader.tsx | 8 +++--- .../components/atoms/VoiceBroadcastHeader.tsx | 5 ++-- 17 files changed, 71 insertions(+), 48 deletions(-) diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx index f8144ae1442..84c7a27fe0f 100644 --- a/src/components/views/beta/BetaCard.tsx +++ b/src/components/views/beta/BetaCard.tsx @@ -27,6 +27,7 @@ import SdkConfig from "../../../SdkConfig"; import SettingsFlag from "../elements/SettingsFlag"; import { useFeatureEnabled } from "../../../hooks/useSettings"; import InlineSpinner from "../elements/InlineSpinner"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { shouldShowFeedback } from "../../../utils/Feedback"; // XXX: Keep this around for re-use in future Betas @@ -49,14 +50,19 @@ export const BetaPill: React.FC = ({ }) => { if (onClick) { return ( - +
    {tooltipTitle}
    +
    {tooltipCaption}
    +
    + } onClick={onClick} > {_t("common|beta")} - + ); } diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index e0c2d19f3f9..7a1b641791a 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -25,6 +25,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types"; import { logger } from "matrix-js-sdk/src/logger"; import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; +import AccessibleButton from "./AccessibleButton"; import { _t } from "../../../languageHandler"; import AppPermission from "./AppPermission"; import AppWarning from "./AppWarning"; @@ -57,7 +58,6 @@ import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingSto import { SdkContextClass } from "../../../contexts/SDKContext"; import { ModuleRunner } from "../../../modules/ModuleRunner"; import { parseUrl } from "../../../utils/UrlUtils"; -import AccessibleTooltipButton from "./AccessibleTooltipButton"; interface IProps { app: IWidget | IApp; @@ -749,7 +749,7 @@ export default class AppTile extends React.Component { WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center); layoutButtons.push( - { ) : ( )} - , + , ); layoutButtons.push( - - , + , ); } @@ -789,13 +789,13 @@ export default class AppTile extends React.Component { {layoutButtons} {this.props.showPopout && !this.state.requiresClient && ( - - + )} {this.state.hasContextMenuOptions && ( { 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/rooms/CollapsibleButton.tsx b/src/components/views/rooms/CollapsibleButton.tsx index 157e7f7a1a9..c2c658de103 100644 --- a/src/components/views/rooms/CollapsibleButton.tsx +++ b/src/components/views/rooms/CollapsibleButton.tsx @@ -18,6 +18,7 @@ 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"; @@ -42,8 +43,13 @@ export const CollapsibleButton: React.FC = ({ } return ( - + {children} - + ); }; diff --git a/src/components/views/rooms/EmojiButton.tsx b/src/components/views/rooms/EmojiButton.tsx index 6ece4172334..6139043a16c 100644 --- a/src/components/views/rooms/EmojiButton.tsx +++ b/src/components/views/rooms/EmojiButton.tsx @@ -61,7 +61,6 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP iconClassName="mx_EmojiButton_icon" onClick={openMenu} title={_t("common|emoji")} - aria-label={_t("common|emoji")} inputRef={button} /> diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx index 3fc0873f5cb..cfb579b11cb 100644 --- a/src/components/views/rooms/EntityTile.tsx +++ b/src/components/views/rooms/EntityTile.tsx @@ -178,7 +178,6 @@ export default class EntityTile extends React.PureComponent {
    diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx index 85dca5f87d9..5fab692046d 100644 --- a/src/components/views/rooms/LegacyRoomHeader.tsx +++ b/src/components/views/rooms/LegacyRoomHeader.tsx @@ -32,7 +32,7 @@ import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons"; import E2EIcon from "./E2EIcon"; import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar"; -import { ButtonEvent } from "../elements/AccessibleButton"; +import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import RoomTopic from "../elements/RoomTopic"; import RoomName from "../elements/RoomName"; @@ -658,7 +658,7 @@ export default class RoomHeader extends React.Component { if (this.props.viewingCall && !isVideoRoom) { if (this.props.activeCall === null) { endButtons.push( - { iconClassName="mx_MessageComposer_upload" onClick={onClick} title={_t("common|attachment")} - aria-label={_t("common|attachment")} /> ); }; diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx index 581583d1d5a..1395dcc2c5a 100644 --- a/src/components/views/rooms/PinnedEventTile.tsx +++ b/src/components/views/rooms/PinnedEventTile.tsx @@ -27,6 +27,7 @@ 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"; @@ -75,7 +76,7 @@ export default class PinnedEventTile extends React.Component { let unpinButton: JSX.Element | undefined; if (this.props.onUnpinClicked) { unpinButton = ( - = ({ room }) => { kind="icon_primary_outline" onClick={() => handleDeny(knockMembers[0].userId)} title={_t("action|deny")} - aria-label={_t("action|deny")} > @@ -109,7 +108,6 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => { kind="icon_primary" onClick={() => handleApprove(knockMembers[0].userId)} title={_t("action|approve")} - aria-label={_t("action|approve")} > diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx index 426cbc80867..073950e30f4 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/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index 1001def3869..70cabb474c9 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx @@ -19,6 +19,7 @@ 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"; @@ -43,7 +44,6 @@ 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 handleDeny(roomMember.userId)} title={_t("action|deny")} - aria-label={_t("action|deny")} > @@ -106,7 +105,6 @@ const Knock: VFC<{ kind="icon_primary" onClick={() => handleApprove(roomMember.userId)} title={_t("action|approve")} - aria-label={_t("action|approve")} > diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index a690d3494d8..2ded20912d2 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -38,6 +38,7 @@ import { import { logger } from "matrix-js-sdk/src/logger"; import { _t } from "../../../languageHandler"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import ContextMenu, { ChevronFace } from "../../structures/ContextMenu"; import createRoom, { IOpts as ICreateOpts } from "../../../createRoom"; import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; @@ -309,7 +310,7 @@ const SpaceCreateMenu: React.FC<{ } else { body = ( - setVisibility(null)} title={_t("action|go_back")} diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx index 69bc8bce7c3..429a18e1344 100644 --- a/src/components/views/spaces/SpacePanel.tsx +++ b/src/components/views/spaces/SpacePanel.tsx @@ -34,6 +34,7 @@ import { _t } from "../../../languageHandler"; import { useContextMenu } from "../../structures/ContextMenu"; import SpaceCreateMenu from "./SpaceCreateMenu"; import { SpaceButton, SpaceItem } from "./SpaceTreeLevel"; +import AccessibleTooltipButton from "../elements/AccessibleTooltipButton"; import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter"; import SpaceStore from "../../../stores/spaces/SpaceStore"; import { @@ -71,7 +72,6 @@ import { NotificationState } from "../../../stores/notifications/NotificationSta import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts"; import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; import { UIComponent } from "../../../settings/UIFeature"; -import AccessibleButton from "../elements/AccessibleButton"; import { ThreadsActivityCentre } from "./threads-activity-centre/"; const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => { @@ -391,17 +391,24 @@ const SpacePanel: React.FC = () => { aria-label={_t("common|spaces")} > - setPanelCollapsed(!isPanelCollapsed)} title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")} - caption={ - IS_MAC - ? "⌘ + ⇧ + D" - : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + - " + " + - _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + - " + D" + tooltip={ +
    +
    + {isPanelCollapsed ? _t("action|expand") : _t("action|collapse")} +
    +
    + {IS_MAC + ? "⌘ + ⇧ + D" + : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + + " + " + + _t(ALTERNATE_KEY_NAME[Key.SHIFT]) + + " + D"} +
    +
    } />     diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx index c60b70c932b..33484eb3ced 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx +++ b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx @@ -19,7 +19,7 @@ import React from "react"; import { _t } from "../../../../languageHandler"; import RoomAvatar from "../../avatars/RoomAvatar"; -import AccessibleButton from "../../elements/AccessibleButton"; +import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; interface LegacyCallControlsProps { onExpand?: () => void; @@ -31,21 +31,21 @@ const LegacyCallViewHeaderControls: React.FC = ({ onExp return (
    {onMaximize && ( - )} {onPin && ( - )} {onExpand && ( - = ({ }); const microphoneLine = microphoneLabel && ( - {microphoneLabel} - + ); const onRoomAvatarOrNameClick = (): void => { From 3ddd50a046d4328bc1ac1f790e1c4e85ec4473be Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 19 Apr 2024 11:25:14 +0200 Subject: [PATCH 15/23] Rollback en.json change --- src/i18n/strings/en_EN.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 957227e99d3..0f353c820a2 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -3220,6 +3220,7 @@ "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" }, From fa9f3d5c5e439c9bb531f2be4a88a00ec755b972 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 19 Apr 2024 11:59:30 +0200 Subject: [PATCH 16/23] Update snapshots --- .../beacon/__snapshots__/DialogSidebar-test.tsx.snap | 4 ++-- .../LeftPanelLiveShareWarning-test.tsx.snap | 2 +- .../__snapshots__/RoomLiveShareWarning-test.tsx.snap | 2 +- .../elements/__snapshots__/AppTile-test.tsx.snap | 12 +++++++----- .../__snapshots__/LoginWithQRFlow-test.tsx.snap | 12 ++++++------ .../PeopleRoomSettingsTab-test.tsx.snap | 4 ---- .../__snapshots__/VoiceBroadcastHeader-test.tsx.snap | 12 ++++-------- 7 files changed, 21 insertions(+), 27 deletions(-) diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap index c8e8a7c05c6..5ed76727c93 100644 --- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap @@ -14,12 +14,12 @@ exports[` renders sidebar correctly with beacons 1`] = ` View list
    renders sidebar correctly without beacons 1`] = ` View list
    when user has live location monitor renders correctly when minimized 1`] = `
    when user has live beacons and geolocation is Retry
should show all activated MetaSpaces in the correct orde data-state="closed" role="button" tabindex="0" - title="User menu" >
should show all activated MetaSpaces in the correct orde
when rendering a { state: 'pause',
when rendering a { state: 'playing'
when rendering a buffering broadcas
when rendering a playing broadcast
when rendering a stopped broadcast
Date: Fri, 19 Apr 2024 14:37:05 +0200 Subject: [PATCH 19/23] Use label instead of title in test --- playwright/e2e/read-receipts/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/playwright/e2e/read-receipts/index.ts b/playwright/e2e/read-receipts/index.ts index 6b9a8381d27..e201a444c30 100644 --- a/playwright/e2e/read-receipts/index.ts +++ b/playwright/e2e/read-receipts/index.ts @@ -403,7 +403,7 @@ class Helpers { * tests we only open the threads panel.) */ async closeThreadsPanel() { - await this.page.locator(".mx_RightPanel").getByTitle("Close").click(); + await this.page.locator(".mx_RightPanel").getByLabel("Close").click(); await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible(); } @@ -411,7 +411,7 @@ class Helpers { * Return to the list of threads, given we are viewing a single thread. */ async backToThreadsList() { - await this.page.locator(".mx_RightPanel").getByTitle("Threads").click(); + await this.page.locator(".mx_RightPanel").getByLabel("Threads").click(); } /** From 21d568d815ccf84875d9a97373a91ba05e850835 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 19 Apr 2024 15:59:32 +0200 Subject: [PATCH 20/23] Use label instead of title in TAC test --- playwright/e2e/spaces/threads-activity-centre/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playwright/e2e/spaces/threads-activity-centre/index.ts b/playwright/e2e/spaces/threads-activity-centre/index.ts index 7ad477541af..8bafe2e8049 100644 --- a/playwright/e2e/spaces/threads-activity-centre/index.ts +++ b/playwright/e2e/spaces/threads-activity-centre/index.ts @@ -341,7 +341,7 @@ export class Helpers { */ assertThreadPanelFocused() { return expect( - this.page.locator(".mx_ThreadPanel").locator(".mx_BaseCard_header").getByTitle("Close"), + this.page.locator(".mx_ThreadPanel").locator(".mx_BaseCard_header").getByLabel("Close"), ).toBeFocused(); } From 964d8795d1d3f3046082f9d42e097ef9c67676d2 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 19 Apr 2024 17:04:25 +0200 Subject: [PATCH 21/23] Use label instead of title in read-receipt test --- playwright/e2e/read-receipts/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playwright/e2e/read-receipts/index.ts b/playwright/e2e/read-receipts/index.ts index e201a444c30..4dd0450fb9c 100644 --- a/playwright/e2e/read-receipts/index.ts +++ b/playwright/e2e/read-receipts/index.ts @@ -539,7 +539,7 @@ class Helpers { const threadPanel = this.page.locator(".mx_ThreadPanel"); await expect(threadPanel).toBeVisible(); await threadPanel.evaluate(($panel) => { - const $button = $panel.querySelector('.mx_BaseCard_back[title="Threads"]'); + const $button = $panel.querySelector('.mx_BaseCard_back[aria-label="Threads"]'); // If the Threads back button is present then click it - the // threads button can open either threads list or thread panel if ($button) { From bc2530dfdc992618dd4c107f86434e0c64b211bb Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Mon, 22 Apr 2024 14:35:52 +0200 Subject: [PATCH 22/23] Remove tooltip for ContextMenu --- .../context_menu/ContextMenuButton.tsx | 1 - .../__snapshots__/UserMenu-test.tsx.snap | 1 - .../__snapshots__/AppTile-test.tsx.snap | 4 --- .../CurrentDeviceSection-test.tsx.snap | 32 ++++++++++++------- .../SessionManagerTab-test.tsx.snap | 4 +++ .../__snapshots__/SpacePanel-test.tsx.snap | 1 - 6 files changed, 25 insertions(+), 18 deletions(-) diff --git a/src/accessibility/context_menu/ContextMenuButton.tsx b/src/accessibility/context_menu/ContextMenuButton.tsx index 6ef6afef379..8f6113dbd29 100644 --- a/src/accessibility/context_menu/ContextMenuButton.tsx +++ b/src/accessibility/context_menu/ContextMenuButton.tsx @@ -36,7 +36,6 @@ export const ContextMenuButton = forwardRef(function when video broadcast when rendered should render aria-haspopup="true" aria-label="User menu" class="mx_AccessibleButton mx_UserMenu_contextMenuButton" - data-state="closed" role="button" tabindex="0" > diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap index 166d49786e4..820c4588256 100644 --- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap @@ -36,7 +36,6 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] = aria-haspopup="true" aria-label="Options" class="mx_AccessibleButton mx_BaseCard_header_title_button--option" - data-state="closed" role="button" tabindex="0" /> @@ -163,7 +162,6 @@ exports[`AppTile for a pinned widget should render 1`] = ` aria-haspopup="true" aria-label="Options" class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button" - data-state="closed" role="button" tabindex="0" > @@ -252,7 +250,6 @@ exports[`AppTile for a pinned widget should render permission request 1`] = ` aria-haspopup="true" aria-label="Options" class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button" - data-state="closed" role="button" tabindex="0" > @@ -408,7 +405,6 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = ` aria-haspopup="true" aria-label="Options" class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button" - data-state="closed" role="button" tabindex="0" > diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap index a1b700c003a..2cd642eac92 100644 --- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap @@ -135,20 +135,26 @@ exports[` handles when device is falsy 1`] = ` > Current session -
renders device and correct security card when