diff --git a/src/components/views/elements/TextWithTooltip.tsx b/src/components/views/elements/TextWithTooltip.tsx index a72cd82faa2..3ebdac55113 100644 --- a/src/components/views/elements/TextWithTooltip.tsx +++ b/src/components/views/elements/TextWithTooltip.tsx @@ -35,10 +35,6 @@ 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 ( , 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/structures/RoomView-test.tsx b/test/components/structures/RoomView-test.tsx index 2d3857a8cbf..8670d068852 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 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 9af31fa4a12..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`] = ` />
diff --git a/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx b/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx index 05380493d3f..1b7a6c3079b 100644 --- a/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx +++ b/test/components/views/settings/devices/FilteredDeviceListHeader-test.tsx @@ -19,6 +19,11 @@ import React from "react"; import FilteredDeviceListHeader from "../../../../../src/components/views/settings/devices/FilteredDeviceListHeader"; +// Fake random strings to give a predictable snapshot for IDs +jest.mock("matrix-js-sdk/src/randomstring", () => ({ + 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" >