Add keyboard shortcut disable setting

locales/en/app.json

@@ -224,6 +224,8 @@
     "preferences_tab": {
       "developer_mode_label": "Developer mode",
       "developer_mode_label_description": "Enable developer mode and show developer settings tab.",
+      "enable_keyboard_shortcuts_description": "Use keyboard shortcuts to control Element Call.",
+      "enable_keyboard_shortcuts_label": "Enable keyboard shortcuts",
       "introduction": "Here you can configure extra options for an improved experience.",
       "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
       "reactions_play_sound_label": "Play reaction sounds",

src/settings/PreferencesSettingsTab.tsx

@@ -1,4 +1,5 @@
 /*
+Copyright (C) 2025 Element Creations Ltd
 Copyright 2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
@@ -15,6 +16,7 @@ import {
   showReactions as showReactionsSetting,
   playReactionsSound as playReactionsSoundSetting,
   developerMode as developerModeSetting,
+  enableKeyboardShortcuts as enableKeyboardShortcutsSetting,
   useSetting,
 } from "./settings";
 
@@ -39,6 +41,10 @@ export const PreferencesSettingsTab: FC = () => {
 
   const [developerMode, setDeveloperMode] = useSetting(developerModeSetting);
 
+  const [enableKeyboardShortcuts, setEnableKeyboardShortcuts] = useSetting(
+    enableKeyboardShortcutsSetting,
+  );
+
   return (
     <div>
       <Text>{t("settings.preferences_tab.introduction")}</Text>
@@ -64,6 +70,18 @@ export const PreferencesSettingsTab: FC = () => {
           onChange={(e) => onChangeSetting(e, setShowReactions)}
         />
       </FieldRow>
+      <FieldRow>
+        <InputField
+          id="enableKeyboardShortcuts"
+          label={t("settings.preferences_tab.enable_keyboard_shortcuts_label")}
+          description={t(
+            "settings.preferences_tab.enable_keyboard_shortcuts_description",
+          )}
+          type="checkbox"
+          checked={enableKeyboardShortcuts}
+          onChange={(e) => onChangeSetting(e, setEnableKeyboardShortcuts)}
+        />
+      </FieldRow>
       <FieldRow>
         <InputField
           id="playReactionSound"

src/settings/settings.ts

@@ -1,4 +1,5 @@
 /*
+Copyright (C) 2025 Element Creations Ltd
 Copyright 2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
@@ -105,6 +106,11 @@ export const showHandRaisedTimer = new Setting<boolean>(
 
 export const showReactions = new Setting<boolean>("reactions-show", true);
 
+export const enableKeyboardShortcuts = new Setting<boolean>(
+  "keyboard-shortcuts",
+  true,
+);
+
 export const playReactionsSound = new Setting<boolean>(
   "reactions-play-sound",
   true,

src/useCallViewKeyboardShortcuts.ts

@@ -1,4 +1,5 @@
 /*
+Copyright (C) 2025 Element Creations Ltd
 Copyright 2022-2024 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
@@ -13,6 +14,7 @@ import {
   ReactionSet,
   ReactionsRowSize,
 } from "./reactions";
+import { enableKeyboardShortcuts, useSetting } from "./settings/settings";
 
 /**
  * Determines whether focus is in the same part of the tree as the given
@@ -35,6 +37,7 @@ export function useCallViewKeyboardShortcuts(
   sendReaction: (reaction: ReactionOption) => void,
   toggleHandRaised: () => void,
 ): void {
+  const [shortcutsEnabled] = useSetting(enableKeyboardShortcuts);
   const spacebarHeld = useRef(false);
 
   // These event handlers are set on the window because we want users to be able
@@ -45,6 +48,7 @@ export function useCallViewKeyboardShortcuts(
     "keydown",
     useCallback(
       (event: KeyboardEvent) => {
+        if (!shortcutsEnabled) return;
         if (focusElement.current === null) return;
         if (!mayReceiveKeyEvents(focusElement.current)) return;
         if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
@@ -77,6 +81,7 @@ export function useCallViewKeyboardShortcuts(
         setAudioEnabled,
         sendReaction,
         toggleHandRaised,
+        shortcutsEnabled,
       ],
     ),
     // Because this is set on the window, to prevent shortcuts from activating
@@ -90,6 +95,7 @@ export function useCallViewKeyboardShortcuts(
     "keyup",
     useCallback(
       (event: KeyboardEvent) => {
+        if (!shortcutsEnabled) return;
         if (focusElement.current === null) return;
         if (!mayReceiveKeyEvents(focusElement.current)) return;
 
@@ -98,18 +104,19 @@ export function useCallViewKeyboardShortcuts(
           setAudioEnabled?.(false);
         }
       },
-      [focusElement, setAudioEnabled],
+      [shortcutsEnabled, focusElement, setAudioEnabled],
     ),
   );
 
   useEventTarget(
     window,
     "blur",
     useCallback(() => {
+      if (!shortcutsEnabled) return;
       if (spacebarHeld.current) {
         spacebarHeld.current = false;
         setAudioEnabled?.(true);
       }
-    }, [setAudioEnabled, spacebarHeld]),
+    }, [setAudioEnabled, spacebarHeld, shortcutsEnabled]),
   );
 }