Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit a3fa53c

Browse files
t3chguyt3chguy
committed
Deprecate AccessibleTooltipButton
Signed-off-by: Michael Telatynski <[email protected]>
1 parent 406ffe1 commit a3fa53c

28 files changed

+102
-121
lines changed

‎src/components/structures/LeftPanel.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
2626
import { Action } from "../../dispatcher/actions";
2727
import RoomSearch from "./RoomSearch";
2828
import ResizeNotifier from "../../utils/ResizeNotifier";
29-
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
3029
import SpaceStore from "../../stores/spaces/SpaceStore";
3130
import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
3231
import { getKeyBindingsManager } from "../../KeyBindingsManager";
@@ -41,7 +40,7 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
4140
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
4241
import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
4342
import { UIComponent } from "../../settings/UIFeature";
44-
import { ButtonEvent } from "../views/elements/AccessibleButton";
43+
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
4544
import PosthogTrackers from "../../PosthogTrackers";
4645
import PageType from "../../PageTypes";
4746
import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";
@@ -333,7 +332,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
333332
// to start a new call
334333
if (LegacyCallHandler.instance.getSupportsPstnProtocol()) {
335334
dialPadButton = (
336-
<AccessibleTooltipButton
335+
<AccessibleButton
337336
className={classNames("mx_LeftPanel_dialPadButton", {})}
338337
onClick={this.onDialPad}
339338
title={_t("left_panel|open_dial_pad")}
@@ -344,7 +343,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
344343
let rightButton: JSX.Element | undefined;
345344
if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
346345
rightButton = (
347-
<AccessibleTooltipButton
346+
<AccessibleButton
348347
className="mx_LeftPanel_exploreButton"
349348
onClick={this.onExplore}
350349
title={_t("action|explore_rooms")}

‎src/components/structures/SpaceHierarchy.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ const Tile: React.FC<ITileProps> = ({
145145
let button: ReactElement;
146146
if (busy) {
147147
button = (
148-
<AccessibleTooltipButton
148+
<AccessibleButton
149149
disabled={true}
150150
onClick={onJoinClick}
151151
kind="primary_outline"
@@ -154,7 +154,7 @@ const Tile: React.FC<ITileProps> = ({
154154
title={_t("space|joining_space")}
155155
>
156156
<Spinner w={24} h={24} />
157-
</AccessibleTooltipButton>
157+
</AccessibleButton>
158158
);
159159
} else if (joinedRoom) {
160160
button = (

‎src/components/structures/SpaceRoomView.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ import {
5959
defaultRoomsRenderer,
6060
} from "../views/dialogs/AddExistingToSpaceDialog";
6161
import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
62-
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
6362
import ErrorBoundary from "../views/elements/ErrorBoundary";
6463
import Field from "../views/elements/Field";
6564
import RoomFacePile from "../views/elements/RoomFacePile";
@@ -247,7 +246,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
247246
let settingsButton;
248247
if (shouldShowSpaceSettings(space)) {
249248
settingsButton = (
250-
<AccessibleTooltipButton
249+
<AccessibleButton
251250
className="mx_SpaceRoomView_landing_settingsButton"
252251
onClick={() => {
253252
showSpaceSettings(space);

‎src/components/views/audio_messages/PlayPauseButton.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import classNames from "classnames";
2020
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
2121
import { _t } from "../../../languageHandler";
2222
import { Playback, PlaybackState } from "../../../audio/Playback";
23+
import AccessibleButton from "../elements/AccessibleButton";
2324

2425
type Props = Omit<
2526
ComponentProps<typeof AccessibleTooltipButton>,
@@ -61,7 +62,7 @@ export default class PlayPauseButton extends React.PureComponent<Props> {
6162
});
6263

6364
return (
64-
<AccessibleTooltipButton
65+
<AccessibleButton
6566
data-testid="play-pause-button"
6667
className={classes}
6768
title={isPlaying ? _t("action|pause") : _t("action|play")}

‎src/components/views/beta/BetaCard.tsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ import SdkConfig from "../../../SdkConfig";
2727
import SettingsFlag from "../elements/SettingsFlag";
2828
import { useFeatureEnabled } from "../../../hooks/useSettings";
2929
import InlineSpinner from "../elements/InlineSpinner";
30-
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
3130
import { shouldShowFeedback } from "../../../utils/Feedback";
3231

3332
// XXX: Keep this around for re-use in future Betas
@@ -50,19 +49,14 @@ export const BetaPill: React.FC<IBetaPillProps> = ({
5049
}) => {
5150
if (onClick) {
5251
return (
53-
<AccessibleTooltipButton
52+
<AccessibleButton
5453
className="mx_BetaCard_betaPill"
55-
title={`${tooltipTitle} ${tooltipCaption}`}
56-
tooltip={
57-
<div>
58-
<div className="mx_Tooltip_title">{tooltipTitle}</div>
59-
<div className="mx_Tooltip_sub">{tooltipCaption}</div>
60-
</div>
61-
}
54+
title={tooltipTitle}
55+
caption={tooltipCaption}
6256
onClick={onClick}
6357
>
6458
{_t("common|beta")}
65-
</AccessibleTooltipButton>
59+
</AccessibleButton>
6660
);
6761
}
6862

‎src/components/views/dialogs/spotlight/TooltipOption.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import React, { ComponentProps, ReactNode } from "react";
1919

2020
import { RovingAccessibleTooltipButton } from "../../../../accessibility/roving/RovingAccessibleTooltipButton";
2121
import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
22-
import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
22+
import AccessibleButton from "../../elements/AccessibleButton";
2323

2424
interface TooltipOptionProps extends ComponentProps<typeof RovingAccessibleTooltipButton> {
2525
endAdornment?: ReactNode;
@@ -28,7 +28,7 @@ interface TooltipOptionProps extends ComponentProps<typeof RovingAccessibleToolt
2828
export const TooltipOption: React.FC<TooltipOptionProps> = ({ inputRef, className, ...props }) => {
2929
const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
3030
return (
31-
<AccessibleTooltipButton
31+
<AccessibleButton
3232
{...props}
3333
className={classNames(className, "mx_SpotlightDialog_option")}
3434
onFocus={onFocus}

‎src/components/views/elements/AccessibleButton.tsx

+21-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
import React, { forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
1818
import classnames from "classnames";
19+
import { Tooltip } from "@vector-im/compound-web";
1920

2021
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
2122
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -86,6 +87,14 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
8687
* Event handler for button activation. Should be implemented exactly like a normal `onClick` handler.
8788
*/
8889
onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
90+
/**
91+
* The tooltip to show on hover or focus.
92+
*/
93+
title?: string;
94+
/**
95+
* The caption to show within a tooltip as above, only valid when used in conjunction with `title`.
96+
*/
97+
caption?: string;
8998
};
9099

91100
/**
@@ -116,6 +125,8 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
116125
onKeyDown,
117126
onKeyUp,
118127
triggerOnMouseDown,
128+
title,
129+
caption,
119130
...restProps
120131
}: Props<T>,
121132
ref: Ref<HTMLElement>,
@@ -182,7 +193,16 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
182193
});
183194

184195
// React.createElement expects InputHTMLAttributes
185-
return React.createElement(element, newProps, children);
196+
const button = React.createElement(element, newProps, children);
197+
198+
if (title) {
199+
return (
200+
<Tooltip label={title} caption={caption} isTriggerInteractive={!disabled}>
201+
{button}
202+
</Tooltip>
203+
);
204+
}
205+
return button;
186206
});
187207

188208
// Type assertion required due to forwardRef type workaround in react.d.ts

‎src/components/views/elements/AccessibleTooltipButton.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof Access
6060
onHideTooltip?(ev: SyntheticEvent): void;
6161
};
6262

63+
/**
64+
* @deprecated use AccessibleButton with `title` and `caption` instead.
65+
*/
6366
const AccessibleTooltipButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
6467
{ title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props<T>,
6568
ref: Ref<HTMLElement>,

‎src/components/views/elements/ImageView.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import FocusLock from "react-focus-lock";
2121
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
2222

2323
import { _t } from "../../../languageHandler";
24-
import AccessibleTooltipButton from "./AccessibleTooltipButton";
24+
import AccessibleButton from "./AccessibleButton";
2525
import MemberAvatar from "../avatars/MemberAvatar";
2626
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
2727
import MessageContextMenu from "../context_menus/MessageContextMenu";
@@ -513,14 +513,14 @@ export default class ImageView extends React.Component<IProps, IState> {
513513
}
514514

515515
const zoomOutButton = (
516-
<AccessibleTooltipButton
516+
<AccessibleButton
517517
className="mx_ImageView_button mx_ImageView_button_zoomOut"
518518
title={_t("action|zoom_out")}
519519
onClick={this.onZoomOutClick}
520520
/>
521521
);
522522
const zoomInButton = (
523-
<AccessibleTooltipButton
523+
<AccessibleButton
524524
className="mx_ImageView_button mx_ImageView_button_zoomIn"
525525
title={_t("action|zoom_in")}
526526
onClick={this.onZoomInClick}
@@ -553,23 +553,23 @@ export default class ImageView extends React.Component<IProps, IState> {
553553
<div className="mx_ImageView_toolbar">
554554
{zoomOutButton}
555555
{zoomInButton}
556-
<AccessibleTooltipButton
556+
<AccessibleButton
557557
className="mx_ImageView_button mx_ImageView_button_rotateCCW"
558558
title={_t("lightbox|rotate_left")}
559559
onClick={this.onRotateCounterClockwiseClick}
560560
/>
561-
<AccessibleTooltipButton
561+
<AccessibleButton
562562
className="mx_ImageView_button mx_ImageView_button_rotateCW"
563563
title={_t("lightbox|rotate_right")}
564564
onClick={this.onRotateClockwiseClick}
565565
/>
566-
<AccessibleTooltipButton
566+
<AccessibleButton
567567
className="mx_ImageView_button mx_ImageView_button_download"
568568
title={_t("action|download")}
569569
onClick={this.onDownloadClick}
570570
/>
571571
{contextMenuButton}
572-
<AccessibleTooltipButton
572+
<AccessibleButton
573573
className="mx_ImageView_button mx_ImageView_button_close"
574574
title={_t("action|close")}
575575
onClick={this.props.onFinished}

‎src/components/views/elements/SSOButtons.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import { Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
3030
import PlatformPeg from "../../../PlatformPeg";
3131
import AccessibleButton from "./AccessibleButton";
3232
import { _t } from "../../../languageHandler";
33-
import AccessibleTooltipButton from "./AccessibleTooltipButton";
3433
import { mediaFromMxc } from "../../../customisations/Media";
3534
import { PosthogAnalytics } from "../../../PosthogAnalytics";
3635

@@ -131,9 +130,9 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
131130
if (mini) {
132131
// TODO fallback icon
133132
return (
134-
<AccessibleTooltipButton {...props} title={label} className={classes} onClick={onClick}>
133+
<AccessibleButton {...props} title={label} className={classes} onClick={onClick}>
135134
{icon}
136-
</AccessibleTooltipButton>
135+
</AccessibleButton>
137136
);
138137
}
139138

‎src/components/views/messages/CallEvent.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary
3434
import FacePile from "../elements/FacePile";
3535
import MatrixClientContext from "../../../contexts/MatrixClientContext";
3636
import { CallDuration, SessionDuration } from "../voip/CallDuration";
37-
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
37+
import AccessibleButton from "../elements/AccessibleButton";
3838

3939
const MAX_FACES = 8;
4040

@@ -78,15 +78,15 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
7878
<FacePile members={facePileMembers} size="24px" overflow={facePileOverflow} />
7979
</div>
8080
{call && <SessionDuration session={call.session} />}
81-
<AccessibleTooltipButton
81+
<AccessibleButton
8282
className="mx_CallEvent_button"
8383
kind={buttonKind}
8484
disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
8585
onClick={onButtonClick}
86-
tooltip={buttonDisabledTooltip}
86+
title={buttonDisabledTooltip}
8787
>
8888
{buttonText}
89-
</AccessibleTooltipButton>
89+
</AccessibleButton>
9090
</div>
9191
</div>
9292
</div>

‎src/components/views/messages/LegacyCallEvent.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import MemberAvatar from "../avatars/MemberAvatar";
2424
import LegacyCallEventGrouper, { LegacyCallEventGrouperEvent } from "../../structures/LegacyCallEventGrouper";
2525
import AccessibleButton from "../elements/AccessibleButton";
2626
import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip";
27-
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
2827
import { formatPreciseDuration } from "../../../DateUtils";
2928
import Clock from "../audio_messages/Clock";
3029

@@ -114,7 +113,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
114113
});
115114

116115
return (
117-
<AccessibleTooltipButton
116+
<AccessibleButton
118117
className={silenceClass}
119118
onClick={this.props.callEventGrouper.toggleSilenced}
120119
title={this.state.silenced ? _t("voip|unsilence") : _t("voip|silence")}

‎src/components/views/messages/TextualBody.tsx

+4-12
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ import { tooltipifyLinks, unmountTooltips } from "../../../utils/tooltipify";
3333
import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
3434
import { isPermalinkHost, tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
3535
import { copyPlaintext } from "../../../utils/strings";
36-
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
3736
import UIStore from "../../../stores/UIStore";
3837
import { Action } from "../../../dispatcher/actions";
3938
import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
@@ -526,22 +525,15 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
526525
const date = this.props.mxEvent.replacingEventDate();
527526
const dateString = date && formatDate(date);
528527

529-
const tooltip = (
530-
<div>
531-
<div className="mx_Tooltip_title">{_t("timeline|edits|tooltip_title", { date: dateString })}</div>
532-
<div className="mx_Tooltip_sub">{_t("timeline|edits|tooltip_sub")}</div>
533-
</div>
534-
);
535-
536528
return (
537-
<AccessibleTooltipButton
529+
<AccessibleButton
538530
className="mx_EventTile_edited"
539531
onClick={this.openHistoryDialog}
540-
title={_t("timeline|edits|tooltip_label", { date: dateString })}
541-
tooltip={tooltip}
532+
title={_t("timeline|edits|tooltip_title", { date: dateString })}
533+
caption={_t("timeline|edits|tooltip_sub")}
542534
>
543535
<span>{`(${_t("common|edited")})`}</span>
544-
</AccessibleTooltipButton>
536+
</AccessibleButton>
545537
);
546538
}
547539

‎src/components/views/right_panel/RoomSummaryCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -206,13 +206,13 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
206206
/>
207207
)}
208208

209-
<AccessibleTooltipButton
209+
<AccessibleButton
210210
className="mx_RoomSummaryCard_app_pinToggle"
211211
onClick={togglePin}
212212
title={pinTitle}
213213
disabled={cannotPin}
214214
/>
215-
<AccessibleTooltipButton
215+
<AccessibleButton
216216
className="mx_RoomSummaryCard_app_maximiseToggle"
217217
onClick={toggleMaximised}
218218
title={maximiseTitle}

‎src/components/views/rooms/CollapsibleButton.tsx

+2-8
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import React, { ComponentProps, useContext } from "react";
1818
import classNames from "classnames";
1919

2020
import AccessibleButton from "../elements/AccessibleButton";
21-
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
2221
import { OverflowMenuContext } from "./MessageComposerButtons";
2322
import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu";
2423
import { Ref } from "../../../accessibility/roving/types";
@@ -43,13 +42,8 @@ export const CollapsibleButton: React.FC<Props> = ({
4342
}
4443

4544
return (
46-
<AccessibleTooltipButton
47-
{...props}
48-
title={title}
49-
className={classNames(className, iconClassName)}
50-
ref={inputRef}
51-
>
45+
<AccessibleButton {...props} title={title} className={classNames(className, iconClassName)} ref={inputRef}>
5246
{children}
53-
</AccessibleTooltipButton>
47+
</AccessibleButton>
5448
);
5549
};

0 commit comments

Comments
 (0)