diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx index 2c80e2fe..3ca50e6e 100644 --- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx +++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx @@ -164,7 +164,7 @@ export const SidePanel = () => { - + diff --git a/src/frontend/src/features/rooms/livekit/components/Tools.tsx b/src/frontend/src/features/rooms/livekit/components/Tools.tsx index bd5cfb7a..dfdae586 100644 --- a/src/frontend/src/features/rooms/livekit/components/Tools.tsx +++ b/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(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( + '#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 ) diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx index 5bf7d92b..715dcd30 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx @@ -9,6 +9,7 @@ export const OptionsButton = () => { return (