Tooltip: improve accessibility for call and voice messages

src/components/views/audio_messages/PlayPauseButton.tsx

@@ -17,14 +17,11 @@ limitations under the License.
 import React, { ComponentProps, ReactNode } from "react";
 import classNames from "classnames";
 
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import { Playback, PlaybackState } from "../../../audio/Playback";
+import AccessibleButton from "../elements/AccessibleButton";
 
-type Props = Omit<
- ComponentProps<typeof AccessibleTooltipButton>,
- "title" | "onClick" | "disabled" | "element" | "ref"
-> & {
+type Props = Omit<ComponentProps<typeof AccessibleButton>, "title" | "onClick" | "disabled" | "element" | "ref"> & {
  // Playback instance to manipulate. Cannot change during the component lifecycle.
  playback: Playback;
 
@@ -61,7 +58,7 @@ export default class PlayPauseButton extends React.PureComponent<Props> {
  });
 
  return (
- <AccessibleTooltipButton
+ <AccessibleButton
  data-testid="play-pause-button"
  className={classes}
  title={isPlaying ? _t("action|pause") : _t("action|play")}

src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx

@@ -20,10 +20,8 @@ import React, { ComponentProps, createRef, useState, forwardRef } from "react";
 import classNames from "classnames";
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 
-import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
 import LegacyCallContextMenu from "../../context_menus/LegacyCallContextMenu";
 import DialpadContextMenu from "../../context_menus/DialpadContextMenu";
-import { Alignment } from "../../elements/Tooltip";
 import {
  alwaysMenuProps,
  alwaysAboveRightOf,
@@ -34,37 +32,42 @@ import {
 import { _t } from "../../../../languageHandler";
 import DeviceContextMenu from "../../context_menus/DeviceContextMenu";
 import { MediaDeviceKindEnum } from "../../../../MediaDeviceHandler";
-import { ButtonEvent } from "../../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../../elements/AccessibleButton";
 
 // Height of the header duplicated from CSS because we need to subtract it from our max
 // height to get the max height of the video
 const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px)
 
 const CONTROLS_HIDE_DELAY = 2000;
 
-type ButtonProps = Omit<ComponentProps<typeof AccessibleTooltipButton>, "title" | "element"> & {
+type ButtonProps = Omit<ComponentProps<typeof AccessibleButton>, "title" | "element"> & {
  state: boolean;
  onLabel?: string;
  offLabel?: string;
+ forceHide?: boolean;
+ onHover?: (hovering: boolean) => void;
 };
 
 const LegacyCallViewToggleButton = forwardRef<HTMLElement, ButtonProps>(
- ({ children, state: isOn, className, onLabel, offLabel, ...props }, ref) => {
+ ({ children, state: isOn, className, onLabel, offLabel, forceHide, onHover, ...props }, ref) => {
  const classes = classNames("mx_LegacyCallViewButtons_button", className, {
  mx_LegacyCallViewButtons_button_on: isOn,
  mx_LegacyCallViewButtons_button_off: !isOn,
  });
 
+ const title = forceHide ? undefined : isOn ? onLabel : offLabel;
+
  return (
- <AccessibleTooltipButton
+ <AccessibleButton
  ref={ref}
  className={classes}
- title={isOn ? onLabel : offLabel}
- alignment={Alignment.Top}
+ title={title}
+ placement="top"
+ onTooltipOpenChange={onHover}
  {...props}
  >
  {children}
- </AccessibleTooltipButton>
+ </AccessibleButton>
  );
  },
 );
@@ -265,7 +268,7 @@ export default class LegacyCallViewButtons extends React.Component<IProps, IStat
  onClick={this.onDialpadClick}
  isExpanded={this.state.showDialpad}
  title={_t("voip|dialpad")}
- alignment={Alignment.Top}
+ placement="top"
  />
  )}
  <LegacyCallViewDropdownButton
@@ -311,14 +314,14 @@ export default class LegacyCallViewButtons extends React.Component<IProps, IStat
  ref={this.contextMenuButton}
  isExpanded={this.state.showMoreMenu}
  title={_t("voip|more_button")}
- alignment={Alignment.Top}
+ placement="top"
  />
  )}
- <AccessibleTooltipButton
+ <AccessibleButton
  className="mx_LegacyCallViewButtons_button mx_LegacyCallViewButtons_button_hangup"
  onClick={this.props.handlers.onHangupClick}
  title={_t("voip|hangup")}
- alignment={Alignment.Top}
+ placement="top"
  />
  </div>
  );

src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx

@@ -19,7 +19,7 @@ import React from "react";
 
 import { _t } from "../../../../languageHandler";
 import RoomAvatar from "../../avatars/RoomAvatar";
-import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
+import AccessibleButton from "../../elements/AccessibleButton";
 
 interface LegacyCallControlsProps {
  onExpand?: () => void;
@@ -31,21 +31,21 @@ const LegacyCallViewHeaderControls: React.FC<LegacyCallControlsProps> = ({ onExp
  return (
  <div className="mx_LegacyCallViewHeader_controls">
  {onMaximize && (
- <AccessibleTooltipButton
+ <AccessibleButton
  className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_fullscreen"
  onClick={onMaximize}
  title={_t("voip|maximise")}
  />
  )}
  {onPin && (
- <AccessibleTooltipButton
+ <AccessibleButton
  className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_pin"
  onClick={onPin}
  title={_t("action|pin")}
  />
  )}
  {onExpand && (
- <AccessibleTooltipButton
+ <AccessibleButton
  className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_expand"
  onClick={onExpand}
  title={_t("voip|expand")}

src/toasts/IncomingCallToast.tsx

@@ -36,13 +36,12 @@ import {
  LiveContentType,
 } from "../components/views/rooms/LiveContentSummary";
 import { useCall, useJoinCallButtonDisabledTooltip } from "../hooks/useCall";
-import { ButtonEvent } from "../components/views/elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../components/views/elements/AccessibleButton";
 import { useDispatcher } from "../hooks/useDispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
 import { Call } from "../models/Call";
 import { AudioID } from "../LegacyCallHandler";
 import { useEventEmitter, useTypedEventEmitter } from "../hooks/useEventEmitter";
-import AccessibleTooltipButton from "../components/views/elements/AccessibleTooltipButton";
 import { CallStore, CallStoreEvent } from "../stores/CallStore";
 
 export const getIncomingCallToastKey = (callId: string, roomId: string): string => `call_${callId}_${roomId}`;
@@ -195,7 +194,7 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
  disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
  />
  </div>
- <AccessibleTooltipButton
+ <AccessibleButton
  className="mx_IncomingCallToast_closeButton"
  onClick={onCloseClick}
  title={_t("action|close")}

src/toasts/IncomingLegacyCallToast.tsx

@@ -25,7 +25,6 @@ import LegacyCallHandler, { LegacyCallHandlerEvent } from "../LegacyCallHandler"
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { _t } from "../languageHandler";
 import RoomAvatar from "../components/views/avatars/RoomAvatar";
-import AccessibleTooltipButton from "../components/views/elements/AccessibleTooltipButton";
 import AccessibleButton, { ButtonEvent } from "../components/views/elements/AccessibleButton";
 
 export const getIncomingLegacyCallToastKey = (callId: string): string => `call_${callId}`;
@@ -136,7 +135,7 @@ export default class IncomingLegacyCallToast extends React.Component<IProps, ISt
  </AccessibleButton>
  </div>
  </div>
- <AccessibleTooltipButton
+ <AccessibleButton
  className={silenceClass}
  disabled={callForcedSilent}
  onClick={this.onSilenceClick}

src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx

@@ -29,7 +29,6 @@ import Spinner from "../../../components/views/elements/Spinner";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
 import dis from "../../../dispatcher/dispatcher";
-import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
 
 interface VoiceBroadcastHeaderProps {
  linkToRoom?: boolean;
@@ -95,14 +94,14 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
  });
 
  const microphoneLine = microphoneLabel && (
- <AccessibleTooltipButton
+ <AccessibleButton
  className={microphoneLineClasses}
  onClick={onMicrophoneLineClick}
  title={_t("voip|change_input_device")}
  >
  <MicrophoneIcon className="mx_Icon mx_Icon_16" />
  <span>{microphoneLabel}</span>
- </AccessibleTooltipButton>
+ </AccessibleButton>
  );
 
  const onRoomAvatarOrNameClick = (): void => {

src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx

@@ -32,7 +32,7 @@ import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.sv
 import { _t } from "../../../languageHandler";
 import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
 import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";
-import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
+import AccessibleButton from "../../../components/views/elements/AccessibleButton";
 
 interface VoiceBroadcastRecordingPipProps {
  recording: VoiceBroadcastRecording;
@@ -92,12 +92,12 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
  ) : (
  <div className="mx_VoiceBroadcastBody_controls">
  {toggleControl}
- <AccessibleTooltipButton
+ <AccessibleButton
  onClick={(): void => setShowDeviceSelect(true)}
  title={_t("voip|change_input_device")}
  >
  <MicrophoneIcon className="mx_Icon mx_Icon_16 mx_Icon_alert" />
- </AccessibleTooltipButton>
+ </AccessibleButton>
  <VoiceBroadcastControl
  icon={<StopIcon className="mx_Icon mx_Icon_16" />}
  label="Stop Recording"

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);