Improve accessibility of microphone, camera, and screen share buttons

Taking Valere's suggestion of giving them the 'switch' role. Also, the aria-label attributes were redundant (having tooltips already gives the buttons aria-labelledby).

playwright/create-call.spec.ts

@@ -22,8 +22,8 @@ test("Start a new call then leave and show the feedback screen", async ({
   await expect(page.getByTestId("lobby_joinCall")).toBeVisible();
 
   // Check the button toolbar
-  // await expect(page.getByRole('button', { name: 'Mute microphone' })).toBeVisible();
-  // await expect(page.getByRole('button', { name: 'Stop video' })).toBeVisible();
+  // await expect(page.getByRole('switch', { name: 'Mute microphone' })).toBeVisible();
+  // await expect(page.getByRole('switch', { name: 'Stop video' })).toBeVisible();
   await expect(page.getByRole("button", { name: "Settings" })).toBeVisible();
   await expect(page.getByRole("button", { name: "End call" })).toBeVisible();
 

playwright/reconnect.spec.ts

@@ -49,12 +49,12 @@ test("can only interact with header and footer while reconnecting", async ({
   ).toBeVisible();
 
   // Tab order should jump directly from header to footer, skipping media tiles
-  await page.getByRole("button", { name: "Mute microphone" }).focus();
+  await page.getByRole("switch", { name: "Mute microphone" }).focus();
   await expect(
-    page.getByRole("button", { name: "Mute microphone" }),
+    page.getByRole("switch", { name: "Mute microphone" }),
   ).toBeFocused();
   await page.keyboard.press("Tab");
-  await expect(page.getByRole("button", { name: "Stop video" })).toBeFocused();
+  await expect(page.getByRole("switch", { name: "Stop video" })).toBeFocused();
   // Most critically, we should be able to press the hangup button
   await page.getByRole("button", { name: "End call" }).click();
 });

playwright/widget/huddle-call.test.ts

@@ -55,13 +55,10 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
     const frame = user.page
       .locator('iframe[title="Element Call"]')
       .contentFrame();
-
     // No lobby, should start with video on
-    // The only way to know if it is muted or not is to look at the data-kind attribute..
-    const videoButton = frame.getByTestId("incall_videomute");
-    await expect(videoButton).toBeVisible();
-    // video should be on
-    await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
+    await expect(
+      frame.getByRole("switch", { name: "Stop video" }),
+    ).toBeVisible();
   }
 
   // We should see 5 video tiles everywhere now
@@ -101,13 +98,13 @@ widgetTest("Create and join a group call", async ({ addUser, browserName }) => {
   const florianFrame = florian.page
     .locator('iframe[title="Element Call"]')
     .contentFrame();
-  const florianMuteButton = florianFrame.getByTestId("incall_videomute");
+  const florianMuteButton = florianFrame.getByRole("switch", {
+    name: "Stop video",
+  });
   await florianMuteButton.click();
   // Now the button should indicate we can start video
-  await expect(florianMuteButton).toHaveAttribute(
-    "aria-label",
-    /^Start video$/,
-  );
+  await expect(florianMuteButton).toHaveAccessibleName("Start video");
+  await expect(florianMuteButton).not.toBeChecked();
 
   // wait a bit for the state to propagate
   await valere.page.waitForTimeout(3000);

playwright/widget/pip-call-button-interaction.test.ts

@@ -47,14 +47,13 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => {
 
   {
     // Check for a bug where the video had the wrong fit in PIP
-    const hangupBtn = iFrame.getByRole("button", { name: "End call" });
-    const audioBtn = iFrame.getByTestId("incall_mute");
-    const videoBtn = iFrame.getByTestId("incall_videomute");
-    await expect(hangupBtn).toBeVisible();
+    const audioBtn = iFrame.getByRole("switch", { name: "Mute microphone" });
+    const videoBtn = iFrame.getByRole("switch", { name: "Stop video" });
+    await expect(
+      iFrame.getByRole("button", { name: "End call" }),
+    ).toBeVisible();
     await expect(audioBtn).toBeVisible();
     await expect(videoBtn).toBeVisible();
-    await expect(audioBtn).toHaveAttribute("aria-label", /^Mute microphone$/);
-    await expect(videoBtn).toHaveAttribute("aria-label", /^Stop video$/);
 
     await videoBtn.click();
     await audioBtn.click();
@@ -62,7 +61,9 @@ widgetTest("Footer interaction in PiP", async ({ addUser, browserName }) => {
     // stop hovering on any of the buttons
     await iFrame.getByTestId("videoTile").hover();
 
-    await expect(audioBtn).toHaveAttribute("aria-label", /^Unmute microphone$/);
-    await expect(videoBtn).toHaveAttribute("aria-label", /^Start video$/);
+    await expect(audioBtn).toHaveAccessibleName("Unmute microphone");
+    await expect(audioBtn).toBeChecked();
+    await expect(videoBtn).toHaveAccessibleName("Start video");
+    await expect(videoBtn).not.toBeChecked();
   }
 });

playwright/widget/pip-call.test.ts

@@ -40,16 +40,12 @@ widgetTest("Put call in PIP", async ({ addUser, browserName }) => {
 
   await TestHelpers.joinCallInCurrentRoom(timo.page);
 
-  {
-    const frame = timo.page
-      .locator('iframe[title="Element Call"]')
-      .contentFrame();
+  const frame = timo.page
+    .locator('iframe[title="Element Call"]')
+    .contentFrame();
 
-    const videoButton = frame.getByTestId("incall_videomute");
-    await expect(videoButton).toBeVisible();
-    // check that the video is on
-    await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
-  }
+  // check that the video is on
+  await expect(frame.getByRole("switch", { name: "Stop video" })).toBeVisible();
 
   // Switch to the other room, the call should go to PIP
   await TestHelpers.switchToRoomNamed(valere.page, "DoubleTask");

playwright/widget/voice-call-dm.spec.ts

@@ -52,32 +52,26 @@ widgetTest(
 
     // ASSERT the button states for whistler (the callee)
     {
-      // The only way to know if it is muted or not is to look at the data-kind attribute..
-      const videoButton = whistlerFrame.getByTestId("incall_videomute");
       // video should be off by default in a voice call
-      await expect(videoButton).toHaveAttribute("aria-label", /^Start video$/);
-
-      const audioButton = whistlerFrame.getByTestId("incall_mute");
+      await expect(
+        whistlerFrame.getByRole("switch", { name: "Start video" }),
+      ).toBeVisible();
       // audio should be on for the voice call
-      await expect(audioButton).toHaveAttribute(
-        "aria-label",
-        /^Mute microphone$/,
-      );
+      await expect(
+        whistlerFrame.getByRole("switch", { name: "Mute microphone" }),
+      ).toBeVisible();
     }
 
     // ASSERT the button states for brools (the caller)
     {
-      // The only way to know if it is muted or not is to look at the data-kind attribute..
-      const videoButton = brooksFrame.getByTestId("incall_videomute");
       // video should be off by default in a voice call
-      await expect(videoButton).toHaveAttribute("aria-label", /^Start video$/);
-
-      const audioButton = brooksFrame.getByTestId("incall_mute");
+      await expect(
+        whistlerFrame.getByRole("switch", { name: "Start video" }),
+      ).toBeVisible();
       // audio should be on for the voice call
-      await expect(audioButton).toHaveAttribute(
-        "aria-label",
-        /^Mute microphone$/,
-      );
+      await expect(
+        whistlerFrame.getByRole("switch", { name: "Mute microphone" }),
+      ).toBeVisible();
     }
 
     // In order to confirm that the call is disconnected we will check that the message composer is shown again.
@@ -143,32 +137,26 @@ widgetTest(
 
     // ASSERT the button states for whistler (the callee)
     {
-      // The only way to know if it is muted or not is to look at the data-kind attribute..
-      const videoButton = whistlerFrame.getByTestId("incall_videomute");
-      // video should be on by default in a voice call
-      await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
-
-      const audioButton = whistlerFrame.getByTestId("incall_mute");
-      // audio should be on for the voice call
-      await expect(audioButton).toHaveAttribute(
-        "aria-label",
-        /^Mute microphone$/,
-      );
+      // video should be off by default in a video call
+      await expect(
+        whistlerFrame.getByRole("switch", { name: "Stop video" }),
+      ).toBeVisible();
+      // audio should be on too
+      await expect(
+        whistlerFrame.getByRole("switch", { name: "Mute microphone" }),
+      ).toBeVisible();
     }
 
     // ASSERT the button states for brools (the caller)
     {
-      // The only way to know if it is muted or not is to look at the data-kind attribute..
-      const videoButton = brooksFrame.getByTestId("incall_videomute");
-      // video should be on by default in a voice call
-      await expect(videoButton).toHaveAttribute("aria-label", /^Stop video$/);
-
-      const audioButton = brooksFrame.getByTestId("incall_mute");
-      // audio should be on for the voice call
-      await expect(audioButton).toHaveAttribute(
-        "aria-label",
-        /^Mute microphone$/,
-      );
+      // video should be off by default in a video call
+      await expect(
+        whistlerFrame.getByRole("switch", { name: "Stop video" }),
+      ).toBeVisible();
+      // audio should be on too
+      await expect(
+        whistlerFrame.getByRole("switch", { name: "Mute microphone" }),
+      ).toBeVisible();
     }
 
     // In order to confirm that the call is disconnected we will check that the message composer is shown again.

src/button/Button.tsx

@@ -37,9 +37,10 @@ export const MicButton: FC<MicButtonProps> = ({ enabled, ...props }) => {
     <Tooltip label={label}>
       <CpdButton
         iconOnly
-        aria-label={label}
         Icon={Icon}
         kind={enabled ? "primary" : "secondary"}
+        role="switch"
+        aria-checked={enabled}
         {...props}
       />
     </Tooltip>
@@ -62,9 +63,10 @@ export const VideoButton: FC<VideoButtonProps> = ({ enabled, ...props }) => {
     <Tooltip label={label}>
       <CpdButton
         iconOnly
-        aria-label={label}
         Icon={Icon}
         kind={enabled ? "primary" : "secondary"}
+        role="switch"
+        aria-checked={enabled}
         {...props}
       />
     </Tooltip>
@@ -91,6 +93,8 @@ export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
         iconOnly
         Icon={ShareScreenSolidIcon}
         kind={enabled ? "primary" : "secondary"}
+        role="switch"
+        aria-checked={enabled}
         {...props}
       />
     </Tooltip>
@@ -112,7 +116,6 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
       <CpdButton
         className={classNames(className, styles.endCall)}
         iconOnly
-        aria-label={t("hangup_button_label")}
         Icon={EndCallIcon}
         destructive
         {...props}

src/room/__snapshots__/InCallView.test.tsx.snap

@@ -285,14 +285,14 @@ exports[`InCallView > rendering > renders 1`] = `
         class="buttons"
       >
         <button
+          aria-checked="false"
           aria-disabled="true"
-          aria-label="Unmute microphone"
           aria-labelledby="_r_8_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="incall_mute"
-          role="button"
+          role="switch"
           tabindex="0"
         >
           <svg
@@ -309,14 +309,14 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
+          aria-checked="false"
           aria-disabled="true"
-          aria-label="Start video"
           aria-labelledby="_r_d_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="secondary"
           data-size="lg"
           data-testid="incall_videomute"
-          role="button"
+          role="switch"
           tabindex="0"
         >
           <svg
@@ -354,7 +354,6 @@ exports[`InCallView > rendering > renders 1`] = `
           </svg>
         </button>
         <button
-          aria-label="End call"
           aria-labelledby="_r_n_"
           class="_button_13vu4_8 endCall _has-icon_13vu4_60 _icon-only_13vu4_53 _destructive_13vu4_110"
           data-kind="primary"