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
matrix-org · May 25, 2023 · f52fab3 · f52fab3
1 parent f4a265b
commit f52fab3
Show file tree

Hide file tree

Showing 23 changed files with 78 additions and 7 deletions.
diff --git 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<IProps> {
     public render(): React.ReactNode {
         const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
 
-        if (typeof tooltip === "string") {
-            props["aria-label"] = tooltip;
-        }
-
         return (
             <TooltipTarget
                 onClick={this.props.onClick}

diff --git a/src/components/views/elements/TooltipTarget.tsx b/src/components/views/elements/TooltipTarget.tsx
@@ -14,13 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { forwardRef, HTMLAttributes, useRef } from "react";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 
 import useFocus from "../../../hooks/useFocus";
 import useHover from "../../../hooks/useHover";
 import Tooltip, { ITooltipProps } from "./Tooltip";
 
-interface IProps extends HTMLAttributes<HTMLSpanElement>, Omit<ITooltipProps, "visible"> {
+interface IProps
+    extends HTMLAttributes<HTMLSpanElement>,
+        Omit<ITooltipProps, "visible" | "tabIndex" | "aria-describedby"> {
     tooltipTargetClassName?: string;
     ignoreHover?: (ev: React.MouseEvent) => boolean;
 }
@@ -46,6 +49,12 @@ const TooltipTarget = forwardRef<HTMLDivElement, IProps>(
         },
         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
@@ -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
@@ -54,6 +54,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
           </div>
         </div>
         <div
+          aria-describedby="mx_TooltipTarget_abdefghi"
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
           tabindex="0"
@@ -146,6 +147,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
           </div>
         </div>
         <div
+          aria-describedby="mx_TooltipTarget_abdefghi"
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
           tabindex="0"
@@ -335,6 +337,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
           </div>
         </div>
         <div
+          aria-describedby="mx_TooltipTarget_abdefghi"
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
           tabindex="0"
@@ -602,6 +605,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
           </div>
         </div>
         <div
+          aria-describedby="mx_TooltipTarget_abdefghi"
           class="mx_RoomHeader_topic mx_RoomTopic"
           dir="auto"
           tabindex="0"

diff --git a/test/components/views/beacon/BeaconListItem-test.tsx b/test/components/views/beacon/BeaconListItem-test.tsx
@@ -28,6 +28,11 @@ import {
     makeRoomWithBeacons,
 } from "../../../test-utils";
 
+// Fake random strings to give a predictable snapshot for IDs
+jest.mock("matrix-js-sdk/src/randomstring", () => ({
+    randomString: () => "abdefghi",
+}));
+
 describe("<BeaconListItem />", () => {
     // 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
@@ -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("<DialogSidebar />", () => {
     const defaultProps: ComponentProps<typeof DialogSidebar> = {
         beacons: [],

diff --git 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
@@ -32,6 +32,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
           class="mx_BeaconListItem_interactions"
         >
           <div
+            aria-describedby="mx_TooltipTarget_abdefghi"
             tabindex="0"
           >
             <a

diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -62,6 +62,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
               class="mx_BeaconListItem_interactions"
             >
               <div
+                aria-describedby="mx_TooltipTarget_abdefghi"
                 tabindex="0"
               >
                 <a

diff --git a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
 <DocumentFragment>
   <div
+    aria-describedby="mx_TooltipTarget_abdefghi"
     tabindex="0"
   >
     <a

diff --git a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -34,6 +34,7 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
     class="mx_MLocationBody"
   >
     <div
+      aria-describedby="mx_TooltipTarget_abdefghi"
       tabindex="0"
     >
       <div
@@ -66,6 +67,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
     class="mx_MLocationBody"
   >
     <div
+      aria-describedby="mx_TooltipTarget_abdefghi"
       tabindex="0"
     >
       <div

diff --git a/test/components/views/polls/pollHistory/PollHistory-test.tsx b/test/components/views/polls/pollHistory/PollHistory-test.tsx
@@ -36,6 +36,11 @@ import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 
+// Fake random strings to give a predictable snapshot for IDs
+jest.mock("matrix-js-sdk/src/randomstring", () => ({
+    randomString: () => "abdefghi",
+}));
+
 describe("<PollHistory />", () => {
     // 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
@@ -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("<PollListItem />", () => {
     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
@@ -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("<PollListItemEnded />", () => {
     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
@@ -79,6 +79,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
           data-testid="pollListItem-$2"
         >
           <div
+            aria-describedby="mx_TooltipTarget_abdefghi"
             tabindex="0"
           >
             <div
@@ -103,6 +104,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
           data-testid="pollListItem-$1"
         >
           <div
+            aria-describedby="mx_TooltipTarget_abdefghi"
             tabindex="0"
           >
             <div

diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap b/test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
@@ -7,6 +7,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
     data-testid="pollListItem-$mypoll"
   >
     <div
+      aria-describedby="mx_TooltipTarget_abdefghi"
       tabindex="0"
     >
       <div

diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap b/test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
@@ -7,6 +7,7 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
     data-testid="pollListItem-1"
   >
     <div
+      aria-describedby="mx_TooltipTarget_abdefghi"
       tabindex="0"
     >
       <div

diff --git 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("<RoomSummaryCard />", () => {
     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
@@ -41,7 +41,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           />
         </span>
         <div
-          aria-label="Not encrypted"
+          aria-describedby="mx_TooltipTarget_abdefghi"
           class="mx_TextWithTooltip_target mx_RoomSummaryCard_e2ee"
           tabindex="0"
         />

diff --git 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("<FilteredDeviceListHeader />", () => {
     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
@@ -7,6 +7,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
     data-testid="test123"
   >
     <div
+      aria-describedby="mx_TooltipTarget_abdefghi"
       tabindex="0"
     >
       <span
@@ -51,6 +52,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
     data-testid="test123"
   >
     <div
+      aria-describedby="mx_TooltipTarget_abdefghi"
       tabindex="0"
     >
       <span

diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -53,6 +53,11 @@ import { getClientInformationEventType } from "../../../../../../src/utils/devic
 
 mockPlatformPeg();
 
+// Fake random strings to give a predictable snapshot for IDs
+jest.mock("matrix-js-sdk/src/randomstring", () => ({
+    randomString: () => "abdefghi",
+}));
+
 describe("<SessionManagerTab />", () => {
     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
@@ -328,6 +328,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
   class="mx_FilteredDeviceListHeader"
 >
   <div
+    aria-describedby="mx_TooltipTarget_abdefghi"
     tabindex="0"
   >
     <span