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

Tooltip: Use AccessibleButton in RovingAccessibleTooltipButton (#12458)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

30
src/components/views/messages/MessageActionBar.tsx
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>,

5
src/components/views/pips/WidgetPip.tsx
View file

@ -34,7 +34,6 @@ import { WidgetType } from "../../../widgets/WidgetType";
import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
import WidgetUtils from "../../../utils/WidgetUtils";
import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions";
import { Alignment } from "../elements/Tooltip";
interface Props {
widgetId: string;
@ -128,9 +127,9 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
<Toolbar className="mx_WidgetPip_footer">
<RovingAccessibleTooltipButton
onClick={onLeaveClick}
tooltip={_t("action|leave")}
title={_t("action|leave")}
aria-label={_t("action|leave")}
alignment={Alignment.Top}
placement="top"
>
<HangupIcon className="mx_Icon mx_Icon_24" />
</RovingAccessibleTooltipButton>

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

@ -127,16 +127,6 @@ interface IFormatButtonProps {
class FormatButton extends React.PureComponent<IFormatButtonProps> {
public render(): React.ReactNode {
const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
let shortcut;
if (this.props.shortcut) {
shortcut = <div className="mx_MessageComposerFormatBar_tooltipShortcut">{this.props.shortcut}</div>;
}
const tooltip = (
<div>
<div className="mx_Tooltip_title">{this.props.label}</div>
<div className="mx_Tooltip_sub">{shortcut}</div>
</div>
);
// 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
@ -145,8 +135,9 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
element="button"
type="button"
onClick={this.props.onClick}
aria-label={this.props.label}
title={this.props.label}
tooltip={tooltip}
caption={this.props.shortcut}
className={className}
/>
);