♿️(frontend) enhance vocalization of blur options

Hide non-essential icons and refine the labels to emphasize that one option
applies a stronger blur than the other. This should provide clearer cues for
screen reader users.

src/frontend/src/components/icons/BlurOnStrong.tsx

@@ -6,6 +6,7 @@ export const BlurOnStrong = () => {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
     >
       <path
         fillRule="evenodd"

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

@@ -152,8 +152,10 @@ export const EffectsConfiguration = ({
     )
   }
 
-  const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
+  const tooltipBlur = (type: ProcessorType, options: BackgroundOptions) => {
-    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
+    return t(
+      `${type}.${options.blurRadius == BlurRadius.LIGHT ? 'light' : 'normal'}.${isSelected(type, options) ? 'clear' : 'apply'}`
+    )
   }
 
   const tooltipVirtualBackground = (index: number): string => {
@@ -276,10 +278,7 @@ export const EffectsConfiguration = ({
               >
                 <ToggleButton
                   variant="bigSquare"
-                  aria-label={tooltipLabel(ProcessorType.BLUR, {
+                  tooltip={tooltipBlur(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.LIGHT,
-                  })}
-                  tooltip={tooltipLabel(ProcessorType.BLUR, {
                     blurRadius: BlurRadius.LIGHT,
                   })}
                   isDisabled={processorPendingReveal || isDisabled}
@@ -297,10 +296,7 @@ export const EffectsConfiguration = ({
                 </ToggleButton>
                 <ToggleButton
                   variant="bigSquare"
-                  aria-label={tooltipLabel(ProcessorType.BLUR, {
+                  tooltip={tooltipBlur(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.NORMAL,
-                  })}
-                  tooltip={tooltipLabel(ProcessorType.BLUR, {
                     blurRadius: BlurRadius.NORMAL,
                   })}
                   isDisabled={processorPendingReveal || isDisabled}

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

@@ -233,10 +233,14 @@
     "clear": "Effekt deaktivieren",
     "blur": {
       "title": "Hintergrundunschärfe",
-      "light": "Leichte Unschärfe",
+      "light": {
-      "normal": "Unschärfe",
+        "apply": "Hintergrund leicht verwischen",
-      "apply": "Unschärfe aktivieren",
+        "clear": "Unschärfe deaktivieren"
-      "clear": "Unschärfe deaktivieren"
+      },
+      "normal": {
+        "apply": "Hintergrund verwischen",
+        "clear": "Unschärfe deaktivieren"
+      }
     },
     "virtual": {
       "title": "Virtueller Hintergrund",

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

@@ -233,10 +233,14 @@
     "clear": "Disable effect",
     "blur": {
       "title": "Background blur",
-      "light": "Light blur",
+      "light": {
-      "normal": "Blur",
+        "apply": "Slightly blur your background",
-      "apply": "Enable blur",
+        "clear": "Disable blur"
-      "clear": "Disable blur"
+      },
+      "normal": {
+        "apply": "Blur your background",
+        "clear": "Disable blur"
+      }
     },
     "virtual": {
       "title": "Virtual background",

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

@@ -233,10 +233,14 @@
     "clear": "Désactiver l'effect",
     "blur": {
       "title": "Flou d'arrière-plan",
-      "light": "Flou léger",
+      "light": {
-      "normal": "Flou",
+        "apply": "Flouter légèrement votre arrière-plan",
-      "apply": "Activer le flou",
+        "clear": "Désactiver le flou"
-      "clear": "Désactiver le flou"
+      },
+      "normal": {
+        "apply": "Flouter votre arrière-plan",
+        "clear": "Désactiver le flou"
+      }
     },
     "virtual": {
       "title": "Arrière-plan virtuel",

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

@@ -233,10 +233,14 @@
     "clear": "Effect uitschakelen",
     "blur": {
       "title": "Achtergrondvervaging",
-      "light": "Lichte vervaging",
+      "light": {
-      "normal": "Vervaging",
+        "apply": "Vervaag je achtergrond lichtjes",
-      "apply": "Vervaging inschakelen",
+        "clear": "Vervaging uitschakelen"
-      "clear": "Vervaging uitschakelen"
+      },
+      "normal": {
+        "apply": "Vervaag je achtergrond",
+        "clear": "Vervaging uitschakelen"
+      }
     },
     "virtual": {
       "title": "Virtuele achtergrond",