From f52fab39fcc45e7655d7ff7b5e288e1b2767512b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 25 May 2023 09:42:09 +0100 Subject: [PATCH] Use aria descriptions instead of labels for TextWithTooltip (#10952) * Use aria descriptions instead of labels for TextWithTooltip to prevent clobbering the reading of the content * Update snapshot * Fix snapshots * Iterate * Update snapshots * delint --- src/components/views/elements/TextWithTooltip.tsx | 4 ---- src/components/views/elements/TooltipTarget.tsx | 13 +++++++++++-- test/components/structures/RoomView-test.tsx | 5 +++++ .../structures/__snapshots__/RoomView-test.tsx.snap | 4 ++++ .../components/views/beacon/BeaconListItem-test.tsx | 5 +++++ test/components/views/beacon/DialogSidebar-test.tsx | 5 +++++ .../views/beacon/ShareLatestLocation-test.tsx | 5 +++++ .../__snapshots__/BeaconListItem-test.tsx.snap | 1 + .../__snapshots__/DialogSidebar-test.tsx.snap | 1 + .../__snapshots__/ShareLatestLocation-test.tsx.snap | 1 + .../__snapshots__/MLocationBody-test.tsx.snap | 2 ++ .../views/polls/pollHistory/PollHistory-test.tsx | 5 +++++ .../views/polls/pollHistory/PollListItem-test.tsx | 5 +++++ .../polls/pollHistory/PollListItemEnded-test.tsx | 5 +++++ .../__snapshots__/PollHistory-test.tsx.snap | 2 ++ .../__snapshots__/PollListItem-test.tsx.snap | 1 + .../__snapshots__/PollListItemEnded-test.tsx.snap | 1 + .../views/right_panel/RoomSummaryCard-test.tsx | 5 +++++ .../__snapshots__/RoomSummaryCard-test.tsx.snap | 2 +- .../devices/FilteredDeviceListHeader-test.tsx | 5 +++++ .../FilteredDeviceListHeader-test.tsx.snap | 2 ++ .../settings/tabs/user/SessionManagerTab-test.tsx | 5 +++++ .../__snapshots__/SessionManagerTab-test.tsx.snap | 1 + 23 files changed, 78 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/TextWithTooltip.tsx b/src/components/views/elements/TextWithTooltip.tsx index a72cd82faa..3ebdac5511 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 2d3857a8cb..8670d06885 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 b2591ebf3f..251a3841b4 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 a0def1f445..6e8a0d8999 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 654b3dc73a..995fe7d3e3 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 dd1d607dd4..9b924345aa 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 b48cddb8d8..40ecb33d78 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 9ba284bc6c..c3a9f8ffda 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 49762b1bbc..0784669076 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 9af31fa4a1..146f6994ec 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 05380493d3..1b7a6c3079 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 b8b2330ce9..9acbfbb9a8 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 6e3fe80299..66a1e4893a 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" >