♿️(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, {
-                          imagePath,
-                        })}
-                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
+                        tooltip={tooltipVirtualBackground(i)}
+                        aria-label={t(
+                          `virtual.${
+                            isSelected(ProcessorType.VIRTUAL, {
+                              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",
-      "clear": "Virtuellen Hintergrund deaktivieren"
+      "selectedLabel": "Hintergrund angewendet:",
+      "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",
-      "clear": "Disable virtual background"
+      "selectedLabel": "Background applied:",
+      "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",
-      "clear": "Désactiver l'arrière-plan virtuel"
+      "selectedLabel": "Arrière-plan appliqué :",
+      "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",
-      "clear": "Virtuele achtergrond uitschakelen"
+      "selectedLabel": "Achtergrond toegepast:",
+      "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",