✨(frontend) restore focus on chat close

restore keyboard focus to the triggering element when the chat panel closes.

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

CHANGELOG.md

@@ -15,3 +15,4 @@ and this project adheres to
 - ♿️(frontend) change ptt keybinding from space to v #813
 - ♿(frontend) indicate external link opens in new window on feedback #816 
 - ♿(frontend) fix heading level in modal to maintain semantic hierarchy #815
+- ♿️(frontend) Improve focus management when opening and closing chat #807

src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx

@@ -36,9 +36,31 @@ export function Chat({ ...props }: ChatProps) {
   const { isChatOpen } = useSidePanel()
   const chatSnap = useSnapshot(chatStore)
 
+  // Keep track of the element that opened the chat so we can restore focus
+  // when the chat panel is closed.
+  const prevIsChatOpenRef = React.useRef(false)
+  const chatTriggerRef = React.useRef<HTMLElement | null>(null)
+
   useEffect(() => {
-    if (!isChatOpen || !inputRef.current) return
+    const wasChatOpen = prevIsChatOpenRef.current
-    inputRef.current.focus()
+    const isChatPanelOpen = isChatOpen
+
+    // Chat just opened
+    if (!wasChatOpen && isChatPanelOpen) {
+      chatTriggerRef.current = document.activeElement as HTMLElement | null
+      inputRef.current?.focus()
+    }
+
+    // Chat just closed
+    if (wasChatOpen && !isChatPanelOpen) {
+      const trigger = chatTriggerRef.current
+      if (trigger && document.contains(trigger)) {
+        trigger.focus()
+      }
+      chatTriggerRef.current = null
+    }
+
+    prevIsChatOpenRef.current = isChatPanelOpen
   }, [isChatOpen])
 
   // Use useParticipants hook to trigger a re-render when the participant list changes.