From 4f2764eef4aa904e2cf166c9d77d8026d3e34e65 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 11 Dec 2025 12:21:36 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20add=20tooltip=20?=
 =?UTF-8?q?and=20sr=20hint=20for=20f2=20shortcut=20to=20bottom=20toolbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

helps keyboard and sr users discover the f2 shortcut for toolbar access

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 .../livekit/components/ParticipantTile.tsx    | 26 ++++++++++++++-----
 .../prefabs/ControlBar/DesktopControlBar.tsx  | 13 ++++++++++
 src/frontend/src/locales/de/rooms.json        |  4 ++-
 src/frontend/src/locales/en/rooms.json        |  3 ++-
 src/frontend/src/locales/fr/rooms.json        |  3 ++-
 src/frontend/src/locales/nl/rooms.json        |  3 ++-
 6 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index b19c6f33..b02d954a 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -31,6 +31,7 @@ import { FullScreenShareWarning } from './FullScreenShareWarning'
 import { ParticipantName } from './ParticipantName'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useTranslation } from 'react-i18next'
+import { css } from '@/styled-system/css'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -109,14 +110,8 @@ export const ParticipantTile: (
   const participantName = getParticipantName(trackReference.participant)
   const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
 
-  // Avoid double announcements: LiveKit's useParticipantTile may set its own
-  // aria-label / aria-labelledby / aria-describedby. We strip them here
-  // and provide a single, explicit label for the focusable tile container.
-  const { 'aria-label': _ignoredAriaLabel, ...safeElementProps } = elementProps
-  void _ignoredAriaLabel
-
   const interactiveProps = {
-    ...safeElementProps,
+    ...elementProps,
     // Ensure the tile is focusable to expose contextual controls to keyboard users.
     tabIndex: 0,
     'aria-label': t('containerLabel', { name: participantName }),
@@ -232,6 +227,23 @@ export const ParticipantTile: (
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
+      {hasKeyboardFocus && (
+        <div
+          className={css({
+            position: 'absolute',
+            top: '0.75rem',
+            left: '0.75rem',
+            backgroundColor: 'rgba(0,0,0,0.6)',
+            color: 'white',
+            borderRadius: '999px',
+            paddingInline: '0.5rem',
+            paddingBlock: '0.1rem',
+            fontSize: '0.75rem',
+          })}
+        >
+          {t('toolbarHint')}
+        </div>
+      )}
     </div>
   )
 })
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
index c7b050e2..dce26463 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx
@@ -11,6 +11,7 @@ import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
 import { MoreOptions } from './MoreOptions'
 import { useRef } from 'react'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 
@@ -19,6 +20,18 @@ export function DesktopControlBar({
 }: Readonly<ControlBarAuxProps>) {
   const browserSupportsScreenSharing = supportsScreenSharing()
   const desktopControlBarEl = useRef<HTMLDivElement>(null)
+
+  useRegisterKeyboardShortcut({
+    shortcut: { key: 'F2' },
+    handler: () => {
+      const root = desktopControlBarEl.current
+      if (!root) return
+      const firstButton = root.querySelector<HTMLButtonElement>(
+        'button, [role="button"], [tabindex="0"]'
+      )
+      firstButton?.focus()
+    },
+  })
   return (
     <div
       ref={desktopControlBarEl}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index b8d3b837..d27051e8 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -512,7 +512,9 @@
     }
   },
   "participantTileFocus": {
-    "containerLabel": "Optionen für {{name}}",
+    "containerLabel": "Optionen für {{name}}, F2: zur Symbolleiste unten.",
+    "toolbarHint": "F2: zur Symbolleiste unten.",
+
     "pin": {
       "enable": "Anheften",
       "disable": "Lösen"
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 70914a8c..0de0c3d6 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -512,7 +512,8 @@
     }
   },
   "participantTileFocus": {
-    "containerLabel": "Options for {{name}}",
+    "containerLabel": "Options for {{name}}, F2: go to the bottom toolbar.",
+    "toolbarHint": "F2: go to the bottom toolbar.",
     "pin": {
       "enable": "Pin",
       "disable": "Unpin"
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 041adaea..c7b27ecd 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -512,7 +512,8 @@
     }
   },
   "participantTileFocus": {
-    "containerLabel": "Options pour {{name}}",
+    "containerLabel": "Options pour {{name}}, raccourci F2 pour aller à la barre d'outils en bas.",
+    "toolbarHint": "F2: raccourci barre d'outils en bas.",
     "pin": {
       "enable": "Épingler",
       "disable": "Annuler l'épinglage"
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 8b7baa49..f1fe7c91 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -512,7 +512,8 @@
     }
   },
   "participantTileFocus": {
-    "containerLabel": "Opties voor {{name}}",
+    "containerLabel": "Opties voor {{name}}, F2: naar de werkbalk onderaan.",
+    "toolbarHint": "F2: naar de werkbalk onderaan.",
     "pin": {
       "enable": "Pinnen",
       "disable": "Losmaken"