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:
parent
3634e665b1
commit
2df946b5b1
9 changed files with 34 additions and 49 deletions
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue