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

26
src/components/views/messages/MessageActionBar.tsx
View file

@ -43,7 +43,7 @@ import ContextMenu, { aboveLeftOf, ContextMenuTooltipButton, useContextMenu } fr
import { isContentActionable, canEditContent, editEvent, canCancel } from "../../../utils/EventUtils";
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import { RovingAccessibleButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import MessageContextMenu from "../context_menus/MessageContextMenu";
import Resend from "../../../Resend";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
@ -234,7 +234,7 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
const title = !hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation");
return (
<RovingAccessibleTooltipButton
<RovingAccessibleButton
className="mx_MessageActionBar_iconButton mx_MessageActionBar_threadButton"
disabled={hasARelation}
title={title}
@ -243,7 +243,7 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
placement="left"
>
<ThreadIcon />
</RovingAccessibleTooltipButton>
</RovingAccessibleButton>
);
};
@ -387,7 +387,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
const toolbarOpts: JSX.Element[] = [];
if (canEditContent(MatrixClientPeg.safeGet(), this.props.mxEvent)) {
toolbarOpts.push(
<RovingAccessibleTooltipButton
<RovingAccessibleButton
className="mx_MessageActionBar_iconButton"
title={_t("action|edit")}
onClick={this.onEditClick}
@ -396,12 +396,12 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
placement="left"
>
<EditIcon />
</RovingAccessibleTooltipButton>,
</RovingAccessibleButton>,
);
}
const cancelSendingButton = (
<RovingAccessibleTooltipButton
<RovingAccessibleButton
className="mx_MessageActionBar_iconButton"
title={_t("action|delete")}
onClick={this.onCancelClick}
@ -410,7 +410,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
placement="left"
>
<TrashcanIcon />
</RovingAccessibleTooltipButton>
</RovingAccessibleButton>
);
const threadTooltipButton = <ReplyInThreadButton mxEvent={this.props.mxEvent} key="reply_thread" />;
@ -427,7 +427,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
toolbarOpts.splice(
0,
0,
<RovingAccessibleTooltipButton
<RovingAccessibleButton
className="mx_MessageActionBar_iconButton"
title={_t("action|retry")}
onClick={this.onResendClick}
@ -436,7 +436,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
placement="left"
>
<ResendIcon />
</RovingAccessibleTooltipButton>,
</RovingAccessibleButton>,
);
// The delete button should appear last, so we can just drop it at the end
@ -454,7 +454,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
toolbarOpts.splice(
0,
0,
<RovingAccessibleTooltipButton
<RovingAccessibleButton
className="mx_MessageActionBar_iconButton"
title={_t("action|reply")}
onClick={this.onReplyClick}
@ -463,7 +463,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
placement="left"
>
<ReplyIcon />
</RovingAccessibleTooltipButton>,
</RovingAccessibleButton>,
);
}
// We hide the react button in search results as we don't show reactions in results
@ -511,7 +511,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
});
toolbarOpts.push(
<RovingAccessibleTooltipButton
<RovingAccessibleButton
className={expandClassName}
title={
this.props.isQuoteExpanded
@ -524,7 +524,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
placement="left"
>
{this.props.isQuoteExpanded ? <CollapseMessageIcon /> : <ExpandMessageIcon />}
</RovingAccessibleTooltipButton>,
</RovingAccessibleButton>,
);
}