Tooltip: improve accessibility for call and voice messages (#12489)

* Move to `AccessibilityButton`

* Update snapshots

* Add tests

* Update snapshots

test/components/views/voip/LegacyCallView/LegacyCallViewButtons-test.tsx

@@ -0,0 +1,67 @@
+/*
+ *
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+
+import LegacyCallViewButtons from "../../../../../src/components/views/voip/LegacyCallView/LegacyCallViewButtons";
+import { createTestClient } from "../../../../test-utils";
+
+describe("LegacyCallViewButtons", () => {
+    const matrixClient = createTestClient();
+    const roomId = "test-room-id";
+
+    const renderButtons = () => {
+        const call = new MatrixCall({
+            client: matrixClient,
+            roomId,
+        });
+
+        return render(
+            <LegacyCallViewButtons
+                call={call}
+                handlers={{
+                    onScreenshareClick: jest.fn(),
+                    onToggleSidebarClick: jest.fn(),
+                    onHangupClick: jest.fn(),
+                    onMicMuteClick: jest.fn(),
+                    onVidMuteClick: jest.fn(),
+                }}
+                buttonsVisibility={{
+                    vidMute: true,
+                    screensharing: true,
+                    sidebar: true,
+                    contextMenu: true,
+                    dialpad: true,
+                }}
+                buttonsState={{
+                    micMuted: false,
+                    vidMuted: false,
+                    sidebarShown: false,
+                    screensharing: false,
+                }}
+            />,
+        );
+    };
+
+    it("should render the buttons", () => {
+        const { container } = renderButtons();
+        expect(container).toMatchSnapshot();
+    });
+});

test/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegacyCallViewButtons should render the buttons 1`] = `
+<div>
+  <div
+    class="mx_LegacyCallViewButtons"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Dialpad"
+      class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_dialpad"
+      role="button"
+      tabindex="0"
+    />
+    <div
+      aria-label="Mute microphone"
+      class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button_mic mx_LegacyCallViewButtons_button_on"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_dropdownButton mx_LegacyCallViewButtons_dropdownButton_collapsed mx_LegacyCallViewButtons_button_on"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <div
+      aria-label="Turn off camera"
+      class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button_vid mx_LegacyCallViewButtons_button_on"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_dropdownButton mx_LegacyCallViewButtons_dropdownButton_collapsed mx_LegacyCallViewButtons_button_on"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <div
+      aria-label="Start sharing your screen"
+      class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button_screensharing mx_LegacyCallViewButtons_button_off"
+      role="button"
+      tabindex="0"
+    />
+    <div
+      aria-label="Show sidebar"
+      class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button_sidebar mx_LegacyCallViewButtons_button_off"
+      role="button"
+      tabindex="0"
+    />
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="More"
+      class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button_more"
+      role="button"
+      tabindex="0"
+    />
+    <div
+      aria-label="Hangup"
+      class="mx_AccessibleButton mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button_hangup"
+      role="button"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;

test/test-utils/test-utils.ts

@@ -271,6 +271,7 @@ export function createTestClient(): MatrixClient {
         getMediaConfig: jest.fn(),
         baseUrl: "https://matrix-client.matrix.org",
         matrixRTC: createStubMatrixRTC(),
+        isFallbackICEServerAllowed: jest.fn().mockReturnValue(false),
     } as unknown as MatrixClient;
 
     client.reEmitter = new ReEmitter(client);