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

@ -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}
/>
);