imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* Move to `AccessibilityButton`

* Update snapshots

* Add tests

* Update snapshots
This commit is contained in:
Florian Duros 2024-05-07 12:20:52 +02:00 • committed by GitHub
parent caef3c1921
commit febb60ee45
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 167 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/audio_messages/PlayPauseButton.tsx
View file

@ -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")}

29
src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx
View file

@ -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,7 +32,7 @@ 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
@ -42,29 +40,34 @@ const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the butt
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>
);

8
src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
View file

@ -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")}