♿️(frontend) proper aria labels on custom backgrounds

* Set the aria-label to something meaningful,
* Set the delete btn aria label

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
 

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

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": {

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": {

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": {

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": {