From 3292eb9e3246804275006cadcbf48682fa0d6745 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 19 May 2023 14:17:51 +0100 Subject: [PATCH 1/6] Use aria descriptions instead of labels for TextWithTooltip to prevent clobbering the reading of the content --- src/components/views/elements/TextWithTooltip.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/elements/TextWithTooltip.tsx b/src/components/views/elements/TextWithTooltip.tsx index a72cd82faa2..369aba9164d 100644 --- a/src/components/views/elements/TextWithTooltip.tsx +++ b/src/components/views/elements/TextWithTooltip.tsx @@ -16,6 +16,7 @@ import React, { HTMLAttributes } from "react"; import classNames from "classnames"; +import { randomString } from "matrix-js-sdk/src/randomstring"; import TooltipTarget from "./TooltipTarget"; @@ -28,6 +29,8 @@ interface IProps extends HTMLAttributes { } export default class TextWithTooltip extends React.Component { + private id = "mx_TextWithTooltip_" + randomString(8); + public constructor(props: IProps) { super(props); } @@ -35,12 +38,9 @@ export default class TextWithTooltip extends React.Component { public render(): React.ReactNode { const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props; - if (typeof tooltip === "string") { - props["aria-label"] = tooltip; - } - return ( Date: Fri, 19 May 2023 14:34:14 +0100 Subject: [PATCH 2/6] Update snapshot --- .../right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index 9af31fa4a12..4ae411a1160 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -41,7 +41,7 @@ exports[` renders the room summary 1`] = ` />
From 5c3435bc8489a54a23d0974067e6de9f08318808 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 19 May 2023 15:25:47 +0100 Subject: [PATCH 3/6] Fix snapshots --- test/components/views/right_panel/RoomSummaryCard-test.tsx | 5 +++++ .../right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/test/components/views/right_panel/RoomSummaryCard-test.tsx b/test/components/views/right_panel/RoomSummaryCard-test.tsx index bb1318cd4d2..f8b62d8e6ce 100644 --- a/test/components/views/right_panel/RoomSummaryCard-test.tsx +++ b/test/components/views/right_panel/RoomSummaryCard-test.tsx @@ -32,6 +32,11 @@ import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../t import { PollHistoryDialog } from "../../../../src/components/views/dialogs/PollHistoryDialog"; import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks"; +// Fake random strings to give a predictable snapshot for checkbox IDs +jest.mock("matrix-js-sdk/src/randomstring", () => ({ + randomString: () => "abdefghi", +})); + describe("", () => { const userId = "@alice:domain.org"; const mockClient = getMockClientWithEventEmitter({ diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index 4ae411a1160..c7eb8bf1c8a 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -41,7 +41,7 @@ exports[` renders the room summary 1`] = ` />
From c1f84e697c15718b5ebff5ee280c59afcdb0e45e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 23 May 2023 16:31:10 +0100 Subject: [PATCH 4/6] Iterate --- src/components/views/elements/TextWithTooltip.tsx | 4 ---- src/components/views/elements/TooltipTarget.tsx | 13 +++++++++++-- .../__snapshots__/RoomSummaryCard-test.tsx.snap | 2 +- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/TextWithTooltip.tsx b/src/components/views/elements/TextWithTooltip.tsx index 369aba9164d..3ebdac55113 100644 --- a/src/components/views/elements/TextWithTooltip.tsx +++ b/src/components/views/elements/TextWithTooltip.tsx @@ -16,7 +16,6 @@ import React, { HTMLAttributes } from "react"; import classNames from "classnames"; -import { randomString } from "matrix-js-sdk/src/randomstring"; import TooltipTarget from "./TooltipTarget"; @@ -29,8 +28,6 @@ interface IProps extends HTMLAttributes { } export default class TextWithTooltip extends React.Component { - private id = "mx_TextWithTooltip_" + randomString(8); - public constructor(props: IProps) { super(props); } @@ -40,7 +37,6 @@ export default class TextWithTooltip extends React.Component { return ( , Omit { +interface IProps + extends HTMLAttributes, + Omit { tooltipTargetClassName?: string; ignoreHover?: (ev: React.MouseEvent) => boolean; } @@ -46,6 +49,12 @@ const TooltipTarget = forwardRef( }, ref, ) => { + const idRef = useRef("mx_TooltipTarget_" + randomString(8)); + // Use generated ID if one is not passed + if (id === undefined) { + id = idRef.current; + } + const [isFocused, focusProps] = useFocus(); const [isHovering, hoverProps] = useHover(ignoreHover || (() => false)); diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index c7eb8bf1c8a..146f6994ece 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -41,7 +41,7 @@ exports[` renders the room summary 1`] = ` />
From f3523abd9e612f084f8a192cc91daa02b442db7e Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 23 May 2023 17:44:45 +0100 Subject: [PATCH 5/6] Update snapshots --- test/components/structures/RoomView-test.tsx | 5 +++++ .../structures/__snapshots__/RoomView-test.tsx.snap | 4 ++++ test/components/views/beacon/BeaconListItem-test.tsx | 5 +++++ test/components/views/beacon/DialogSidebar-test.tsx | 5 +++++ test/components/views/beacon/ShareLatestLocation-test.tsx | 5 +++++ .../views/beacon/__snapshots__/BeaconListItem-test.tsx.snap | 1 + .../views/beacon/__snapshots__/DialogSidebar-test.tsx.snap | 1 + .../beacon/__snapshots__/ShareLatestLocation-test.tsx.snap | 1 + .../views/messages/__snapshots__/MLocationBody-test.tsx.snap | 2 ++ test/components/views/polls/pollHistory/PollHistory-test.tsx | 5 +++++ .../components/views/polls/pollHistory/PollListItem-test.tsx | 5 +++++ .../views/polls/pollHistory/PollListItemEnded-test.tsx | 5 +++++ .../pollHistory/__snapshots__/PollHistory-test.tsx.snap | 2 ++ .../pollHistory/__snapshots__/PollListItem-test.tsx.snap | 1 + .../__snapshots__/PollListItemEnded-test.tsx.snap | 1 + .../views/settings/devices/FilteredDeviceListHeader-test.tsx | 5 +++++ .../__snapshots__/FilteredDeviceListHeader-test.tsx.snap | 2 ++ .../views/settings/tabs/user/SessionManagerTab-test.tsx | 5 +++++ .../tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap | 1 + 19 files changed, 61 insertions(+) diff --git a/test/components/structures/RoomView-test.tsx b/test/components/structures/RoomView-test.tsx index 2d3857a8cbf..8315a5c470b 100644 --- a/test/components/structures/RoomView-test.tsx +++ b/test/components/structures/RoomView-test.tsx @@ -56,6 +56,11 @@ import WidgetUtils from "../../../src/utils/WidgetUtils"; import { WidgetType } from "../../../src/widgets/WidgetType"; import WidgetStore from "../../../src/stores/WidgetStore"; +// Fake random strings to give a predictable snapshot for IDs +jest.mock("matrix-js-sdk/src/randomstring", () => ({ + randomString: () => "abdefghi" +})); + const RoomView = wrapInMatrixClientContext(_RoomView); describe("RoomView", () => { diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap index b2591ebf3fc..251a3841b44 100644 --- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -54,6 +54,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
({ + randomString: () => "abdefghi", +})); + describe("", () => { // 14.03.2022 16:15 const now = 1647270879403; diff --git a/test/components/views/beacon/DialogSidebar-test.tsx b/test/components/views/beacon/DialogSidebar-test.tsx index a0def1f4454..6e8a0d89990 100644 --- a/test/components/views/beacon/DialogSidebar-test.tsx +++ b/test/components/views/beacon/DialogSidebar-test.tsx @@ -27,6 +27,11 @@ import { mockClientMethodsUser, } from "../../../test-utils"; +// Fake random strings to give a predictable snapshot for IDs +jest.mock("matrix-js-sdk/src/randomstring", () => ({ + randomString: () => "abdefghi", +})); + describe("", () => { const defaultProps: ComponentProps = { beacons: [], diff --git a/test/components/views/beacon/ShareLatestLocation-test.tsx b/test/components/views/beacon/ShareLatestLocation-test.tsx index 654b3dc73a5..995fe7d3e3c 100644 --- a/test/components/views/beacon/ShareLatestLocation-test.tsx +++ b/test/components/views/beacon/ShareLatestLocation-test.tsx @@ -21,6 +21,11 @@ import ShareLatestLocation from "../../../../src/components/views/beacon/ShareLa import { copyPlaintext } from "../../../../src/utils/strings"; import { flushPromises } from "../../../test-utils"; +// Fake random strings to give a predictable snapshot for IDs +jest.mock("matrix-js-sdk/src/randomstring", () => ({ + randomString: () => "abdefghi", +})); + jest.mock("../../../../src/utils/strings", () => ({ copyPlaintext: jest.fn().mockResolvedValue(undefined), })); diff --git a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap index dd1d607dd41..9b924345aa7 100644 --- a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap @@ -32,6 +32,7 @@ exports[` when a beacon is live and has locations renders beac class="mx_BeaconListItem_interactions" >
renders sidebar correctly with beacons 1`] = ` class="mx_BeaconListItem_interactions" >
renders share buttons when there is a location 1`] = `
without error renders map correctly 1`] = class="mx_MLocationBody" >
without error renders marker correctly fo class="mx_MLocationBody" >
({ + randomString: () => "abdefghi", +})); + describe("", () => { // 14.03.2022 16:15 const now = 1647270879403; diff --git a/test/components/views/polls/pollHistory/PollListItem-test.tsx b/test/components/views/polls/pollHistory/PollListItem-test.tsx index b48cddb8d83..40ecb33d781 100644 --- a/test/components/views/polls/pollHistory/PollListItem-test.tsx +++ b/test/components/views/polls/pollHistory/PollListItem-test.tsx @@ -21,6 +21,11 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix"; import { PollListItem } from "../../../../../src/components/views/polls/pollHistory/PollListItem"; import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils"; +// Fake random strings to give a predictable snapshot for IDs +jest.mock("matrix-js-sdk/src/randomstring", () => ({ + randomString: () => "abdefghi", +})); + describe("", () => { const event = makePollStartEvent("Question?", "@me:domain.org"); event.getContent().origin; diff --git a/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx b/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx index 9ba284bc6c8..c3a9f8ffda6 100644 --- a/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx +++ b/test/components/views/polls/pollHistory/PollListItemEnded-test.tsx @@ -32,6 +32,11 @@ import { unmockIntlDateTimeFormat, } from "../../../../test-utils"; +// Fake random strings to give a predictable snapshot for IDs +jest.mock("matrix-js-sdk/src/randomstring", () => ({ + randomString: () => "abdefghi", +})); + describe("", () => { const userId = "@alice:domain.org"; const roomId = "!room:domain.org"; diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap index 49762b1bbca..0784669076c 100644 --- a/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap +++ b/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap @@ -79,6 +79,7 @@ exports[` renders a list of active polls when there are polls in data-testid="pollListItem-$2" >
renders a list of active polls when there are polls in data-testid="pollListItem-$1" >
renders a poll 1`] = ` data-testid="pollListItem-$mypoll" >
renders a poll with no responses 1`] = ` data-testid="pollListItem-1" >
({ + randomString: () => "abdefghi", +})); + describe("", () => { const defaultProps = { selectedDeviceCount: 0, diff --git a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap index b8b2330ce95..9acbfbb9a8c 100644 --- a/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap +++ b/test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap @@ -7,6 +7,7 @@ exports[` renders correctly when all devices are sel data-testid="test123" >
renders correctly when no devices are sele data-testid="test123" >
({ + randomString: () => "abdefghi", +})); + describe("", () => { const aliceId = "@alice:server.org"; const deviceId = "alices_device"; diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap index 6e3fe802991..66a1e4893a1 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap @@ -328,6 +328,7 @@ exports[` goes to filtered list from security recommendatio class="mx_FilteredDeviceListHeader" >
Date: Tue, 23 May 2023 17:50:38 +0100 Subject: [PATCH 6/6] delint --- test/components/structures/RoomView-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/components/structures/RoomView-test.tsx b/test/components/structures/RoomView-test.tsx index 8315a5c470b..8670d068852 100644 --- a/test/components/structures/RoomView-test.tsx +++ b/test/components/structures/RoomView-test.tsx @@ -58,7 +58,7 @@ import WidgetStore from "../../../src/stores/WidgetStore"; // Fake random strings to give a predictable snapshot for IDs jest.mock("matrix-js-sdk/src/randomstring", () => ({ - randomString: () => "abdefghi" + randomString: () => "abdefghi", })); const RoomView = wrapInMatrixClientContext(_RoomView);