♿️(frontend) enhance vocalized indication of virtual background

Update the virtual background effects tooltip and ARIA label with more
descriptive and concise wording based on Sophie’s feedback. This helps all
users, especially those using assistive technologies, by improving how
each virtual background is vocalized.

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -157,6 +157,10 @@ export const EffectsConfiguration = ({
     return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
   }
 
+  const tooltipVirtualBackground = (index: number): string => {
+    return t(`virtual.descriptions.${index}`)
+  }
+
   return (
     <div
       className={css(
@@ -354,12 +358,16 @@ export const EffectsConfiguration = ({
                       <ToggleButton
                         key={i}
                         variant="bigSquare"
-                        aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
+                        tooltip={tooltipVirtualBackground(i)}
-                          imagePath,
+                        aria-label={t(
-                        })}
+                          `virtual.${
-                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
+                            isSelected(ProcessorType.VIRTUAL, {
-                          imagePath,
+                              imagePath,
-                        })}
+                            })
+                              ? 'selectedLabel'
+                              : 'apply'
+                          }`
+                        )}
                         isDisabled={processorPendingReveal || isDisabled}
                         onChange={async () =>
                           await toggleEffect(ProcessorType.VIRTUAL, {

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

@@ -240,8 +240,18 @@
     },
     "virtual": {
       "title": "Virtueller Hintergrund",
-      "apply": "Virtuellen Hintergrund aktivieren",
+      "selectedLabel": "Hintergrund angewendet:",
-      "clear": "Virtuellen Hintergrund deaktivieren"
+      "apply": "Ersetze deinen Hintergrund:",
+      "descriptions": {
+        "0": "Gerilltes Holzmöbel",
+        "1": "Besprechungsraum",
+        "2": "Loft mit schwarzer Glaswand",
+        "3": "Esszimmer",
+        "4": "Holzregale",
+        "5": "Holztreppe",
+        "6": "Graue Bibliothek",
+        "7": "Kaffeetheke"
+      }
     },
     "faceLandmarks": {
       "title": "Visuelle Effekte",

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

@@ -240,8 +240,18 @@
     },
     "virtual": {
       "title": "Virtual background",
-      "apply": "Enable virtual background",
+      "selectedLabel": "Background applied:",
-      "clear": "Disable virtual background"
+      "apply": "Replace your background:",
+      "descriptions": {
+        "0": "Fluted wooden furniture",
+        "1": "Meeting room",
+        "2": "Loft with black glass partition",
+        "3": "Dining room",
+        "4": "Wooden shelves",
+        "5": "Wooden staircase",
+        "6": "Gray library",
+        "7": "Coffee counter"
+      }
     },
     "faceLandmarks": {
       "title": "Visual Effects",

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

@@ -240,8 +240,18 @@
     },
     "virtual": {
       "title": "Arrière-plan virtuel",
-      "apply": "Activer l'arrière-plan virtuel",
+      "selectedLabel": "Arrière-plan appliqué :",
-      "clear": "Désactiver l'arrière-plan virtuel"
+      "apply": "Remplacer votre arrière plan :",
+      "descriptions": {
+        "0": "Meuble cannelé en bois",
+        "1": "Salle de réunion",
+        "2": "Loft avec verrière noire",
+        "3": "Salle à manger",
+        "4": "Étagères en bois",
+        "5": "Escalier en bois",
+        "6": "Bibliothèque grise",
+        "7": "Comptoir de café"
+      }
     },
     "faceLandmarks": {
       "title": "Effets visuels",

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

@@ -240,8 +240,18 @@
     },
     "virtual": {
       "title": "Virtuele achtergrond",
-      "apply": "Virtuele achtergrond inschakelen",
+      "selectedLabel": "Achtergrond toegepast:",
-      "clear": "Virtuele achtergrond uitschakelen"
+      "apply": "Vervang je achtergrond:",
+      "descriptions": {
+        "0": "Geprofileerd houten meubel",
+        "1": "Vergaderruimte",
+        "2": "Loft met zwarte glaswand",
+        "3": "Eetkamer",
+        "4": "Houten planken",
+        "5": "Houten trap",
+        "6": "Grijze bibliotheek",
+        "7": "Koffiebar"
+      }
     },
     "faceLandmarks": {
       "title": "Visuele effecten",