♿️(frontend) announce Escape close hint on side panels

Show "(Escape)" in close tooltip, add aria-describedby for SR keyboard shortcut hint.

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to
 - ♻️(frontend) inline model weights to avoid loading them from remote
 - ♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote
 - ⬆️(frontend) upgrade posthog-js from 1.387.0 to 1.391.2
+- ♿️(frontend) close side panel with Escape key #1507
 
 ### Fixed
 

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

@@ -16,6 +16,8 @@ import { Info } from './Info'
 import { HStack } from '@/styled-system/jsx'
 import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
 import { useRestoreFocus } from '@/hooks/useRestoreFocus'
+import { useEscapeToClose } from '@/hooks/useEscapeToClose'
+import { srOnly } from '@/styles/a11y'
 
 type StyledSidePanelProps = {
   title: string
@@ -24,6 +26,7 @@ type StyledSidePanelProps = {
   onClose: () => void
   isClosed: boolean
   closeButtonTooltip: string
+  escapeHint: string
   isSubmenu: boolean
   onBack: () => void
   backButtonLabel: string
@@ -40,6 +43,7 @@ const StyledSidePanel = React.forwardRef<HTMLElement, StyledSidePanelProps>(
       isClosed,
       isReactionToolbarOpen,
       closeButtonTooltip,
+      escapeHint,
       isSubmenu = false,
       onBack,
       backButtonLabel,
@@ -84,7 +88,11 @@ const StyledSidePanel = React.forwardRef<HTMLElement, StyledSidePanelProps>(
       }}
       aria-hidden={isClosed}
       aria-label={ariaLabel}
+      aria-describedby="side-panel-escape-hint"
     >
+      <span id="side-panel-escape-hint" className={srOnly}>
+        {escapeHint}
+      </span>
       <HStack alignItems="center">
         {isSubmenu && (
           <Button
@@ -188,24 +196,29 @@ export const SidePanel = () => {
     focusAside()
   }, [activePanelId, focusAside])
 
+  const closePanel = useCallback(() => {
+    layoutStore.activePanelId = null
+    layoutStore.activeSubPanelId = null
+  }, [])
+
   useRestoreFocus(isSidePanelOpen, {
     onOpened: handlePanelOpened,
     preventScroll: true,
     activeKey: activePanelId,
   })
 
+  useEscapeToClose(isSidePanelOpen, asideRef, closePanel)
+
   return (
     <StyledSidePanel
       ref={asideRef}
       title={title}
       ariaLabel={t('ariaLabel', { title })}
-      onClose={() => {
+      onClose={closePanel}
-        layoutStore.activePanelId = null
-        layoutStore.activeSubPanelId = null
-      }}
       closeButtonTooltip={t('closeButton', {
         content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
+      escapeHint={t('escapeHint')}
       isClosed={!isSidePanelOpen}
       isSubmenu={isSubPanelOpen}
       isReactionToolbarOpen={isReactionToolbarOpen}

src/frontend/src/features/rooms/livekit/components/chat/Input.tsx

@@ -35,6 +35,11 @@ export const ChatInput = ({
     if (!isDisabled) handleSubmit()
   }
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== 'Escape') e.stopPropagation()
+    submitOnEnter(e)
+  }
+
   useEffect(() => {
     const resize = () => {
       if (!inputRef.current) return
@@ -79,10 +84,7 @@ export const ChatInput = ({
     >
       <TextArea
         ref={inputRef}
-        onKeyDown={(e) => {
+        onKeyDown={handleKeyDown}
-          e.stopPropagation()
-          submitOnEnter(e)
-        }}
         onKeyUp={(e) => e.stopPropagation()}
         placeholder={t('textArea.placeholder')}
         value={text}

src/frontend/src/hooks/useEscapeToClose.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef, type RefObject } from 'react'
+
+export const useEscapeToClose = (
+  isActive: boolean,
+  containerRef: RefObject<HTMLElement | null>,
+  onClose: () => void
+) => {
+  const onCloseRef = useRef(onClose)
+  useEffect(() => {
+    onCloseRef.current = onClose
+  })
+
+  useEffect(() => {
+    if (!isActive) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      if (!containerRef.current?.contains(document.activeElement)) return
+      e.stopPropagation()
+      onCloseRef.current()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isActive, containerRef])
+}

src/frontend/src/locales/de/rooms.json

@@ -361,7 +361,8 @@
       "tools": "Weitere Tools",
       "info": "Meeting-Informationen"
     },
-    "closeButton": "{{content}} ausblenden"
+    "closeButton": "{{content}} ausblenden (Escape)",
+    "escapeHint": "Escape drücken zum Schließen"
   },
   "chat": {
     "disclaimer": "Die Nachrichten sind nur für Teilnehmende zum Zeitpunkt des Sendens sichtbar. Alle Nachrichten werden am Ende des Meetings gelöscht.",

src/frontend/src/locales/en/rooms.json

@@ -360,7 +360,8 @@
       "tools": "more tools",
       "info": "meeting information"
     },
-    "closeButton": "Hide {{content}}"
+    "closeButton": "Hide {{content}} (Escape)",
+    "escapeHint": "Press Escape to close"
   },
   "chat": {
     "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call.",

src/frontend/src/locales/fr/rooms.json

@@ -360,7 +360,8 @@
       "tools": "outils de réunion",
       "info": "informations sur la réunion"
     },
-    "closeButton": "Masquer {{content}}"
+    "closeButton": "Masquer {{content}} (Échap)",
+    "escapeHint": "Appuyez sur Échap pour fermer"
   },
   "chat": {
     "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel.",

src/frontend/src/locales/nl/rooms.json

@@ -360,7 +360,8 @@
       "tools": "meer tools",
       "info": "vergaderinformatie"
     },
-    "closeButton": "Verberg {{content}}"
+    "closeButton": "Verberg {{content}} (Escape)",
+    "escapeHint": "Druk op Escape om te sluiten"
   },
   "chat": {
     "disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek.",