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

Use aria descriptions instead of labels for TextWithTooltip #10952

Merged
merged 7 commits into from
May 25, 2023
Merged

Use aria descriptions instead of labels for TextWithTooltip #10952

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3292eb9
Use aria descriptions instead of labels for TextWithTooltip
t3chguy May 19, 2023
cbd31e9
Update snapshot
t3chguy May 19, 2023
5c3435b
Fix snapshots
t3chguy May 19, 2023
ff920f5
Merge branch 'develop' of https://github.com/matrix-org/matrix-react-…
t3chguy May 23, 2023
c1f84e6
Iterate
t3chguy May 23, 2023
f3523ab
Update snapshots
t3chguy May 23, 2023
3f48780
delint
t3chguy May 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/views/elements/TextWithTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

import React, { HTMLAttributes } from "react";
import classNames from "classnames";
import { randomString } from "matrix-js-sdk/src/randomstring";

import TooltipTarget from "./TooltipTarget";

Expand All @@ -28,19 +29,18 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
}

export default class TextWithTooltip extends React.Component<IProps> {
private id = "mx_TextWithTooltip_" + randomString(8);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason why TooltipTarget doesn't automatically generate an ID internally?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point


public constructor(props: IProps) {
super(props);
}

public render(): React.ReactNode {
const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;

if (typeof tooltip === "string") {
props["aria-label"] = tooltip;
}

return (
<TooltipTarget
id={this.id}
onClick={this.props.onClick}
tooltipTargetClassName={classNames("mx_TextWithTooltip_target", className)}
{...tooltipProps}
Expand Down
5 changes: 5 additions & 0 deletions test/components/views/right_panel/RoomSummaryCard-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../t
import { PollHistoryDialog } from "../../../../src/components/views/dialogs/PollHistoryDialog";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";

// Fake random strings to give a predictable snapshot for checkbox IDs
jest.mock("matrix-js-sdk/src/randomstring", () => ({
randomString: () => "abdefghi",
}));

describe("<RoomSummaryCard />", () => {
const userId = "@alice:domain.org";
const mockClient = getMockClientWithEventEmitter({
Expand Down
2 changes: 1 addition & 1 deletion test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
/>
</span>
<div
aria-label="Not encrypted"
aria-describedby="mx_TextWithTooltip_abdefghi"
class="mx_TextWithTooltip_target mx_RoomSummaryCard_e2ee"
tabindex="0"
/>
Expand Down