From dc2dee301b08353dbc26bc3c28841360ce3cfc8a Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 12 Apr 2023 13:27:33 +0100
Subject: [PATCH 1/4] Make composer format bar an aria toolbar

---
 src/accessibility/Toolbar.tsx                           | 8 ++++----
 src/components/views/rooms/MessageComposerFormatBar.tsx | 9 +++++----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/accessibility/Toolbar.tsx b/src/accessibility/Toolbar.tsx
index 3b5fbb09434..6006fbe52dc 100644
--- a/src/accessibility/Toolbar.tsx
+++ b/src/accessibility/Toolbar.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { forwardRef } from "react";
 
 import { RovingTabIndexProvider } from "./RovingTabIndex";
 import { getKeyBindingsManager } from "../KeyBindingsManager";
@@ -25,7 +25,7 @@ interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {}
 // This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
 // https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
 // All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
-const Toolbar: React.FC<IProps> = ({ children, ...props }) => {
+const Toolbar: React.FC<IProps> = forwardRef(({ children, ...props }, ref) => {
     const onKeyDown = (ev: React.KeyboardEvent): void => {
         const target = ev.target as HTMLElement;
         // Don't interfere with input default keydown behaviour
@@ -56,12 +56,12 @@ const Toolbar: React.FC<IProps> = ({ children, ...props }) => {
     return (
         <RovingTabIndexProvider handleHomeEnd handleLeftRight onKeyDown={onKeyDown}>
             {({ onKeyDownHandler }) => (
-                <div {...props} onKeyDown={onKeyDownHandler} role="toolbar">
+                <div {...props} onKeyDown={onKeyDownHandler} role="toolbar" ref={ref}>
                     {children}
                 </div>
             )}
         </RovingTabIndexProvider>
     );
-};
+});
 
 export default Toolbar;
diff --git a/src/components/views/rooms/MessageComposerFormatBar.tsx b/src/components/views/rooms/MessageComposerFormatBar.tsx
index 3a84f660ff7..e1a2f9d4bd1 100644
--- a/src/components/views/rooms/MessageComposerFormatBar.tsx
+++ b/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -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}

From 2d00d074310d8c9d5f6daa99fd4c4a4369a26274 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 12 Apr 2023 13:36:03 +0100
Subject: [PATCH 2/4] Iterate

---
 src/accessibility/Toolbar.tsx | 2 +-
 src/i18n/strings/en_EN.json   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/accessibility/Toolbar.tsx b/src/accessibility/Toolbar.tsx
index 6006fbe52dc..92e943113ae 100644
--- a/src/accessibility/Toolbar.tsx
+++ b/src/accessibility/Toolbar.tsx
@@ -25,7 +25,7 @@ interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {}
 // This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
 // https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
 // All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
-const Toolbar: React.FC<IProps> = forwardRef(({ children, ...props }, ref) => {
+const Toolbar = forwardRef<IProps>(({ children, ...props }, ref) => {
     const onKeyDown = (ev: React.KeyboardEvent): void => {
         const target = ev.target as HTMLElement;
         // Don't interfere with input default keydown behaviour
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index dbf812d79a0..363fe57f70b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1952,6 +1952,7 @@
     "Poll": "Poll",
     "Hide formatting": "Hide formatting",
     "Show formatting": "Show formatting",
+    "Formatting": "Formatting",
     "Italics": "Italics",
     "Strikethrough": "Strikethrough",
     "Code block": "Code block",

From e7bab78bc4072aeaca43fd011b4927302940778e Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 12 Apr 2023 13:52:30 +0100
Subject: [PATCH 3/4] Iterate

---
 src/accessibility/Toolbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/accessibility/Toolbar.tsx b/src/accessibility/Toolbar.tsx
index 92e943113ae..a606f9aae89 100644
--- a/src/accessibility/Toolbar.tsx
+++ b/src/accessibility/Toolbar.tsx
@@ -25,7 +25,7 @@ interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {}
 // This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
 // https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
 // All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
-const Toolbar = forwardRef<IProps>(({ children, ...props }, ref) => {
+const Toolbar = forwardRef<HTMLDivElement, IProps>(({ children, ...props }, ref) => {
     const onKeyDown = (ev: React.KeyboardEvent): void => {
         const target = ev.target as HTMLElement;
         // Don't interfere with input default keydown behaviour

From 78eb2f441d205b254a7fc103ef18e4d40650e04d Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 12 Apr 2023 14:12:14 +0100
Subject: [PATCH 4/4] Update snapshot

---
 .../__snapshots__/RoomView-test.tsx.snap      | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index 4399ff471ff..d32c9a75d7d 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -446,7 +446,9 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                 class="mx_BasicMessageComposer"
               >
                 <div
+                  aria-label="Formatting"
                   class="mx_MessageComposerFormatBar"
+                  role="toolbar"
                 >
                   <button
                     aria-label="Bold"
@@ -459,35 +461,35 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                     aria-label="Italics"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Strikethrough"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Code block"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Quote"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Insert link"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                 </div>
@@ -706,7 +708,9 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                 class="mx_BasicMessageComposer"
               >
                 <div
+                  aria-label="Formatting"
                   class="mx_MessageComposerFormatBar"
+                  role="toolbar"
                 >
                   <button
                     aria-label="Bold"
@@ -719,35 +723,35 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                     aria-label="Italics"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Strikethrough"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Code block"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Quote"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Insert link"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                     role="button"
-                    tabindex="0"
+                    tabindex="-1"
                     type="button"
                   />
                 </div>