From d12ced352af1add97102b91848d87874e3f53e0e Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Fri, 10 Apr 2026 10:17:34 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20refocus=20reacti?=
 =?UTF-8?q?ons=20toolbar=20with=20shortcut=20=20when=20already=20open?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shortcut now opens it or moves focus to the first emoji button
---
 CHANGELOG.md                                  |  5 +++--
 .../reactions/components/ReactionsToggle.tsx  | 20 ++++++++++++++++++-
 .../components/toolbar/ReactionsToolbar.tsx   |  2 ++
 .../src/features/reactions/constants.ts       |  1 +
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ed9c80a..5f3bfd15 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/src/features/reactions/components/ReactionsToggle.tsx b/src/frontend/src/features/reactions/components/ReactionsToggle.tsx
index 38d950a3..27bfe4cf 100644
--- a/src/frontend/src/features/reactions/components/ReactionsToggle.tsx
+++ b/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 (
diff --git a/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx b/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
index fa01ff77..6432009c 100644
--- a/src/frontend/src/features/reactions/components/toolbar/ReactionsToolbar.tsx
+++ b/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}
diff --git a/src/frontend/src/features/reactions/constants.ts b/src/frontend/src/features/reactions/constants.ts
index 1bd3b29d..fa78eec1 100644
--- a/src/frontend/src/features/reactions/constants.ts
+++ b/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