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

Use RovingAccessibleButton instead of RovingAccessibleTooltipButton (#12539)

Browse source
This commit is contained in:
Florian Duros 2024-05-17 12:29:30 +02:00 • committed by GitHub
parent 2d0319ec1b
commit 8f3c8b3515
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 35 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/rooms/EventTile/EventTileThreadToolbar.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import React from "react";
import { RovingAccessibleTooltipButton } from "../../../../accessibility/RovingTabIndex";
import { RovingAccessibleButton } from "../../../../accessibility/RovingTabIndex";
import Toolbar from "../../../../accessibility/Toolbar";
import { _t } from "../../../../languageHandler";
import { Icon as LinkIcon } from "../../../../../res/img/element-icons/link.svg";
@ -32,22 +32,22 @@ export function EventTileThreadToolbar({
}): JSX.Element {
return (
<Toolbar className="mx_MessageActionBar" aria-label={_t("timeline|mab|label")} aria-live="off">
<RovingAccessibleTooltipButton
<RovingAccessibleButton
className="mx_MessageActionBar_iconButton"
onClick={viewInRoom}
title={_t("timeline|mab|view_in_room")}
key="view_in_room"
>
<ViewInRoomIcon />
</RovingAccessibleTooltipButton>
<RovingAccessibleTooltipButton
</RovingAccessibleButton>
<RovingAccessibleButton
className="mx_MessageActionBar_iconButton"
onClick={copyLinkToThread}
title={_t("timeline|mab|copy_link_thread")}
key="copy_link_to_thread"
>
<LinkIcon />
</RovingAccessibleTooltipButton>
</RovingAccessibleButton>
</Toolbar>
);
}

10
src/components/views/rooms/ExtraTile.tsx
View file

@ -17,7 +17,7 @@ limitations under the License.
import React from "react";
import classNames from "classnames";
import { RovingAccessibleButton, RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
import NotificationBadge from "./NotificationBadge";
import { NotificationState } from "../../../stores/notifications/NotificationState";
import { ButtonEvent } from "../elements/AccessibleButton";
@ -73,15 +73,15 @@ export default function ExtraTile({
);
if (isMinimized) nameContainer = null;
const Button = isMinimized ? RovingAccessibleTooltipButton : RovingAccessibleButton;
return (
<Button
<RovingAccessibleButton
className={classes}
onMouseEnter={onMouseOver}
onMouseLeave={onMouseLeave}
onClick={onClick}
role="treeitem"
title={isMinimized ? name : undefined}
title={name}
disableTooltip={!isMinimized}
>
<div className="mx_RoomTile_avatarContainer">{avatar}</div>
<div className="mx_RoomTile_details">
@ -90,6 +90,6 @@ export default function ExtraTile({
<div className="mx_RoomTile_badgeContainer">{badge}</div>
</div>
</div>
</Button>
</RovingAccessibleButton>
);
}

4
src/components/views/rooms/MessageComposerFormatBar.tsx
View file

@ -18,7 +18,7 @@ import React, { createRef } from "react";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
import Toolbar from "../../../accessibility/Toolbar";
export enum Formatting {
@ -131,7 +131,7 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
// element="button" and type="button" are necessary for the buttons to work on WebKit,
// otherwise the text is deselected before onClick can ever be called
return (
<RovingAccessibleTooltipButton
<RovingAccessibleButton
element="button"
type="button"
onClick={this.props.onClick}