♿️(frontend) restore focus to trigger button when panel closes

improves keyboard navigation and accessibility consistency

Signed-off-by: Cyril <c.gromoff@gmail.com>

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -164,7 +164,7 @@ export const SidePanel = () => {
       <Panel isOpen={isChatOpen} keepAlive={true}>
         <Chat />
       </Panel>
-      <Panel isOpen={isToolsOpen}>
+      <Panel isOpen={isToolsOpen} keepAlive={true}>
         <Tools />
       </Panel>
       <Panel isOpen={isAdminOpen}>

src/frontend/src/features/rooms/livekit/components/Tools.tsx

@@ -2,7 +2,7 @@ import { A, Div, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useRef } from 'react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
 import {
   useIsRecordingModeEnabled,
@@ -94,10 +94,49 @@ const ToolButton = ({
 
 export const Tools = () => {
   const { data } = useConfig()
-  const { openTranscript, openScreenRecording, activeSubPanelId } =
+  const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
     useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
 
+  // Restore focus to the element that opened the Tools panel
+  // following the same pattern as Chat.
+  const toolsTriggerRef = useRef<HTMLElement | null>(null)
+  const prevIsToolsOpenRef = useRef(false)
+
+  useEffect(() => {
+    const wasOpen = prevIsToolsOpenRef.current
+    const isOpen = isToolsOpen
+
+    // Tools just opened
+    if (!wasOpen && isOpen) {
+      const activeEl = document.activeElement as HTMLElement | null
+
+      // If the active element is a MenuItem (DIV) that will be unmounted when the menu closes,
+      // find the "more options" button ("Plus d'options") that opened the menu
+      if (activeEl?.tagName === 'DIV') {
+        toolsTriggerRef.current = document.querySelector<HTMLButtonElement>(
+          '#room-options-trigger'
+        )
+      } else {
+        // For direct button clicks (e.g. "Plus d'outils"), use the active element as is
+        toolsTriggerRef.current = activeEl
+      }
+    }
+
+    // Tools just closed
+    if (wasOpen && !isOpen) {
+      const trigger = toolsTriggerRef.current
+      if (trigger && document.contains(trigger)) {
+        requestAnimationFrame(() => {
+          trigger.focus({ preventScroll: true })
+        })
+      }
+      toolsTriggerRef.current = null
+    }
+
+    prevIsToolsOpenRef.current = isOpen
+  }, [isToolsOpen])
+
   const isTranscriptEnabled = useIsRecordingModeEnabled(
     RecordingMode.Transcript
   )

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -9,6 +9,7 @@ export const OptionsButton = () => {
   return (
     <Menu variant="dark">
       <Button
+        id="room-options-trigger"
         square
         variant="primaryDark"
         aria-label={t('options.buttonLabel')}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -73,6 +73,7 @@ export function MobileControlBar({
           />
           <HandToggle />
           <Button
+            id="room-options-trigger"
             square
             variant="primaryDark"
             aria-label={t('options.buttonLabel')}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx

@@ -37,6 +37,7 @@ export const LateralMenu = () => {
   return (
     <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
       <Button
+        id="controlbar-more-options-trigger"
         square
         variant="secondaryDark"
         aria-label={t('controls.moreOptions')}