From 6b0cb75d82a5676b7d936e3fc10a2276c9630618 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 15 May 2024 11:44:17 +0200
Subject: [PATCH] Use kdb in space panel shortcut (#12525)

---
 res/css/structures/_SpacePanel.pcss        |  7 +++++++
 src/accessibility/KeyboardShortcuts.ts     |  1 +
 src/components/views/spaces/SpacePanel.tsx | 14 +++++---------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
index 0252da01b7..d685617d5b 100644
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@@ -472,3 +472,10 @@ limitations under the License.
 .mx_SpacePanel_sharePublicSpace {
     margin: 0;
 }
+
+.mx_SpacePanel_Tooltip_KeyboardShortcut {
+    kbd {
+        font-family: inherit;
+        text-transform: capitalize;
+    }
+}
diff --git a/src/accessibility/KeyboardShortcuts.ts b/src/accessibility/KeyboardShortcuts.ts
index 398dc27008..9a78f07df4 100644
--- a/src/accessibility/KeyboardShortcuts.ts
+++ b/src/accessibility/KeyboardShortcuts.ts
@@ -203,6 +203,7 @@ export const KEY_ICON: Record<string, string> = {
 if (IS_MAC) {
     KEY_ICON[Key.META] = "⌘";
     KEY_ICON[Key.ALT] = "⌥";
+    KEY_ICON[Key.SHIFT] = "⇧";
 }
 
 export const CATEGORIES: Record<CategoryName, ICategory> = {
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index a9b7093537..942be74bb9 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -62,17 +62,16 @@ import QuickSettingsButton from "./QuickSettingsButton";
 import { useSettingValue } from "../../../hooks/useSettings";
 import UserMenu from "../../structures/UserMenu";
 import IndicatorScrollbar from "../../structures/IndicatorScrollbar";
-import { IS_MAC, Key } from "../../../Keyboard";
 import { useDispatcher } from "../../../hooks/useDispatcher";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import { Action } from "../../../dispatcher/actions";
 import { NotificationState } from "../../../stores/notifications/NotificationState";
-import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
 import { ThreadsActivityCentre } from "./threads-activity-centre/";
 import AccessibleButton from "../elements/AccessibleButton";
+import { KeyboardShortcut } from "../settings/KeyboardShortcut";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
     const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@@ -393,14 +392,11 @@ const SpacePanel: React.FC = () => {
                                 className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
                                 onClick={() => setPanelCollapsed(!isPanelCollapsed)}
                                 title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
-                                // TODO should use a kbd element for accessibility https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
                                 caption={
-                                    IS_MAC
-                                        ? "⌘ + ⇧ + D"
-                                        : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) +
-                                          " + " +
-                                          _t(ALTERNATE_KEY_NAME[Key.SHIFT]) +
-                                          " + D"
+                                    <KeyboardShortcut
+                                        value={{ ctrlOrCmdKey: true, shiftKey: true, key: "d" }}
+                                        className="mx_SpacePanel_Tooltip_KeyboardShortcut"
+                                    />
                                 }
                             />
                         </UserMenu>