♿️(frontend) refocus reactions toolbar with shortcut when already open

Shortcut now opens it or moves focus to the first emoji button

CHANGELOG.md

@@ -11,7 +11,7 @@ and this project adheres to
 ### Added
 
 - 🔒️(helm) Add pod and container securityContext #1197
-- ✨(summary) add routes v2 for async STT and summary tasks  #1171
+- ✨(summary) add routes v2 for async STT and summary tasks #1171
 - ✅(backend) add unit tests for JwtTokenService #1232
 
 ### Changed
@@ -19,9 +19,10 @@ and this project adheres to
 - ⬆️(backend) bump lodash from 4.17.23 to 4.18.1 in /src/mail
 - ⬆️(frontend) bump hono from 4.12.8 to 4.12.12 in /src/frontend
 - ⬆️(backend) bump pygments from 2.19.2 to 2.20.0 in /src/backend
-- ♻️(backend) use Authorization header for LiveKit token authentication 
+- ♻️(backend) use Authorization header for LiveKit token authentication
 - 🥅(backend) refine Twirp error handling for participant operations
 - ✨(summary) allow more file extensions #1265
+- ♿️(frontend) refocus reactions toolbar with ctrl+shift+e is activated #1262
 
 ### Fixed
 

src/frontend/src/features/reactions/components/ReactionsToggle.tsx

@@ -1,18 +1,36 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiEmotionLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
 
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { REACTIONS_TOOLBAR_ID } from '../constants'
 import { useReactionsToolbar } from '../hooks/useReactionsToolbar'
+import { layoutStore } from '@/stores/layout'
+
+const focusReactionsToolbar = () => {
+  document
+    .getElementById(REACTIONS_TOOLBAR_ID)
+    ?.querySelector<HTMLElement>('button')
+    ?.focus()
+}
 
 export const ReactionsToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
 
   const { isOpen, toggle } = useReactionsToolbar()
 
+  const handleShortcut = useCallback(() => {
+    if (layoutStore.showReactionsToolbar) {
+      focusReactionsToolbar()
+    } else {
+      layoutStore.showReactionsToolbar = true
+    }
+  }, [])
+
   useRegisterKeyboardShortcut({
     id: 'reaction',
-    handler: toggle,
+    handler: handleShortcut,
   })
 
   return (

src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx

@@ -1,4 +1,5 @@
 import { FocusScope, useFocusManager } from '@react-aria/focus'
+import { REACTIONS_TOOLBAR_ID } from '../../constants'
 import { useReactionsToolbar } from '../../hooks/useReactionsToolbar'
 import { ReactionButton } from './ReactionButton'
 import { Emoji } from '../../types'
@@ -120,6 +121,7 @@ const KeyboardNavigation = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <div
+      id={REACTIONS_TOOLBAR_ID}
       role="toolbar"
       aria-label={t('toolbar')}
       onKeyDown={onKeyDown}

src/frontend/src/features/reactions/constants.ts

@@ -1,3 +1,4 @@
+export const REACTIONS_TOOLBAR_ID = 'reactions-toolbar'
 export const ANIMATION_DURATION = 3000
 export const ANIMATION_DISTANCE = 300
 export const FADE_OUT_THRESHOLD = 0.7