Update formating buttons

matrix-org · Apr 26, 2024 · d84f003 · d84f003
1 parent 7f086b8
commit d84f003
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 52 deletions.
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
@@ -63,20 +63,3 @@ limitations under the License.
         color: $tertiary-content;
     }
 }
-
-.mx_FormattingButtons_Tooltip {
-    padding: 0 2px 0 2px;
-
-    .mx_FormattingButtons_Tooltip_KeyboardShortcut {
-        color: $tertiary-content;
-
-        kbd {
-            margin-top: 2px;
-            text-align: center;
-            display: inline-block;
-            text-transform: capitalize;
-            font-size: 12px;
-            font-family: Inter, sans-serif;
-        }
-    }
-}
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -30,57 +30,49 @@ import { Icon as NumberedListIcon } from "../../../../../../res/img/element-icon
 import { Icon as CodeBlockIcon } from "../../../../../../res/img/element-icons/room/composer/code_block.svg";
 import { Icon as IndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_increase.svg";
 import { Icon as UnIndentIcon } from "../../../../../../res/img/element-icons/room/composer/indent_decrease.svg";
-import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton";
-import { Alignment } from "../../../elements/Tooltip";
-import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
-import { KeyCombo } from "../../../../../KeyBindingsManager";
 import { _t } from "../../../../../languageHandler";
-import { ButtonEvent } from "../../../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../../../elements/AccessibleButton";
 import { openLinkModal } from "./LinkModal";
 import { useComposerContext } from "../ComposerContext";
+import { IS_MAC, Key } from "../../../../../Keyboard";
+import { ALTERNATE_KEY_NAME } from "../../../../../accessibility/KeyboardShortcuts";
 
-interface TooltipProps {
-    label: string;
-    keyCombo?: KeyCombo;
-}
-
-function Tooltip({ label, keyCombo }: TooltipProps): JSX.Element {
-    return (
-        <div className="mx_FormattingButtons_Tooltip">
-            {label}
-            {keyCombo && (
-                <KeyboardShortcut value={keyCombo} className="mx_FormattingButtons_Tooltip_KeyboardShortcut" />
-            )}
-        </div>
-    );
-}
-
-interface ButtonProps extends TooltipProps {
+interface ButtonProps {
     icon: ReactNode;
     actionState: ActionState;
     onClick: MouseEventHandler<HTMLButtonElement>;
+    label: string;
+    shortcut?: string;
 }
 
-function Button({ label, keyCombo, onClick, actionState, icon }: ButtonProps): JSX.Element {
+function Button({ label, shortcut, onClick, actionState, icon }: ButtonProps): JSX.Element {
     return (
-        <AccessibleTooltipButton
+        <AccessibleButton
             element="button"
             onClick={onClick as (e: ButtonEvent) => void}
-            title={label}
+            aria-label={label}
             className={classNames("mx_FormattingButtons_Button", {
                 mx_FormattingButtons_active: actionState === "reversed",
                 mx_FormattingButtons_Button_hover: actionState === "enabled",
                 mx_FormattingButtons_disabled: actionState === "disabled",
             })}
-            tooltip={keyCombo && <Tooltip label={label} keyCombo={keyCombo} />}
-            forceHide={actionState === "disabled"}
-            alignment={Alignment.Top}
+            title={actionState === "disabled" ? undefined : label}
+            caption={shortcut}
+            placement="top"
         >
             {icon}
-        </AccessibleTooltipButton>
+        </AccessibleButton>
     );
 }
 
+/**
+ * Get the shortcut string for a given key.
+ * @param key
+ */
+function getShortcutFromKey(key: string): string {
+    return (IS_MAC ? "⌘" : _t(ALTERNATE_KEY_NAME[Key.CONTROL])) + "+" + key;
+}
+
 interface FormattingButtonsProps {
     composer: FormattingFunctions;
     actionStates: AllActionStates;
@@ -94,21 +86,21 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             <Button
                 actionState={actionStates.bold}
                 label={_t("composer|format_bold")}
-                keyCombo={{ ctrlOrCmdKey: true, key: "b" }}
+                shortcut={getShortcutFromKey("B")}
                 onClick={() => composer.bold()}
                 icon={<BoldIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.italic}
                 label={_t("composer|format_italic")}
-                keyCombo={{ ctrlOrCmdKey: true, key: "i" }}
+                shortcut={getShortcutFromKey("I")}
                 onClick={() => composer.italic()}
                 icon={<ItalicIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.underline}
                 label={_t("composer|format_underline")}
-                keyCombo={{ ctrlOrCmdKey: true, key: "u" }}
+                shortcut={getShortcutFromKey("U")}
                 onClick={() => composer.underline()}
                 icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />}
             />
@@ -155,7 +147,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             <Button
                 actionState={actionStates.inlineCode}
                 label={_t("composer|format_inline_code")}
-                keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
+                shortcut={getShortcutFromKey("E")}
                 onClick={() => composer.inlineCode()}
                 icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
             />

diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { ActionState, ActionTypes, AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
 
@@ -135,7 +135,7 @@ describe("FormattingButtons", () => {
             const { label } = testCase;
 
             await userEvent.hover(screen.getByLabelText(label));
-            expect(screen.getByText(label)).toBeInTheDocument();
+            await waitFor(() => expect(screen.getByText(label)).toBeInTheDocument());
         }
     });
 

diff --git a/...nts/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap b/...nts/views/rooms/wysiwyg_composer/components/__snapshots__/FormattingButtons-test.tsx.snap
@@ -8,6 +8,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Fett"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -18,6 +19,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Kursiv"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -28,6 +30,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Unterstrichen"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -38,6 +41,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Durchgestrichen"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -48,6 +52,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Ungeordnete Liste"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -58,6 +63,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Nummerierte Liste"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -68,6 +74,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Zitieren"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -78,6 +85,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Code"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -88,6 +96,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Quelltextblock"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -98,6 +107,7 @@ exports[`FormattingButtons renders in german 1`] = `
     <button
       aria-label="Link"
       class="mx_AccessibleButton mx_FormattingButtons_Button mx_FormattingButtons_Button_hover"
+      data-state="closed"
       role="button"
       tabindex="0"
     >