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
2023-05-25 09:42:09 +01:00 · 2023-05-25 09:42:09 +01:00 · f52fab39fc
commit f52fab39fc
parent f4a265b2c7
23 changed files with 78 additions and 7 deletions
--- 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}
--- 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));

--- 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", () => {
--- 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"
--- 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;
--- 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: [],
--- 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),
 }));
--- 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
--- 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
--- 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
--- 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
--- 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;
--- 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;
--- 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";
--- 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
--- 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
--- 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
--- 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({
--- 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"
        />
--- 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,
--- 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
--- 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";
--- 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