Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit e5b1b7b

Browse files
t3chguyt3chguy
authored
Make composer format bar an aria toolbar (#10583)
* Make composer format bar an aria toolbar * Iterate * Iterate * Update snapshot
1 parent d179956 commit e5b1b7b

File tree

4 files changed

+24
-18
lines changed

4 files changed

+24
-18
lines changed

‎src/accessibility/Toolbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
1414
limitations under the License.
1515
*/
1616

17-
import React from "react";
17+
import React, { forwardRef } from "react";
1818

1919
import { RovingTabIndexProvider } from "./RovingTabIndex";
2020
import { getKeyBindingsManager } from "../KeyBindingsManager";
@@ -25,7 +25,7 @@ interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {}
2525
// This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
2626
// https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
2727
// All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
28-
const Toolbar: React.FC<IProps> = ({ children, ...props }) => {
28+
const Toolbar = forwardRef<HTMLDivElement, IProps>(({ children, ...props }, ref) => {
2929
const onKeyDown = (ev: React.KeyboardEvent): void => {
3030
const target = ev.target as HTMLElement;
3131
// Don't interfere with input default keydown behaviour
@@ -56,12 +56,12 @@ const Toolbar: React.FC<IProps> = ({ children, ...props }) => {
5656
return (
5757
<RovingTabIndexProvider handleHomeEnd handleLeftRight onKeyDown={onKeyDown}>
5858
{({ onKeyDownHandler }) => (
59-
<div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
59+
<div {...props} onKeyDown={onKeyDownHandler} role="toolbar" ref={ref}>
6060
{children}
6161
</div>
6262
)}
6363
</RovingTabIndexProvider>
6464
);
65-
};
65+
});
6666

6767
export default Toolbar;

‎src/components/views/rooms/MessageComposerFormatBar.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import React, { createRef } from "react";
1818
import classNames from "classnames";
1919

2020
import { _t } from "../../../languageHandler";
21-
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
21+
import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
22+
import Toolbar from "../../../accessibility/Toolbar";
2223

2324
export enum Formatting {
2425
Bold = "bold",
@@ -51,7 +52,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
5152
mx_MessageComposerFormatBar_shown: this.state.visible,
5253
});
5354
return (
54-
<div className={classes} ref={this.formatBarRef}>
55+
<Toolbar className={classes} ref={this.formatBarRef} aria-label={_t("Formatting")}>
5556
<FormatButton
5657
label={_t("Bold")}
5758
onClick={() => this.props.onAction(Formatting.Bold)}
@@ -93,7 +94,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
9394
shortcut={this.props.shortcuts.insert_link}
9495
visible={this.state.visible}
9596
/>
96-
</div>
97+
</Toolbar>
9798
);
9899
}
99100

@@ -140,7 +141,7 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
140141
// element="button" and type="button" are necessary for the buttons to work on WebKit,
141142
// otherwise the text is deselected before onClick can ever be called
142143
return (
143-
<AccessibleTooltipButton
144+
<RovingAccessibleTooltipButton
144145
element="button"
145146
type="button"
146147
onClick={this.props.onClick}

‎src/i18n/strings/en_EN.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1952,6 +1952,7 @@
19521952
"Poll": "Poll",
19531953
"Hide formatting": "Hide formatting",
19541954
"Show formatting": "Show formatting",
1955+
"Formatting": "Formatting",
19551956
"Italics": "Italics",
19561957
"Strikethrough": "Strikethrough",
19571958
"Code block": "Code block",

‎test/components/structures/__snapshots__/RoomView-test.tsx.snap‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -446,7 +446,9 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
446446
class="mx_BasicMessageComposer"
447447
>
448448
<div
449+
aria-label="Formatting"
449450
class="mx_MessageComposerFormatBar"
451+
role="toolbar"
450452
>
451453
<button
452454
aria-label="Bold"
@@ -459,35 +461,35 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
459461
aria-label="Italics"
460462
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
461463
role="button"
462-
tabindex="0"
464+
tabindex="-1"
463465
type="button"
464466
/>
465467
<button
466468
aria-label="Strikethrough"
467469
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
468470
role="button"
469-
tabindex="0"
471+
tabindex="-1"
470472
type="button"
471473
/>
472474
<button
473475
aria-label="Code block"
474476
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
475477
role="button"
476-
tabindex="0"
478+
tabindex="-1"
477479
type="button"
478480
/>
479481
<button
480482
aria-label="Quote"
481483
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
482484
role="button"
483-
tabindex="0"
485+
tabindex="-1"
484486
type="button"
485487
/>
486488
<button
487489
aria-label="Insert link"
488490
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
489491
role="button"
490-
tabindex="0"
492+
tabindex="-1"
491493
type="button"
492494
/>
493495
</div>
@@ -706,7 +708,9 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
706708
class="mx_BasicMessageComposer"
707709
>
708710
<div
711+
aria-label="Formatting"
709712
class="mx_MessageComposerFormatBar"
713+
role="toolbar"
710714
>
711715
<button
712716
aria-label="Bold"
@@ -719,35 +723,35 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
719723
aria-label="Italics"
720724
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
721725
role="button"
722-
tabindex="0"
726+
tabindex="-1"
723727
type="button"
724728
/>
725729
<button
726730
aria-label="Strikethrough"
727731
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
728732
role="button"
729-
tabindex="0"
733+
tabindex="-1"
730734
type="button"
731735
/>
732736
<button
733737
aria-label="Code block"
734738
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
735739
role="button"
736-
tabindex="0"
740+
tabindex="-1"
737741
type="button"
738742
/>
739743
<button
740744
aria-label="Quote"
741745
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
742746
role="button"
743-
tabindex="0"
747+
tabindex="-1"
744748
type="button"
745749
/>
746750
<button
747751
aria-label="Insert link"
748752
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
749753
role="button"
750-
tabindex="0"
754+
tabindex="-1"
751755
type="button"
752756
/>
753757
</div>

0 commit comments

Comments
 (0)