♿(frontend) add keyboard navigation to screen share zoom toolbar

Arrows move between controls instead of panning, w/ en/fr/nl/de hint update.

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

@@ -1,5 +1,4 @@
 import { css } from '@/styled-system/css'
-import { HStack } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import {
   RiCollapseDiagonalLine,
@@ -9,6 +8,7 @@ import {
   RiZoomOutLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import { Toolbar } from 'react-aria-components'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { isMacintosh } from '@/utils/livekit'
@@ -100,15 +100,16 @@ export const ScreenShareZoomControls = ({
         pointerEvents: 'auto',
       })}
     >
-      <HStack
-        gap={0}
-        role="toolbar"
+      {/* react-aria Toolbar: left/right arrows move between the controls and
+          Tab leaves the group as a whole, as the toolbar role implies. */}
+      <Toolbar
         aria-label={t('toolbarLabel')}
         className={css({
+          display: 'flex',
+          alignItems: 'center',
           backgroundColor: 'primaryDark.50',
           borderRadius: '2rem',
           padding: '0.5rem',
-          alignItems: 'center',
           opacity: 0.7,
           transition: 'opacity 200ms linear',
           _hover: {
@@ -216,7 +217,7 @@ export const ScreenShareZoomControls = ({
             )}
           </Button>
         )}
-      </HStack>
+      </Toolbar>
     </div>
   )
 }

src/frontend/src/features/rooms/livekit/hooks/useScreenShareZoom.ts

@@ -233,6 +233,8 @@ export const useScreenShareZoom = () => {
       const isZoomed = zoomRef.current > MIN_ZOOM
       if (!isZoomed && e.key !== '+' && e.key !== '=') return
 
+      if (e.key.startsWith('Arrow') && e.target !== e.currentTarget) return
+
       switch (e.key) {
         case 'ArrowLeft':
           e.preventDefault()

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

@@ -770,7 +770,7 @@
     "fullScreen": "Vollbild",
     "exitFullScreen": "Vollbild beenden",
     "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Mit der Maus ziehen oder Pfeiltasten zum Navigieren verwenden.",
+    "panHint": "Zoom {{level}} %. Mit der Maus ziehen oder den Fokus zurück auf die Bildschirmfreigabe setzen und mit den Pfeiltasten im Bild navigieren.",
     "fullScreenEntered": "Vollbild aktiviert",
     "fullScreenExited": "Vollbild deaktiviert"
   },

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

@@ -770,7 +770,7 @@
     "fullScreen": "Full screen",
     "exitFullScreen": "Exit full screen",
     "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Drag with mouse or use arrow keys to navigate.",
+    "panHint": "Zoom {{level}} %. Drag with mouse, or move focus back to the screen share and use arrow keys to navigate the picture.",
     "fullScreenEntered": "Full screen enabled",
     "fullScreenExited": "Full screen disabled"
   },

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

@@ -770,7 +770,7 @@
     "fullScreen": "Plein écran",
     "exitFullScreen": "Quitter le plein écran",
     "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Glissez avec la souris ou utilisez les touches fléchées pour naviguer.",
+    "panHint": "Zoom {{level}} %. Glissez avec la souris, ou revenez sur le partage d'écran et utilisez les touches fléchées pour naviguer dans l'image.",
     "fullScreenEntered": "Plein écran activé",
     "fullScreenExited": "Plein écran désactivé"
   },

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

@@ -770,7 +770,7 @@
     "fullScreen": "Volledig scherm",
     "exitFullScreen": "Volledig scherm verlaten",
     "currentZoomLevel": "Zoom {{level}} %",
-    "panHint": "Zoom {{level}} %. Sleep met de muis of gebruik de pijltjestoetsen om te navigeren.",
+    "panHint": "Zoom {{level}} %. Sleep met de muis, of zet de focus terug op de schermdeling en gebruik de pijltjestoetsen om door het beeld te navigeren.",
     "fullScreenEntered": "Volledig scherm ingeschakeld",
     "fullScreenExited": "Volledig scherm uitgeschakeld"
   },