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/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"