Use kbd

Author: florianduros

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -63,3 +63,12 @@ limitations under the License.
         color: $tertiary-content;
     }
 }
+
+.mx_FormattingButtons_Tooltip_KeyboardShortcut {
+    kbd {
+        text-align: center;
+        display: inline-block;
+        text-transform: capitalize;
+        font-family: Inter, sans-serif;
+    }
+}

src/components/views/elements/AccessibleButton.tsx

@@ -92,12 +92,12 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
     /**
      * The tooltip to show on hover or focus.
      */
-    title?: string;
+    title?: TooltipProps["label"];
     /**
      * The caption is a secondary text displayed under the `title` of the tooltip.
      * Only valid when used in conjunction with `title`.
      */
-    caption?: string;
+    caption?: TooltipProps["caption"];
     /**
      * The placement of the tooltip.
      */

src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx

@@ -34,18 +34,18 @@ import { _t } from "../../../../../languageHandler";
 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";
+import { KeyboardShortcut } from "../../../settings/KeyboardShortcut";
+import { KeyCombo } from "../../../../../KeyBindingsManager";
 
 interface ButtonProps {
     icon: ReactNode;
     actionState: ActionState;
     onClick: MouseEventHandler<HTMLButtonElement>;
     label: string;
-    shortcut?: string;
+    keyCombo?: KeyCombo;
 }
 
-function Button({ label, shortcut, onClick, actionState, icon }: ButtonProps): JSX.Element {
+function Button({ label, keyCombo, onClick, actionState, icon }: ButtonProps): JSX.Element {
     return (
         <AccessibleButton
             element="button"
@@ -57,22 +57,18 @@ function Button({ label, shortcut, onClick, actionState, icon }: ButtonProps): J
                 mx_FormattingButtons_disabled: actionState === "disabled",
             })}
             title={actionState === "disabled" ? undefined : label}
-            caption={shortcut}
+            caption={
+                keyCombo && (
+                    <KeyboardShortcut value={keyCombo} className="mx_FormattingButtons_Tooltip_KeyboardShortcut" />
+                )
+            }
             placement="top"
         >
             {icon}
         </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;
@@ -86,21 +82,21 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             <Button
                 actionState={actionStates.bold}
                 label={_t("composer|format_bold")}
-                shortcut={getShortcutFromKey("B")}
+                keyCombo={{ ctrlOrCmdKey: true, key: "b" }}
                 onClick={() => composer.bold()}
                 icon={<BoldIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.italic}
                 label={_t("composer|format_italic")}
-                shortcut={getShortcutFromKey("I")}
+                keyCombo={{ ctrlOrCmdKey: true, key: "i" }}
                 onClick={() => composer.italic()}
                 icon={<ItalicIcon className="mx_FormattingButtons_Icon" />}
             />
             <Button
                 actionState={actionStates.underline}
                 label={_t("composer|format_underline")}
-                shortcut={getShortcutFromKey("U")}
+                keyCombo={{ ctrlOrCmdKey: true, key: "u" }}
                 onClick={() => composer.underline()}
                 icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />}
             />
@@ -147,7 +143,7 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
             <Button
                 actionState={actionStates.inlineCode}
                 label={_t("composer|format_inline_code")}
-                shortcut={getShortcutFromKey("E")}
+                keyCombo={{ ctrlOrCmdKey: true, key: "e" }}
                 onClick={() => composer.inlineCode()}
                 icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />}
             />

src/components/views/settings/KeyboardShortcut.tsx

@@ -43,7 +43,12 @@ interface IKeyboardShortcutProps {
     className?: string;
 }
 
-export const KeyboardShortcut: React.FC<IKeyboardShortcutProps> = ({ value, className = "mx_KeyboardShortcut" }) => {
+export const KeyboardShortcut: React.FC<IKeyboardShortcutProps> = ({
+    value,
+    className = "mx_KeyboardShortcut",
+    // We are using this component as the caption in compound tooltip and we need to forward the props
+    ...props
+}) => {
     if (!value) return null;
 
     const modifiersElement: JSX.Element[] = [];
@@ -62,7 +67,7 @@ export const KeyboardShortcut: React.FC<IKeyboardShortcutProps> = ({ value, clas
     }
 
     return (
-        <div className={className}>
+        <div className={className} {...props}>
             {modifiersElement}
             <KeyboardKey name={value.key} last />
         </div>