From c9de7d049fecdf471d0db032ce92060099fc77ad Mon Sep 17 00:00:00 2001
From: Florent Chehab <flo@nextmile.fr>
Date: Wed, 3 Jun 2026 18:53:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20effect?=
 =?UTF-8?q?s=20accessibility=20structure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Set sub-headings to level 3, to be coherent
* Set role to list & list-item on background items list
---
 .../effects/EffectsConfiguration.tsx          | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

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 bf7d2f91..73752be2 100644
--- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
@@ -667,7 +667,7 @@ export const EffectsConfiguration = ({
                 })}
               >
                 <H
-                  lvl={2}
+                  lvl={3}
                   style={{
                     marginBottom: '0.4rem',
                   }}
@@ -683,6 +683,7 @@ export const EffectsConfiguration = ({
                     paddingBottom: '0.5rem',
                     flexWrap: 'wrap',
                   })}
+                  role="list"
                 >
                   {createFileMutation.isPending &&
                     fileBeingUploadedObjectUrlRef.current && (
@@ -724,6 +725,7 @@ export const EffectsConfiguration = ({
                           className={
                             'hoverGroup ' + css({ position: 'relative' })
                           }
+                          role="listitem"
                         >
                           <VisualOnlyTooltip tooltip={option.tooltip}>
                             <ToggleButton
@@ -860,7 +862,7 @@ export const EffectsConfiguration = ({
                 })}
               >
                 <H
-                  lvl={2}
+                  lvl={3}
                   style={{
                     marginBottom: '0.4rem',
                   }}
@@ -875,24 +877,27 @@ export const EffectsConfiguration = ({
                     paddingBottom: '0.5rem',
                     flexWrap: 'wrap',
                   })}
+                  role="list"
                 >
                   {processorOptions.virtualBackgrounds.map((option) => (
-                    <VisualOnlyTooltip key={option.id} tooltip={option.tooltip}>
-                      <ToggleButton
-                        variant="bigSquare"
-                        aria-label={option.ariaLabel}
-                        isDisabled={processorOptions.isDisabled}
-                        onChange={() => toggleEffect(option.config)}
-                        isSelected={option.isSelected}
-                        className={css({
-                          bgSize: 'cover',
-                        })}
-                        style={{
-                          backgroundImage: `url(${option.thumbnailPath})`,
-                        }}
-                        data-attr={`toggle-virtual-preset-${option.index}`}
-                      />
-                    </VisualOnlyTooltip>
+                    <div role="listitem" key={option.id}>
+                      <VisualOnlyTooltip tooltip={option.tooltip}>
+                        <ToggleButton
+                          variant="bigSquare"
+                          aria-label={option.ariaLabel}
+                          isDisabled={processorOptions.isDisabled}
+                          onChange={() => toggleEffect(option.config)}
+                          isSelected={option.isSelected}
+                          className={css({
+                            bgSize: 'cover',
+                          })}
+                          style={{
+                            backgroundImage: `url(${option.thumbnailPath})`,
+                          }}
+                          data-attr={`toggle-virtual-preset-${option.index}`}
+                        />
+                      </VisualOnlyTooltip>
+                    </div>
                   ))}
                 </div>
               </div>