Tooltip: Use AccessibleButton in RovingAccessibleTooltipButton (#12458)

* Use `AccessibleButton` in `RovingAccessibleTooltipButton`

* Update snapshots

* Update @vector-im/compound-web

* Update playwright

* Remove placement
This commit is contained in:
Florian Duros 2024-04-30 11:35:58 +02:00 committed by GitHub
parent 3634e665b1
commit 2df946b5b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 34 additions and 49 deletions

View file

@ -229,22 +229,16 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
}
};
const title = !hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation");
return (
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_iconButton mx_MessageActionBar_threadButton"
disabled={hasARelation}
tooltip={
<>
<div className="mx_Tooltip_title">
{!hasARelation
? _t("action|reply_in_thread")
: _t("threads|error_start_thread_existing_relation")}
</div>
</>
}
title={!hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation")}
title={title}
onClick={onClick}
onContextMenu={onClick}
placement="left"
>
<ThreadIcon />
</RovingAccessibleTooltipButton>
@ -509,18 +503,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
mx_MessageActionBar_iconButton: true,
mx_MessageActionBar_expandCollapseMessageButton: true,
});
const tooltip = (
<>
<div className="mx_Tooltip_title">
{this.props.isQuoteExpanded
? _t("timeline|mab|collapse_reply_chain")
: _t("timeline|mab|expand_reply_chain")}
</div>
<div className="mx_Tooltip_sub">
{_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
</div>
</>
);
toolbarOpts.push(
<RovingAccessibleTooltipButton
className={expandClassName}
@ -529,9 +512,10 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
? _t("timeline|mab|collapse_reply_chain")
: _t("timeline|mab|expand_reply_chain")
}
tooltip={tooltip}
caption={_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
onClick={this.props.toggleThreadExpanded}
key="expand"
placement="left"
>
{this.props.isQuoteExpanded ? <CollapseMessageIcon /> : <ExpandMessageIcon />}
</RovingAccessibleTooltipButton>,