♿(frontend) add wheel zoom shortcut hints to screen share controls

Show Ctrl/Cmd+scroll zoom shortcut in tooltips, aria, SR hints, w/ en/fr/nl/de.

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

@@ -11,6 +11,8 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
+import { isMacintosh } from '@/utils/livekit'
+import { srOnly } from '@/styles/a11y'
 
 interface ScreenShareZoomControlsProps {
   containerRef: React.RefObject<HTMLDivElement | null>
@@ -76,6 +78,11 @@ export const ScreenShareZoomControls = ({
     }
   }, [containerRef])
 
+  const wheelShortcutVisual = isMacintosh() ? '⌘+scroll' : 'Ctrl+scroll'
+  const wheelShortcutSR = t(
+    isMacintosh() ? 'wheelShortcutMac' : 'wheelShortcut'
+  )
+
   return (
     <div
       className={css({
@@ -103,6 +110,9 @@ export const ScreenShareZoomControls = ({
           },
         })}
       >
+        <span className={srOnly}>
+          {t(isMacintosh() ? 'wheelShortcutHintMac' : 'wheelShortcutHint')}
+        </span>
         {isZoomed && (
           <>
             <Button
@@ -119,8 +129,8 @@ export const ScreenShareZoomControls = ({
               size="sm"
               variant="primaryTextDark"
               square
-              tooltip={t('zoomOut')}
+              tooltip={t('zoomOutWithShortcut', { shortcut: wheelShortcutVisual })}
-              aria-label={t('zoomOut')}
+              aria-label={t('zoomOutWithShortcut', { shortcut: wheelShortcutSR })}
               isDisabled={!canZoomOut}
               onPress={onZoomOut}
             >
@@ -150,8 +160,8 @@ export const ScreenShareZoomControls = ({
           size="sm"
           variant="primaryTextDark"
           square
-          tooltip={t('zoomIn')}
+          tooltip={t('zoomInWithShortcut', { shortcut: wheelShortcutVisual })}
-          aria-label={t('zoomIn')}
+          aria-label={t('zoomInWithShortcut', { shortcut: wheelShortcutSR })}
           isDisabled={!canZoomIn}
           onPress={onZoomIn}
         >

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

@@ -671,7 +671,13 @@
   "screenShareZoom": {
     "toolbarLabel": "Zoom-Steuerung für Bildschirmfreigabe",
     "zoomIn": "Vergrößern",
+    "zoomInWithShortcut": "Vergrößern ({{shortcut}})",
     "zoomOut": "Verkleinern",
+    "zoomOutWithShortcut": "Verkleinern ({{shortcut}})",
+    "wheelShortcut": "Steuerung plus Mausrad",
+    "wheelShortcutMac": "Befehl plus Mausrad",
+    "wheelShortcutHint": "Tastenkürzel: Steuerung plus Mausrad zum Vergrößern oder Verkleinern.",
+    "wheelShortcutHintMac": "Tastenkürzel: Befehl plus Mausrad zum Vergrößern oder Verkleinern.",
     "fitToWindow": "An Fenster anpassen",
     "fullScreen": "Vollbild",
     "exitFullScreen": "Vollbild beenden",

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

@@ -670,7 +670,13 @@
   "screenShareZoom": {
     "toolbarLabel": "Screen share zoom controls",
     "zoomIn": "Zoom in",
+    "zoomInWithShortcut": "Zoom in ({{shortcut}})",
     "zoomOut": "Zoom out",
+    "zoomOutWithShortcut": "Zoom out ({{shortcut}})",
+    "wheelShortcut": "Control plus scroll wheel",
+    "wheelShortcutMac": "Command plus scroll wheel",
+    "wheelShortcutHint": "Shortcut: Control plus scroll wheel to zoom in or out.",
+    "wheelShortcutHintMac": "Shortcut: Command plus scroll wheel to zoom in or out.",
     "fitToWindow": "Fit to window",
     "fullScreen": "Full screen",
     "exitFullScreen": "Exit full screen",

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

@@ -670,7 +670,13 @@
   "screenShareZoom": {
     "toolbarLabel": "Contrôles de zoom du partage d'écran",
     "zoomIn": "Zoomer",
+    "zoomInWithShortcut": "Zoomer ({{shortcut}})",
     "zoomOut": "Dézoomer",
+    "zoomOutWithShortcut": "Dézoomer ({{shortcut}})",
+    "wheelShortcut": "Contrôle plus molette",
+    "wheelShortcutMac": "Commande plus molette",
+    "wheelShortcutHint": "Raccourci : Contrôle plus molette pour zoomer ou dézoomer.",
+    "wheelShortcutHintMac": "Raccourci : Commande plus molette pour zoomer ou dézoomer.",
     "fitToWindow": "Ajuster à la fenêtre",
     "fullScreen": "Plein écran",
     "exitFullScreen": "Quitter le plein écran",

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

@@ -670,7 +670,13 @@
   "screenShareZoom": {
     "toolbarLabel": "Zoombediening voor schermdeling",
     "zoomIn": "Inzoomen",
+    "zoomInWithShortcut": "Inzoomen ({{shortcut}})",
     "zoomOut": "Uitzoomen",
+    "zoomOutWithShortcut": "Uitzoomen ({{shortcut}})",
+    "wheelShortcut": "Control plus scrollwiel",
+    "wheelShortcutMac": "Command plus scrollwiel",
+    "wheelShortcutHint": "Sneltoets: Control plus scrollwiel om in of uit te zoomen.",
+    "wheelShortcutHintMac": "Sneltoets: Command plus scrollwiel om in of uit te zoomen.",
     "fitToWindow": "Aanpassen aan venster",
     "fullScreen": "Volledig scherm",
     "exitFullScreen": "Volledig scherm verlaten",