From febb60ee45368486cc77d543b63006972fef82a6 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Tue, 7 May 2024 12:20:52 +0200 Subject: [PATCH] Tooltip: improve accessibility for call and voice messages (#12489) * Move to `AccessibilityButton` * Update snapshots * Add tests * Update snapshots --- .../views/audio_messages/PlayPauseButton.tsx | 9 +-- .../LegacyCallView/LegacyCallViewButtons.tsx | 29 ++++---- .../LegacyCallView/LegacyCallViewHeader.tsx | 8 +-- src/toasts/IncomingCallToast.tsx | 5 +- src/toasts/IncomingLegacyCallToast.tsx | 3 +- .../components/atoms/VoiceBroadcastHeader.tsx | 5 +- .../molecules/VoiceBroadcastRecordingPip.tsx | 6 +- .../LegacyCallViewButtons-test.tsx | 67 ++++++++++++++++++ .../LegacyCallViewButtons-test.tsx.snap | 68 +++++++++++++++++++ test/test-utils/test-utils.ts | 1 + 10 files changed, 167 insertions(+), 34 deletions(-) create mode 100644 test/components/views/voip/LegacyCallView/LegacyCallViewButtons-test.tsx create mode 100644 test/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap diff --git a/src/components/views/audio_messages/PlayPauseButton.tsx b/src/components/views/audio_messages/PlayPauseButton.tsx index 63f266fbf7..c49fd2e74c 100644 --- a/src/components/views/audio_messages/PlayPauseButton.tsx +++ b/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, - "title" | "onClick" | "disabled" | "element" | "ref" -> & { +type Props = Omit, "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 { }); return ( - , "title" | "element"> & { +type ButtonProps = Omit, "title" | "element"> & { state: boolean; onLabel?: string; offLabel?: string; + forceHide?: boolean; + onHover?: (hovering: boolean) => void; }; const LegacyCallViewToggleButton = forwardRef( - ({ 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 ( - {children} - + ); }, ); @@ -265,7 +268,7 @@ export default class LegacyCallViewButtons extends React.Component )} )} - ); diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx index 33484eb3ce..c60b70c932 100644 --- a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx +++ b/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 = ({ onExp return (
{onMaximize && ( - )} {onPin && ( - )} {onExpand && ( - `call_${callId}_${roomId}`; @@ -195,7 +194,7 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element { disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined} />
- `call_${callId}`; @@ -136,7 +135,7 @@ export default class IncomingLegacyCallToast extends React.Component - = ({ }); const microphoneLine = microphoneLabel && ( - {microphoneLabel} - + ); const onRoomAvatarOrNameClick = (): void => { diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx index 026cf40ce1..46ca3f9319 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx +++ b/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 {toggleControl} - setShowDeviceSelect(true)} title={_t("voip|change_input_device")} > - + } label="Stop Recording" diff --git a/test/components/views/voip/LegacyCallView/LegacyCallViewButtons-test.tsx b/test/components/views/voip/LegacyCallView/LegacyCallViewButtons-test.tsx new file mode 100644 index 0000000000..5f0541fccf --- /dev/null +++ b/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( + , + ); + }; + + it("should render the buttons", () => { + const { container } = renderButtons(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/test/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap b/test/components/views/voip/LegacyCallView/__snapshots__/LegacyCallViewButtons-test.tsx.snap new file mode 100644 index 0000000000..c773177bd2 --- /dev/null +++ b/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`] = ` +
+
+