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

Commit 44e2a6d

Browse files
floriandurosflorianduros
authored
Tooltip: Use AccessibleButton in reusable elements (#12461)
* Update reusable elements * Update tests * Make right as default tooltip placement * Add tests
1 parent d5bf102 commit 44e2a6d

File tree

14 files changed

+162
-32
lines changed

14 files changed

+162
-32
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
138138
triggerOnMouseDown,
139139
title,
140140
caption,
141-
placement,
141+
placement = "right",
142142
onTooltipOpenChange,
143143
...restProps
144144
}: Props<T>,

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@ import classNames from "classnames";
2020

2121
import { _t } from "../../../languageHandler";
2222
import { copyPlaintext } from "../../../utils/strings";
23-
import { ButtonEvent } from "./AccessibleButton";
24-
import AccessibleTooltipButton from "./AccessibleTooltipButton";
23+
import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
2524

2625
interface IProps {
2726
children?: React.ReactNode;
@@ -53,11 +52,13 @@ const CopyableText: React.FC<IProps> = ({ children, getTextToCopy, border = true
5352
return (
5453
<div className={combinedClassName}>
5554
{children}
56-
<AccessibleTooltipButton
55+
<AccessibleButton
5756
title={tooltip ?? _t("action|copy")}
5857
onClick={onCopyClickInternal}
5958
className="mx_CopyableText_copyButton"
60-
onHideTooltip={onHideTooltip}
59+
onTooltipOpenChange={(open) => {
60+
if (!open) onHideTooltip();
61+
}}
6162
/>
6263
</div>
6364
);

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ 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";
2524
import MemberAvatar from "../avatars/MemberAvatar";
2625
import { ContextMenuTooltipButton } from "../../../accessibility/context_menu/ContextMenuTooltipButton";
2726
import MessageContextMenu from "../context_menus/MessageContextMenu";
@@ -38,6 +37,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
3837
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
3938
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
4039
import { presentableTextForFile } from "../../../utils/FileUtils";
40+
import AccessibleButton from "./AccessibleButton";
4141

4242
// Max scale to keep gaps around the image
4343
const MAX_SCALE = 0.95;
@@ -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‎

Lines changed: 2 additions & 3 deletions
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/elements/ToggleSwitch.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ limitations under the License.
1818
import React from "react";
1919
import classNames from "classnames";
2020

21-
import AccessibleTooltipButton from "./AccessibleTooltipButton";
21+
import AccessibleButton from "./AccessibleButton";
2222

2323
interface IProps {
2424
// Whether or not this toggle is in the 'on' position.
@@ -41,7 +41,7 @@ interface IProps {
4141
}
4242

4343
// Controlled Toggle Switch element, written with Accessibility in mind
44-
export default ({ checked, disabled = false, onChange, ...props }: IProps): JSX.Element => {
44+
export default ({ checked, disabled = false, onChange, title, tooltip, ...props }: IProps): JSX.Element => {
4545
const _onClick = (): void => {
4646
if (disabled) return;
4747
onChange(!checked);
@@ -54,15 +54,17 @@ export default ({ checked, disabled = false, onChange, ...props }: IProps): JSX.
5454
});
5555

5656
return (
57-
<AccessibleTooltipButton
57+
<AccessibleButton
5858
{...props}
5959
className={classes}
6060
onClick={_onClick}
6161
role="switch"
62+
aria-label={title}
6263
aria-checked={checked}
6364
aria-disabled={disabled}
65+
title={tooltip}
6466
>
6567
<div className="mx_ToggleSwitch_ball" />
66-
</AccessibleTooltipButton>
68+
</AccessibleButton>
6769
);
6870
};

‎test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
4848
<div
4949
aria-label="Copy"
5050
class="mx_AccessibleButton mx_CopyableText_copyButton"
51+
data-state="closed"
5152
role="button"
5253
tabindex="0"
5354
/>

‎test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
8282
<div
8383
aria-label="Copy"
8484
class="mx_AccessibleButton mx_CopyableText_copyButton"
85+
data-state="closed"
8586
role="button"
8687
tabindex="0"
8788
/>

‎test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
1919
<div
2020
aria-label="Copy"
2121
class="mx_AccessibleButton mx_CopyableText_copyButton"
22+
data-state="closed"
2223
role="button"
2324
tabindex="0"
2425
/>

‎test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
4141
<div
4242
aria-label="Copy"
4343
class="mx_AccessibleButton mx_CopyableText_copyButton"
44+
data-state="closed"
4445
role="button"
4546
tabindex="0"
4647
/>

‎test/components/views/elements/ImageView-test.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
*
3+
* Copyright 2024 The Matrix.org Foundation C.I.C.
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
* /
17+
*/
18+
19+
import React from "react";
20+
import { render } from "@testing-library/react";
21+
22+
import ImageView from "../../../../src/components/views/elements/ImageView";
23+
24+
describe("<ImageView />", () => {
25+
it("renders correctly", () => {
26+
const { container } = render(<ImageView src="https://example.com/image.png" onFinished={jest.fn()} />);
27+
expect(container).toMatchSnapshot();
28+
});
29+
});

0 commit comments

Comments
 (0)