✨(frontend) support additional shortcuts to broaden accessibility

Add support for additional shortcuts to broaden accessibility and
integration capabilities. Some of these are required to ensure full
functionality with the RENATER SIP media gateway, allowing shortcut
mapping to DTMF signals. Others improve usability for keyboard-only
users; a lightweight helper will be introduced to surface available
shortcuts and make them easier to discover and use.

Author: Ovgodd

src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx

@@ -6,6 +6,7 @@ import { ToggleButton } from '@/primitives'
 import { chatStore } from '@/stores/chat'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 
 export const ChatToggle = ({
   onPress,
@@ -18,6 +19,11 @@ export const ChatToggle = ({
   const { isChatOpen, toggleChat } = useSidePanel()
   const tooltipLabel = isChatOpen ? 'open' : 'closed'
 
+  useRegisterKeyboardShortcut({
+    id: 'toggle-chat',
+    handler: toggleChat,
+  })
+
   return (
     <div
       className={css({

src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx

@@ -9,6 +9,7 @@ import {
   closeLowerHandToasts,
   showLowerHandToast,
 } from '@/features/notifications/utils'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 
 const SPEAKING_DETECTION_DELAY = 3000
 
@@ -33,6 +34,16 @@ export const HandToggle = () => {
     closeLowerHandToasts()
   }, [isHandRaised])
 
+  const handleToggle = () => {
+    toggleRaisedHand()
+    resetToastState()
+  }
+
+  useRegisterKeyboardShortcut({
+    id: 'raise-hand',
+    handler: handleToggle,
+  })
+
   useEffect(() => {
     const shouldShowToast = isSpeaking && isHandRaised && !hasShownToast
 
@@ -68,10 +79,7 @@ export const HandToggle = () => {
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isHandRaised}
-        onPress={() => {
-          toggleRaisedHand()
-          resetToastState()
-        }}
+        onPress={handleToggle}
         data-attr={`controls-hand-${tooltipLabel}`}
       >
         <RiHand />

src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx

@@ -11,6 +11,7 @@ import {
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
 import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { Toolbar as RACToolbar } from 'react-aria-components'
 import { Participant } from 'livekit-client'
 import useRateLimiter from '@/hooks/useRateLimiter'
@@ -41,6 +42,11 @@ export const ReactionsToggle = () => {
 
   const [isVisible, setIsVisible] = useState(false)
 
+  useRegisterKeyboardShortcut({
+    id: 'reaction',
+    handler: () => setIsVisible((prev) => !prev),
+  })
+
   const sendReaction = async (emoji: string) => {
     const encoder = new TextEncoder()
     const payload: NotificationPayload = {

src/frontend/src/features/shortcuts/catalog.ts

@@ -9,6 +9,12 @@ export type ShortcutId =
   | 'toggle-microphone'
   | 'toggle-camera'
   | 'push-to-talk'
+  | 'toggle-chat'
+  | 'toggle-participants'
+  | 'raise-hand'
+  | 'recording'
+  | 'reaction'
+  | 'fullscreen'
 
 export const getShortcutDescriptorById = (id: ShortcutId) =>
   shortcutCatalog.find((item) => item.id === id)
@@ -44,4 +50,34 @@ export const shortcutCatalog: ShortcutDescriptor[] = [
     kind: 'longPress',
     code: 'KeyV',
   },
+  {
+    id: 'reaction',
+    category: 'interaction',
+    shortcut: { key: 'E', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'fullscreen',
+    category: 'interaction',
+    shortcut: { key: 'F', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'recording',
+    category: 'interaction',
+    shortcut: { key: 'L', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'raise-hand',
+    category: 'interaction',
+    shortcut: { key: 'H', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'toggle-chat',
+    category: 'interaction',
+    shortcut: { key: 'M', ctrlKey: true, shiftKey: true },
+  },
+  {
+    id: 'toggle-participants',
+    category: 'interaction',
+    shortcut: { key: 'P', ctrlKey: true, shiftKey: true },
+  },
 ]