From fd1715bacf2ec3208bc6239df53b966220777c6c Mon Sep 17 00:00:00 2001
From: Florent Chehab <flo@nextmile.fr>
Date: Wed, 3 Jun 2026 18:55:09 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20proper=20aria=20?=
 =?UTF-8?q?labels=20on=20custom=20backgrounds?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Set the aria-label to something meaningful,
* Set the delete btn aria label
---
 CHANGELOG.md                                  |   6 +-
 .../effects/EffectsConfiguration.tsx          | 114 +++++++++++-------
 src/frontend/src/locales/de/rooms.json        |   3 +
 src/frontend/src/locales/en/rooms.json        |   3 +
 src/frontend/src/locales/fr/rooms.json        |   3 +
 src/frontend/src/locales/nl/rooms.json        |   3 +
 6 files changed, 85 insertions(+), 47 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a2f555ce..1c65e06a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,10 @@ and this project adheres to
 
 - 🐛(frontend) fix metadata agent collector enabled check
 
+### Fixed
+
+- ♿️(frontend) improve accessibilty of the Effects panel #1401
+
 ## [1.20.0] - 2026-06-12
 
 ### Changed
@@ -52,7 +56,7 @@ and this project adheres to
 
 - 🔇(summary) make ffmpeg quiet #1404
 - 🔒️(backend) prevent accessing files if they are not ready #1395
-- ⬆️(backend) upgrade idna to >=3.15 to address CVE-2026-45409
+- # ⬆️(backend) upgrade idna to >=3.15 to address CVE-2026-45409
 
 ## [1.18.0] - 2026-06-03
 
diff --git a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
index 73752be2..44c761d6 100644
--- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
@@ -400,6 +400,8 @@ export const EffectsConfiguration = ({
       config: ProcessorConfig
       isSelected: boolean
       tooltip: string
+      ariaLabel: string
+      ariaDeleteLabel: string
       file: ApiFileItem
     }[]
   }>(() => {
@@ -445,9 +447,11 @@ export const EffectsConfiguration = ({
         }
         const id = deriveIdFromProcessorConfig(config)
         const isSelected = selectedId === id
-        const prefix = isSelected ? 'selectedLabel' : 'apply'
         const backgroundName = t(`virtual.presets.descriptions.${index}`)
-        const ariaLabel = `${t(`virtual.presets.${prefix}`)} ${backgroundName}`
+        const ariaLabelPrefix = t(
+          isSelected ? `virtual.selectedLabel` : `virtual.apply`
+        )
+        const ariaLabel = `${ariaLabelPrefix} ${backgroundName}`
 
         return {
           tooltip: backgroundName,
@@ -469,13 +473,22 @@ export const EffectsConfiguration = ({
           }
 
           const id = deriveIdFromProcessorConfig(config)
+          const isSelected = selectedId === id
+          const ariaLabel = t(
+            isSelected
+              ? `virtual.personal.selectedLabel`
+              : `virtual.personal.apply`
+          )
+          const ariaDeleteLabel = t('virtual.personal.deleteLabel')
 
           return {
             tooltip: file.title,
             id,
             config,
-            isSelected: selectedId === id,
+            isSelected,
             file,
+            ariaLabel,
+            ariaDeleteLabel,
           }
         }),
     }
@@ -727,47 +740,52 @@ export const EffectsConfiguration = ({
                           }
                           role="listitem"
                         >
-                          <VisualOnlyTooltip tooltip={option.tooltip}>
-                            <ToggleButton
-                              variant="bigSquare"
-                              aria-label={option.tooltip}
-                              isDisabled={processorOptions.isDisabled}
-                              onChange={getHandleSelectChangeFile(option.file)}
-                              isSelected={option.isSelected}
-                              className={css({
-                                bgSize: 'cover',
-                              })}
-                              style={{
-                                backgroundImage: `url(${option.file.url!})`,
-                              }}
-                              data-attr={`toggle-virtual-${option.file.id}`}
-                            />
-                          </VisualOnlyTooltip>
-                          <Button
-                            className={
-                              'hoverGroupChild ' +
-                              css({
-                                position: 'absolute',
-                                top: '-8px',
-                                right: '-8px',
-                                transition: 'opacity 0.2s ease-in-out',
-                              })
-                            }
-                            size={'xs'}
-                            variant={'tertiary'}
-                            onClick={() => {
-                              if (option.isSelected) {
-                                // we remove the current effect
-                                toggleEffect(option.config)
+                          <div role="group" aria-label={option.file.title}>
+                            <VisualOnlyTooltip tooltip={option.tooltip}>
+                              <ToggleButton
+                                variant="bigSquare"
+                                aria-label={option.ariaLabel}
+                                isDisabled={processorOptions.isDisabled}
+                                onChange={getHandleSelectChangeFile(
+                                  option.file
+                                )}
+                                isSelected={option.isSelected}
+                                className={css({
+                                  bgSize: 'cover',
+                                })}
+                                style={{
+                                  backgroundImage: `url(${option.file.url!})`,
+                                }}
+                                data-attr={`toggle-virtual-${option.file.id}`}
+                              />
+                            </VisualOnlyTooltip>
+                            <Button
+                              className={
+                                'hoverGroupChild ' +
+                                css({
+                                  position: 'absolute',
+                                  top: '-8px',
+                                  right: '-8px',
+                                  transition: 'opacity 0.2s ease-in-out',
+                                })
                               }
-                              deleteFileMutation.mutate({
-                                fileId: option.file.id,
-                              })
-                            }}
-                            isDisabled={deleteFileMutation.isPending}
-                          >
-                            <RiDeleteBinLine size={16} />
-                          </Button>
+                              aria-label={option.ariaDeleteLabel}
+                              size={'xs'}
+                              variant={'tertiary'}
+                              onClick={() => {
+                                if (option.isSelected) {
+                                  // we remove the current effect
+                                  toggleEffect(option.config)
+                                }
+                                deleteFileMutation.mutate({
+                                  fileId: option.file.id,
+                                })
+                              }}
+                              isDisabled={deleteFileMutation.isPending}
+                            >
+                              <RiDeleteBinLine size={16} />
+                            </Button>
+                          </div>
                         </div>
                       )
                     )}
@@ -780,9 +798,13 @@ export const EffectsConfiguration = ({
                       >
                         <ToggleButton
                           variant="bigSquare"
-                          aria-label={
-                            uploadNotPossibleSnap.imageBackgroundConfig.label
-                          }
+                          aria-label={`${t(
+                            deriveIdFromProcessorConfig(
+                              uploadNotPossibleSnap.imageBackgroundConfig
+                            ) === selectedId
+                              ? `virtual.selectedLabel`
+                              : `virtual.apply`
+                          )} ${uploadNotPossibleSnap.imageBackgroundConfig.label}`}
                           isDisabled={
                             processorOptions.isDisabled ||
                             createFileMutation.isPending
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index c41d67a8..021ca7d0 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -290,11 +290,14 @@
       "apply": "Ersetze deinen Hintergrund:",
       "personal": {
         "title": "Meine Hintergründe",
+        "selectedLabel": "Hintergrund abwählen (er ist aktuell angewendet).",
+        "apply": "Als Hintergrund verwenden.",
         "selectFileTooltip": "Wähle ein Bild aus, das als persönlicher Hintergrund verwendet werden soll",
         "notLoggedInWarning": "Du bist nicht angemeldet, der persönliche Hintergrund wird nicht von einem Meeting zum anderen gespeichert.",
         "warningUploadDisabled": "Persönliche Hintergründe werden derzeit nicht von einem Meeting zum anderen gespeichert.",
         "uploadLimitReached": "Du kannst keine weiteren persönlichen Hintergründe hinzufügen.",
         "uploadInProgress": "Datei wird hochgeladen…",
+        "deleteLabel": "Benutzerdefinierten Hintergrund löschen.",
         "errors": {
           "close": "Schließen",
           "file_too_large": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index a6bfdb08..33441995 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -290,11 +290,14 @@
       "apply": "Replace your background:",
       "personal": {
         "title": "My backgrounds",
+        "selectedLabel": "Unselect background (it's currently applied).",
+        "apply": "Use as background.",
         "selectFileTooltip": "Select an image file to use as a personal background",
         "notLoggedInWarning": "You are not logged-in, personal backgrounds won't be saved from one meeting to the other.",
         "warningUploadDisabled": "Personal backgrounds are currently not saved from one meeting to the other.",
         "uploadLimitReached": "You cannot upload more personal backgrounds.",
         "uploadInProgress": "Image is being uploaded…",
+        "deleteLabel": "Delete background.",
         "errors": {
           "close": "Close",
           "file_too_large": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 23af150a..87653cf6 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -290,11 +290,14 @@
       "apply": "Remplacer votre arrière plan :",
       "personal": {
         "title": "Mes arrière-plans",
+        "selectedLabel": "Ne plus utiliser comme arrière-plan (actuellement actif).",
+        "apply": "Utiliser comme arrière plan.",
         "selectFileTooltip": "Sélectionnez une image à utiliser comme arrière-plan",
         "notLoggedInWarning": "Vous n'êtes pas connecté, l'arrière-plan personnel ne sera pas sauvegardé d'une réunion à l'autre.",
         "warningUploadDisabled": "Les arrière-plans personnels ne sont actuellement pas sauvegardés d'une réunion à l'autre.",
         "uploadLimitReached": "Vous ne pouvez pas ajouter plus d'arrière-plans personnels.",
         "uploadInProgress": "Image en cours d'envoi…",
+        "deleteLabel": "Supprimer l'arrière-plan.",
         "errors": {
           "close": "Fermer",
           "file_too_large": {
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 5f99e106..853f1864 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -290,11 +290,14 @@
       "apply": "Vervang je achtergrond:",
       "personal": {
         "title": "Mijn achtergronden",
+        "selectedLabel": "Deselecteer de achtergrond (deze is momenteel toegepast).",
+        "apply": "Gebruik als achtergrond.",
         "selectFileTooltip": "Selecteer een afbeeldingsbestand om te gebruiken als persoonlijke achtergrond",
         "notLoggedInWarning": "U bent niet ingelogd, persoonlijke achtergronden worden niet opgeslagen van de ene vergadering naar de andere.",
         "warningUploadDisabled": "Persoonlijke achtergronden worden momenteel niet opgeslagen van de ene vergadering naar de andere.",
         "uploadLimitReached": "U kunt geen persoonlijke achtergronden meer uploaden.",
         "uploadInProgress": "Afbeelding wordt geüpload…",
+        "deleteLabel": "Aangepaste achtergrond verwijderen.",
         "errors": {
           "close": "Sluiten",
           "file_too_large": {