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

Make composer format bar an aria toolbar (#10583)

Browse source 
* Make composer format bar an aria toolbar

* Iterate

* Iterate

* Update snapshot
This commit is contained in:
Michael Telatynski 2023-04-12 14:58:38 +01:00 • committed by GitHub
parent d179956af8
commit e5b1b7b632
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,8 @@ import React, { createRef } from "react";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
import Toolbar from "../../../accessibility/Toolbar";
export enum Formatting {
Bold = "bold",
@ -51,7 +52,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
mx_MessageComposerFormatBar_shown: this.state.visible,
});
return (
<div className={classes} ref={this.formatBarRef}>
<Toolbar className={classes} ref={this.formatBarRef} aria-label={_t("Formatting")}>
<FormatButton
label={_t("Bold")}
onClick={() => this.props.onAction(Formatting.Bold)}
@ -93,7 +94,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
shortcut={this.props.shortcuts.insert_link}
visible={this.state.visible}
/>
</div>
</Toolbar>
);
}
@ -140,7 +141,7 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
// 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
return (
<AccessibleTooltipButton
<RovingAccessibleTooltipButton
element="button"
type="button"
onClick={this.props.onClick}