From f4fed231b8aec2c187310ad6c5efe669b1c8ec1b Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 13 Jul 2026 14:58:00 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20announce=20Escap?=
 =?UTF-8?q?e=20close=20hint=20on=20side=20panels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show "(Escape)" in close tooltip, add aria-describedby for SR keyboard shortcut hint.
---
 .../src/features/rooms/livekit/components/SidePanel.tsx   | 8 ++++++++
 src/frontend/src/locales/de/rooms.json                    | 3 ++-
 src/frontend/src/locales/en/rooms.json                    | 3 ++-
 src/frontend/src/locales/fr/rooms.json                    | 3 ++-
 src/frontend/src/locales/nl/rooms.json                    | 3 ++-
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
index e59f3089..4750e669 100644
--- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
@@ -17,6 +17,7 @@ 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
@@ -25,6 +26,7 @@ type StyledSidePanelProps = {
   onClose: () => void
   isClosed: boolean
   closeButtonTooltip: string
+  escapeHint: string
   isSubmenu: boolean
   onBack: () => void
   backButtonLabel: string
@@ -41,6 +43,7 @@ const StyledSidePanel = React.forwardRef<HTMLElement, StyledSidePanelProps>(
       isClosed,
       isReactionToolbarOpen,
       closeButtonTooltip,
+      escapeHint,
       isSubmenu = false,
       onBack,
       backButtonLabel,
@@ -85,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
@@ -211,6 +218,7 @@ export const SidePanel = () => {
       closeButtonTooltip={t('closeButton', {
         content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
+      escapeHint={t('escapeHint')}
       isClosed={!isSidePanelOpen}
       isSubmenu={isSubPanelOpen}
       isReactionToolbarOpen={isReactionToolbarOpen}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 753e6ca0..2cb39e9a 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 26ce6376..eb7a9cbf 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 8a219dcf..ec99a95b 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/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.",
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 472edbef..e78bdb93 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/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.",