From 620e860474fb58210827eb2adf6cdffec17458d7 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 13 Jul 2026 16:03:12 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF(frontend)=20add=20wheel=20zoom=20shor?=
 =?UTF-8?q?tcut=20hints=20to=20screen=20share=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show Ctrl/Cmd+scroll zoom shortcut in tooltips, aria, SR hints, w/ en/fr/nl/de.
---
 .../components/ScreenShareZoomControls.tsx     | 18 ++++++++++++++----
 src/frontend/src/locales/de/rooms.json         |  6 ++++++
 src/frontend/src/locales/en/rooms.json         |  6 ++++++
 src/frontend/src/locales/fr/rooms.json         |  6 ++++++
 src/frontend/src/locales/nl/rooms.json         |  6 ++++++
 5 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx b/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx
index 0e9458da..51bba8ff 100644
--- a/src/frontend/src/features/rooms/livekit/components/ScreenShareZoomControls.tsx
+++ b/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')}
-              aria-label={t('zoomOut')}
+              tooltip={t('zoomOutWithShortcut', { shortcut: wheelShortcutVisual })}
+              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')}
-          aria-label={t('zoomIn')}
+          tooltip={t('zoomInWithShortcut', { shortcut: wheelShortcutVisual })}
+          aria-label={t('zoomInWithShortcut', { shortcut: wheelShortcutSR })}
           isDisabled={!canZoomIn}
           onPress={onZoomIn}
         >
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index ca9b9fcb..ccafc1e6 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/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",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 31ee20dd..91992e6c 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/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",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index d82e1728..6267b0fb 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/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",
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 8bdb0740..86ed7033 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/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",