ARIA Accessibility improvements (#10675)

* Fix confusing tab indexes in EventTilePreview

* Stop using headings inside buttons

* Prefer labelledby and describedby over duplicated aria-labels

* Improve semantics of tables used in settings

* Fix types

* Update tests

* Fix timestamps

test/components/views/location/LocationShareMenu-test.tsx

@@ -72,6 +72,11 @@ jest.mock("../../../../src/Modal", () => ({
     ModalManagerEvent: { Opened: "opened" },
 }));
 
+// Fake random strings to give a predictable snapshot for IDs
+jest.mock("matrix-js-sdk/src/randomstring", () => ({
+    randomString: () => "abdefghi",
+}));
+
 describe("<LocationShareMenu />", () => {
     const userId = "@ernie:server.org";
     const mockClient = getMockClientWithEventEmitter({

test/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap

@@ -25,12 +25,16 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     <span
       class="mx_SettingsFlag_label"
     >
-      Enable live location sharing
+      <div
+        id="mx_LabelledToggleSwitch_abdefghi"
+      >
+        Enable live location sharing
+      </div>
     </span>
     <div
       aria-checked="false"
       aria-disabled="false"
-      aria-label="Enable live location sharing"
+      aria-labelledby="mx_LabelledToggleSwitch_abdefghi"
       class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
       role="switch"
       tabindex="0"

test/components/views/settings/Notifications-test.tsx

@@ -27,8 +27,10 @@ import {
     ConditionKind,
     IPushRuleCondition,
 } from "matrix-js-sdk/src/matrix";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 import { IThreepid, ThreepidMedium } from "matrix-js-sdk/src/@types/threepids";
 import { act, fireEvent, getByTestId, render, screen, waitFor, within } from "@testing-library/react";
+import { mocked } from "jest-mock";
 
 import Notifications from "../../../../src/components/views/settings/Notifications";
 import SettingsStore from "../../../../src/settings/SettingsStore";
@@ -41,6 +43,11 @@ jest.mock("matrix-js-sdk/src/logger");
 // Avoid indirectly importing any eagerly created stores that would require extra setup
 jest.mock("../../../../src/Notifier");
 
+// Fake random strings to give a predictable snapshot for IDs
+jest.mock("matrix-js-sdk/src/randomstring", () => ({
+    randomString: jest.fn(),
+}));
+
 const masterRule: IPushRule = {
     actions: [PushRuleActionName.DontNotify],
     conditions: [],
@@ -271,6 +278,11 @@ describe("<Notifications />", () => {
     mockClient.getPushRules.mockResolvedValue(pushRules);
 
     beforeEach(() => {
+        let i = 0;
+        mocked(randomString).mockImplementation(() => {
+            return "testid_" + i++;
+        });
+
         mockClient.getPushRules.mockClear().mockResolvedValue(pushRules);
         mockClient.getPushers.mockClear().mockResolvedValue({ pushers: [] });
         mockClient.getThreePids.mockClear().mockResolvedValue({ threepids: [] });

test/components/views/settings/__snapshots__/Notifications-test.tsx.snap

@@ -12,18 +12,23 @@ exports[`<Notifications /> main notification switches renders only enable notifi
       <span
         class="mx_SettingsFlag_label"
       >
-        Enable notifications for this account
-        <br />
+        <div
+          id="mx_LabelledToggleSwitch_testid_0"
+        >
+          Enable notifications for this account
+        </div>
         <span
           class="mx_Caption"
+          id="mx_LabelledToggleSwitch_testid_0_caption"
         >
           Turn off to disable notifications on all your devices and sessions
         </span>
       </span>
       <div
         aria-checked="false"
+        aria-describedby="mx_LabelledToggleSwitch_testid_0_caption"
         aria-disabled="false"
-        aria-label="Enable notifications for this account"
+        aria-labelledby="mx_LabelledToggleSwitch_testid_0"
         class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
         role="switch"
         tabindex="0"

test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { mocked } from "jest-mock";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 import { act, fireEvent, render, RenderResult } from "@testing-library/react";
 import { EventType, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/@types/partials";
@@ -27,6 +28,11 @@ import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 
 const SpaceSettingsVisibilityTab = wrapInMatrixClientContext(_SpaceSettingsVisibilityTab);
 
+// Fake random strings to give a predictable snapshot for IDs
+jest.mock("matrix-js-sdk/src/randomstring", () => ({
+    randomString: jest.fn(),
+}));
+
 jest.useFakeTimers();
 
 describe("<SpaceSettingsVisibilityTab />", () => {
@@ -89,13 +95,16 @@ describe("<SpaceSettingsVisibilityTab />", () => {
         const toggleButton = getByTestId("toggle-guest-access-btn")!;
         fireEvent.click(toggleButton);
     };
-    const getGuestAccessToggle = ({ container }: RenderResult) =>
-        container.querySelector('[aria-label="Enable guest access"]');
-    const getHistoryVisibilityToggle = ({ container }: RenderResult) =>
-        container.querySelector('[aria-label="Preview Space"]');
+    const getGuestAccessToggle = ({ getByLabelText }: RenderResult) => getByLabelText("Enable guest access");
+    const getHistoryVisibilityToggle = ({ getByLabelText }: RenderResult) => getByLabelText("Preview Space");
     const getErrorMessage = ({ getByTestId }: RenderResult) => getByTestId("space-settings-error")?.textContent;
 
     beforeEach(() => {
+        let i = 0;
+        mocked(randomString).mockImplementation(() => {
+            return "testid_" + i++;
+        });
+
         (mockMatrixClient.sendStateEvent as jest.Mock).mockClear().mockResolvedValue({});
         MatrixClientPeg.get = jest.fn().mockReturnValue(mockMatrixClient);
     });

test/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap

@@ -4,7 +4,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
 <div
   aria-checked="true"
   aria-disabled="false"
-  aria-label="Enable guest access"
+  aria-labelledby="mx_LabelledToggleSwitch_testid_1"
   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
   role="switch"
   tabindex="0"
@@ -105,12 +105,16 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
           <span
             class="mx_SettingsFlag_label"
           >
-            Preview Space
+            <div
+              id="mx_LabelledToggleSwitch_testid_0"
+            >
+              Preview Space
+            </div>
           </span>
           <div
             aria-checked="true"
             aria-disabled="false"
-            aria-label="Preview Space"
+            aria-labelledby="mx_LabelledToggleSwitch_testid_0"
             class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on mx_ToggleSwitch_enabled"
             role="switch"
             tabindex="0"