✨(frontend) re-focus toolbar on shortcut when already open

allow keyboard shortcut to return focus to the emoji toolbar without closing it

Author: Ovgodd

src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx

@@ -1,5 +1,6 @@
 import { ToggleButton } from '@/primitives'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { useMemo, useState } from 'react'
 import { appendShortcutLabel } from '@/features/shortcuts/utils'
 import { useTranslation } from 'react-i18next'
@@ -87,10 +88,18 @@ export const ToggleDevice = <T extends ToggleSource>({
   const deviceIcons = useDeviceIcons(kind)
   const cannotUseDevice = useCannotUseDevice(kind)
   const deviceShortcut = useDeviceShortcut(kind)
+  const announce = useScreenReaderAnnounce()
 
   useRegisterKeyboardShortcut({
     id: deviceShortcut?.id,
-    handler: async () => await toggle(),
+    handler: async () => {
+      await toggle()
+      const newState = !enabled
+      const message = t(newState ? 'turnedOn' : 'turnedOff', {
+        keyPrefix: `selectDevice.${kind}`,
+      })
+      announce(message, 'assertive')
+    },
     isDisabled: cannotUseDevice,
   })
 

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

@@ -22,6 +22,8 @@
       "permissionsNeeded": "Kamera auswählen - genehmigung erforderlich",
       "disable": "Kamera deaktivieren",
       "enable": "Kamera aktivieren",
+      "turnedOff": "Kamera deaktiviert",
+      "turnedOn": "Kamera aktiviert",
       "label": "Kamera",
       "placeholder": "Kamera aktivieren, um die Vorschau zu sehen"
     },
@@ -30,6 +32,8 @@
       "permissionsNeeded": "Mikrofon auswählen - genehmigung erforderlich",
       "disable": "Mikrofon deaktivieren",
       "enable": "Mikrofon aktivieren",
+      "turnedOff": "Mikrofon deaktiviert",
+      "turnedOn": "Mikrofon aktiviert",
       "label": "Mikrofon"
     },
     "audiooutput": {

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

@@ -22,6 +22,8 @@
       "permissionsNeeded": "Select camera - permission needed",
       "disable": "Disable camera",
       "enable": "Enable camera",
+      "turnedOff": "Camera turned off",
+      "turnedOn": "Camera turned on",
       "label": "Camera",
       "placeholder": "Enable camera to see the preview"
     },
@@ -30,6 +32,8 @@
       "permissionsNeeded": "Select microphone - permission needed",
       "disable": "Disable microphone",
       "enable": "Enable microphone",
+      "turnedOff": "Microphone turned off",
+      "turnedOn": "Microphone turned on",
       "label": "Microphone"
     },
     "audiooutput": {

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

@@ -22,6 +22,8 @@
       "permissionsNeeded": "Choisir la webcam - autorisations nécessaires",
       "disable": "Désactiver la webcam",
       "enable": "Activer la webcam",
+      "turnedOff": "Webcam désactivée",
+      "turnedOn": "Webcam activée",
       "label": "Webcam",
       "placeholder": "Activez la webcam pour prévisualiser l'affichage"
     },
@@ -30,6 +32,8 @@
       "permissionsNeeded": "Choisir le micro - autorisations nécessaires",
       "disable": "Désactiver le micro",
       "enable": "Activer le micro",
+      "turnedOff": "Micro désactivé",
+      "turnedOn": "Micro activé",
       "label": "Microphone"
     },
     "audiooutput": {

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

@@ -22,6 +22,8 @@
       "permissionsNeeded": "Selecteer camera - Toestemming vereist",
       "disable": "Camera uitschakelen",
       "enable": "Camera inschakelen",
+      "turnedOff": "Camera uitgeschakeld",
+      "turnedOn": "Camera ingeschakeld",
       "label": "Camera",
       "placeholder": "Schakel de camera in om de preview te zien"
     },
@@ -30,6 +32,8 @@
       "permissionsNeeded": "Selecteer microfoon - Toestemming vereist",
       "disable": "Microfoon dempen",
       "enable": "Microfoon dempen opheffen",
+      "turnedOff": "Microfoon uitgeschakeld",
+      "turnedOn": "Microfoon ingeschakeld",
       "label": "Microfoon"
     },
     "audiooutput": {