Use kdb in space panel shortcut (#12525)

Author: florianduros

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;
+    }
+}

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> = {

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>