♿️(frontend) focus first background effect button on panel open

improves keyboard navigation by placing focus on first actionable element

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to
 
 ## [Unreleased]
 
+
 ### Added
 
 - ✨(summary) add dutch and german languages
@@ -16,6 +17,7 @@ and this project adheres to
 ### Changed
 
 - 📈(frontend) track new recording's modes
+- ♿️(frontend) improve accessibility of the background and effects menu
 - ♿️(frontend) improve SR and focus for transcript and recording #810
 - 💄(frontend) adjust spacing in the recording side panels
 - 🚸(frontend) remove the default comma delimiter in humanized durations

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/SidePanel.tsx

@@ -16,6 +16,7 @@ import { Info } from './Info'
 
 type StyledSidePanelProps = {
   title: string
+  ariaLabel: string
   children: ReactNode
   onClose: () => void
   isClosed: boolean
@@ -26,6 +27,7 @@ type StyledSidePanelProps = {
 
 const StyledSidePanel = ({
   title,
+  ariaLabel,
   children,
   onClose,
   isClosed,
@@ -33,7 +35,7 @@ const StyledSidePanel = ({
   isSubmenu = false,
   onBack,
 }: StyledSidePanelProps) => (
-  <div
+  <aside
     className={css({
       borderWidth: '1px',
       borderStyle: 'solid',
@@ -58,6 +60,8 @@ const StyledSidePanel = ({
     style={{
       transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
     }}
+    aria-hidden={isClosed}
+    aria-label={ariaLabel}
   >
     <Heading
       slot="title"
@@ -74,7 +78,7 @@ const StyledSidePanel = ({
       {isSubmenu && (
         <Button
           variant="secondaryText"
-          size={'sm'}
+          size="sm"
           square
           className={css({ marginRight: '0.5rem' })}
           onPress={onBack}
@@ -104,7 +108,7 @@ const StyledSidePanel = ({
       </Button>
     </Div>
     {children}
-  </div>
+  </aside>
 )
 
 type PanelProps = {
@@ -144,6 +148,7 @@ export const SidePanel = () => {
   return (
     <StyledSidePanel
       title={t(`heading.${activeSubPanelId || activePanelId}`)}
+      ariaLabel={t('ariaLabel')}
       onClose={() => {
         layoutStore.activePanelId = null
         layoutStore.activeSubPanelId = null

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

@@ -9,13 +9,13 @@ import {
 } from '../blur'
 import { css } from '@/styled-system/css'
 import { H, P, Text, ToggleButton } from '@/primitives'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 import { styled } from '@/styled-system/jsx'
 import { BlurOn } from '@/components/icons/BlurOn'
 import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
 import { useTrackToggle } from '@livekit/components-react'
 import { Loader } from '@/primitives/Loader'
 import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
-import { RiProhibited2Line } from '@remixicon/react'
 import { FunnyEffects } from './FunnyEffects'
 import { useHasFunnyEffectsAccess } from '../../hooks/useHasFunnyEffectsAccess'
 
@@ -50,11 +50,17 @@ export const EffectsConfiguration = ({
   layout = 'horizontal',
 }: EffectsConfigurationProps) => {
   const videoRef = useRef<HTMLVideoElement>(null)
+  const blurLightRef = useRef<HTMLButtonElement | null>(null)
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
   const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
   const [processorPending, setProcessorPending] = useState(false)
   const processorPendingReveal = useSyncAfterDelay(processorPending)
   const hasFunnyEffectsAccess = useHasFunnyEffectsAccess()
+  const [blurStatusMessage, setBlurStatusMessage] = useState('')
+  const blurAnnouncementTimeout = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  )
+  const blurAnnouncementId = useRef(0)
 
   useEffect(() => {
     const videoElement = videoRef.current
@@ -69,16 +75,78 @@ export const EffectsConfiguration = ({
     }
   }, [videoTrack, videoTrack?.isMuted])
 
+  useEffect(() => {
+    if (!blurLightRef.current) return
+
+    const rafId = requestAnimationFrame(() => {
+      blurLightRef.current?.focus({ preventScroll: true })
+    })
+
+    return () => {
+      cancelAnimationFrame(rafId)
+    }
+  }, [])
+
+  useEffect(
+    () => () => {
+      if (blurAnnouncementTimeout.current) {
+        clearTimeout(blurAnnouncementTimeout.current)
+      }
+    },
+    []
+  )
+
+  const announceBlurStatusMessage = (message: string) => {
+    blurAnnouncementId.current += 1
+    const currentId = blurAnnouncementId.current
+
+    if (blurAnnouncementTimeout.current) {
+      clearTimeout(blurAnnouncementTimeout.current)
+    }
+
+    // Clear the region first so screen readers drop queued announcements.
+    setBlurStatusMessage('')
+
+    blurAnnouncementTimeout.current = setTimeout(() => {
+      if (currentId !== blurAnnouncementId.current) return
+      setBlurStatusMessage(message)
+    }, 80)
+  }
+
   const clearEffect = async () => {
     await videoTrack.stopProcessor()
     onSubmit?.(undefined)
   }
 
+  const updateBlurStatusMessage = (
+    type: ProcessorType,
+    options: BackgroundOptions,
+    wasSelectedBeforeToggle: boolean
+  ) => {
+    if (type !== ProcessorType.BLUR) return
+
+    let message = ''
+
+    if (wasSelectedBeforeToggle) {
+      message = t('blur.status.none')
+    } else if (options.blurRadius === BlurRadius.LIGHT) {
+      message = t('blur.status.light')
+    } else if (options.blurRadius === BlurRadius.NORMAL) {
+      message = t('blur.status.strong')
+    }
+
+    if (message) {
+      announceBlurStatusMessage(message)
+    }
+  }
+
   const toggleEffect = async (
     type: ProcessorType,
     options: BackgroundOptions
   ) => {
     setProcessorPending(true)
+    const wasSelectedBeforeToggle = isSelected(type, options)
+
     if (!videoTrack) {
       /**
        * Special case: if no video track is available, then we must pass directly the processor into the
@@ -104,7 +172,7 @@ export const EffectsConfiguration = ({
 
     const processor = getProcessor()
     try {
-      if (isSelected(type, options)) {
+      if (wasSelectedBeforeToggle) {
         // Stop processor.
         await clearEffect()
       } else if (
@@ -131,6 +199,8 @@ export const EffectsConfiguration = ({
         // We want to trigger onSubmit when options changes so the parent component is aware of it.
         onSubmit?.(processor)
       }
+
+      updateBlurStatusMessage(type, options, wasSelectedBeforeToggle)
     } catch (error) {
       console.error('Error applying effect:', error)
     } finally {
@@ -153,8 +223,28 @@ export const EffectsConfiguration = ({
     )
   }
 
-  const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
-    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
+  const tooltipBlur = (type: ProcessorType, options: BackgroundOptions) => {
+    const strength =
+      options.blurRadius === BlurRadius.LIGHT ? 'light' : 'normal'
+    const action = isSelected(type, options) ? 'clear' : 'apply'
+
+    return t(`${type}.${strength}.${action}`)
+  }
+
+  const ariaLabelVirtualBackground = (
+    index: number,
+    imagePath: string
+  ): string => {
+    const isSelectedBackground = isSelected(ProcessorType.VIRTUAL, {
+      imagePath,
+    })
+    const prefix = isSelectedBackground ? 'selectedLabel' : 'apply'
+    const backgroundName = t(`virtual.descriptions.${index}`)
+    return `${t(`virtual.${prefix}`)} ${backgroundName}`
+  }
+
+  const tooltipVirtualBackground = (index: number): string => {
+    return t(`virtual.descriptions.${index}`)
   }
 
   return (
@@ -265,65 +355,60 @@ export const EffectsConfiguration = ({
               >
                 {t('blur.title')}
               </H>
-              <div
-                className={css({
-                  display: 'flex',
-                  gap: '1.25rem',
-                })}
-              >
-                <ToggleButton
-                  variant="bigSquare"
-                  aria-label={t('clear')}
-                  onPress={async () => {
-                    await clearEffect()
-                  }}
-                  isSelected={!getProcessor()}
-                  isDisabled={processorPendingReveal || isDisabled}
+              <div>
+                <div
+                  className={css({
+                    display: 'flex',
+                    gap: '1.25rem',
+                  })}
                 >
-                  <RiProhibited2Line />
-                </ToggleButton>
-                <ToggleButton
-                  variant="bigSquare"
-                  aria-label={tooltipLabel(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.LIGHT,
-                  })}
-                  tooltip={tooltipLabel(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.LIGHT,
-                  })}
-                  isDisabled={processorPendingReveal || isDisabled}
-                  onChange={async () =>
-                    await toggleEffect(ProcessorType.BLUR, {
+                  <ToggleButton
+                    ref={blurLightRef}
+                    variant="bigSquare"
+                    aria-label={tooltipBlur(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.LIGHT,
-                    })
-                  }
-                  isSelected={isSelected(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.LIGHT,
-                  })}
-                  data-attr="toggle-blur-light"
-                >
-                  <BlurOn />
-                </ToggleButton>
-                <ToggleButton
-                  variant="bigSquare"
-                  aria-label={tooltipLabel(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.NORMAL,
-                  })}
-                  tooltip={tooltipLabel(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.NORMAL,
-                  })}
-                  isDisabled={processorPendingReveal || isDisabled}
-                  onChange={async () =>
-                    await toggleEffect(ProcessorType.BLUR, {
+                    })}
+                    tooltip={tooltipBlur(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.LIGHT,
+                    })}
+                    isDisabled={processorPendingReveal || isDisabled}
+                    onChange={async () =>
+                      await toggleEffect(ProcessorType.BLUR, {
+                        blurRadius: BlurRadius.LIGHT,
+                      })
+                    }
+                    isSelected={isSelected(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.LIGHT,
+                    })}
+                    data-attr="toggle-blur-light"
+                  >
+                    <BlurOn />
+                  </ToggleButton>
+                  <ToggleButton
+                    variant="bigSquare"
+                    aria-label={tooltipBlur(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.NORMAL,
-                    })
-                  }
-                  isSelected={isSelected(ProcessorType.BLUR, {
-                    blurRadius: BlurRadius.NORMAL,
-                  })}
-                  data-attr="toggle-blur-normal"
-                >
-                  <BlurOnStrong />
-                </ToggleButton>
+                    })}
+                    tooltip={tooltipBlur(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.NORMAL,
+                    })}
+                    isDisabled={processorPendingReveal || isDisabled}
+                    onChange={async () =>
+                      await toggleEffect(ProcessorType.BLUR, {
+                        blurRadius: BlurRadius.NORMAL,
+                      })
+                    }
+                    isSelected={isSelected(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.NORMAL,
+                    })}
+                    data-attr="toggle-blur-normal"
+                  >
+                    <BlurOnStrong />
+                  </ToggleButton>
+                </div>
+                <div aria-live="polite" className="sr-only">
+                  {blurStatusMessage}
+                </div>
               </div>
               <div
                 className={css({
@@ -343,39 +428,37 @@ export const EffectsConfiguration = ({
                   className={css({
                     display: 'flex',
                     gap: '1.25rem',
+                    paddingBottom: '0.5rem',
                     flexWrap: 'wrap',
                   })}
                 >
                   {[...Array(8).keys()].map((i) => {
                     const imagePath = `/assets/backgrounds/${i + 1}.jpg`
                     const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
+                    const tooltipText = tooltipVirtualBackground(i)
                     return (
-                      <ToggleButton
-                        key={i}
-                        variant="bigSquare"
-                        aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        isDisabled={processorPendingReveal || isDisabled}
-                        onChange={async () =>
-                          await toggleEffect(ProcessorType.VIRTUAL, {
+                      <VisualOnlyTooltip key={i} tooltip={tooltipText}>
+                        <ToggleButton
+                          variant="bigSquare"
+                          aria-label={ariaLabelVirtualBackground(i, imagePath)}
+                          isDisabled={processorPendingReveal || isDisabled}
+                          onChange={async () =>
+                            await toggleEffect(ProcessorType.VIRTUAL, {
+                              imagePath,
+                            })
+                          }
+                          isSelected={isSelected(ProcessorType.VIRTUAL, {
                             imagePath,
-                          })
-                        }
-                        isSelected={isSelected(ProcessorType.VIRTUAL, {
-                          imagePath,
-                        })}
-                        className={css({
-                          bgSize: 'cover',
-                        })}
-                        style={{
-                          backgroundImage: `url(${thumbnailPath})`,
-                        }}
-                        data-attr={`toggle-virtual-${i}`}
-                      />
+                          })}
+                          className={css({
+                            bgSize: 'cover',
+                          })}
+                          style={{
+                            backgroundImage: `url(${thumbnailPath})`,
+                          }}
+                          data-attr={`toggle-virtual-${i}`}
+                        />
+                      </VisualOnlyTooltip>
                     )
                   })}
                 </div>

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

@@ -233,15 +233,34 @@
     "clear": "Effekt deaktivieren",
     "blur": {
       "title": "Hintergrundunschärfe",
-      "light": "Leichte Unschärfe",
-      "normal": "Unschärfe",
-      "apply": "Unschärfe aktivieren",
-      "clear": "Unschärfe deaktivieren"
+      "status": {
+        "none": "Hintergrund scharf.",
+        "light": "Hintergrund leicht verschwommen.",
+        "strong": "Hintergrund stark verschwommen."
+      },
+      "light": {
+        "apply": "Hintergrund leicht verwischen",
+        "clear": "Unschärfe deaktivieren"
+      },
+      "normal": {
+        "apply": "Hintergrund verwischen",
+        "clear": "Unschärfe deaktivieren"
+      }
     },
     "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",
@@ -256,6 +275,7 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Seitenleiste",
     "heading": {
       "participants": "Teilnehmer",
       "effects": "Effekte",

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

@@ -15,7 +15,7 @@
       "audio": "Audio settings",
       "video": "Video settings"
     },
-    "effects": "Effects",
+    "effects": "Backgrounds and Effects",
     "videoinput": {
       "choose": "Select camera",
       "permissionsNeeded": "Select camera - permission needed",
@@ -38,7 +38,7 @@
   },
   "join": {
     "effects": {
-      "description": "Apply effects",
+      "description": "Apply backgrounds and effects",
       "title": "Effects",
       "subTitle": "Configure your camera's effects."
     },
@@ -216,7 +216,7 @@
       "screenRecording": "Screen recording",
       "transcript": "Transcription",
       "username": "Update Your Name",
-      "effects": "Apply effects",
+      "effects": "Backgrounds and Effects",
       "switchCamera": "Switch camera",
       "fullscreen": {
         "enter": "Fullscreen",
@@ -233,15 +233,34 @@
     "clear": "Disable effect",
     "blur": {
       "title": "Background blur",
-      "light": "Light blur",
-      "normal": "Blur",
-      "apply": "Enable blur",
-      "clear": "Disable blur"
+      "status": {
+        "none": "Background clear.",
+        "light": "Background slightly blurred.",
+        "strong": "Background strongly blurred."
+      },
+      "light": {
+        "apply": "Slightly blur your background",
+        "clear": "Disable blur"
+      },
+      "normal": {
+        "apply": "Blur your background",
+        "clear": "Disable blur"
+      }
     },
     "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",
@@ -256,9 +275,10 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Sidepanel",
     "heading": {
       "participants": "Participants",
-      "effects": "Effects",
+      "effects": "Backgrounds and Effects",
       "chat": "Messages in the chat",
       "transcript": "Transcribe",
       "screenRecording": "Record",
@@ -268,7 +288,7 @@
     },
     "content": {
       "participants": "participants",
-      "effects": "effects",
+      "effects": "Backgrounds and Effects",
       "chat": "messages",
       "transcript": "transcribe",
       "screenRecording": "record",
@@ -543,7 +563,7 @@
       "enable": "Pin",
       "disable": "Unpin"
     },
-    "effects": "Apply visual effects",
+    "effects": "Apply backgrounds and effects",
     "muteParticipant": "Mute {{name}}",
     "fullScreen": "Full screen"
   },

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

@@ -15,7 +15,7 @@
       "audio": "Paramètres audio",
       "video": "Paramètres video"
     },
-    "effects": "Effets d'arrière-plan",
+    "effects": "Arrière-plans et effets",
     "videoinput": {
       "choose": "Choisir la webcam",
       "permissionsNeeded": "Choisir la webcam - autorisations nécessaires",
@@ -39,8 +39,8 @@
   "join": {
     "heading": "Rejoindre la réunion ?",
     "effects": {
-      "description": "Effets d'arrière-plan",
-      "title": "Effets",
+      "description": "Arrière-plans et effets",
+      "title": "Arrière-plans et effets",
       "subTitle": "Paramétrez les effets de votre caméra."
     },
     "joinLabel": "Rejoindre",
@@ -216,7 +216,7 @@
       "screenRecording": "Enregistrement",
       "transcript": "Transcription",
       "username": "Choisir votre nom",
-      "effects": "Effets d'arrière-plan",
+      "effects": "Arrière-plans et effets",
       "switchCamera": "Changer de caméra",
       "fullscreen": {
         "enter": "Plein écran",
@@ -230,18 +230,37 @@
     "cameraDisabled": "Votre caméra est désactivée.",
     "notAvailable": "Les effets vidéo seront bientôt disponibles sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour de meilleures performances ou Firefox :(",
     "heading": "Flou",
-    "clear": "Désactiver l'effect",
+    "clear": "Désactiver l'effet",
     "blur": {
       "title": "Flou d'arrière-plan",
-      "light": "Flou léger",
-      "normal": "Flou",
-      "apply": "Activer le flou",
-      "clear": "Désactiver le flou"
+      "status": {
+        "none": "Arrière-plan net.",
+        "light": "Arrière-plan légèrement flouté.",
+        "strong": "Arrière-plan fortement flouté."
+      },
+      "light": {
+        "apply": "Flouter l'arrière-plan",
+        "clear": "Désactiver le flou"
+      },
+      "normal": {
+        "apply": "Flouter encore plus l'arrière-plan",
+        "clear": "Désactiver le flou"
+      }
     },
     "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",
@@ -256,9 +275,10 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Panneau latéral",
     "heading": {
       "participants": "Participants",
-      "effects": "Effets",
+      "effects": "Arrière-plans et effets",
       "chat": "Messages dans l'appel",
       "transcript": "Transcrire",
       "screenRecording": "Enregistrer",
@@ -543,7 +563,7 @@
       "enable": "Épingler",
       "disable": "Annuler l'épinglage"
     },
-    "effects": "Effets d'arrière-plan",
+    "effects": "Arrière-plans et effets",
     "muteParticipant": "Couper le micro de {{name}}",
     "fullScreen": "Plein écran"
   },

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

@@ -233,15 +233,34 @@
     "clear": "Effect uitschakelen",
     "blur": {
       "title": "Achtergrondvervaging",
-      "light": "Lichte vervaging",
-      "normal": "Vervaging",
-      "apply": "Vervaging inschakelen",
-      "clear": "Vervaging uitschakelen"
+      "status": {
+        "none": "Achtergrond scherp.",
+        "light": "Achtergrond licht vervaagd.",
+        "strong": "Achtergrond sterk vervaagd."
+      },
+      "light": {
+        "apply": "Vervaag je achtergrond lichtjes",
+        "clear": "Vervaging uitschakelen"
+      },
+      "normal": {
+        "apply": "Vervaag je achtergrond",
+        "clear": "Vervaging uitschakelen"
+      }
     },
     "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",
@@ -256,6 +275,7 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Zijbalk",
     "heading": {
       "participants": "Deelnemers",
       "effects": "Effecten",

src/frontend/src/primitives/ToggleButton.tsx

@@ -1,10 +1,10 @@
+import { forwardRef, ReactNode } from 'react'
 import {
   ToggleButton as RACToggleButton,
   ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { type ButtonRecipeProps, buttonRecipe } from './buttonRecipe'
 import { TooltipWrapper, TooltipWrapperProps } from './TooltipWrapper'
-import { ReactNode } from 'react'
 
 export type ToggleButtonProps = RACToggleButtonProps &
   ButtonRecipeProps &
@@ -16,24 +16,25 @@ export type ToggleButtonProps = RACToggleButtonProps &
 /**
  * React aria ToggleButton with our button styles, that can take a tooltip if needed
  */
-export const ToggleButton = ({
-  tooltip,
-  tooltipType,
-  ...props
-}: ToggleButtonProps) => {
-  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  ({ tooltip, tooltipType, ...props }, ref) => {
+    const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
 
-  return (
-    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <RACToggleButton
-        {...componentProps}
-        className={[buttonRecipe(variantProps), props.className].join(' ')}
-      >
-        <>
-          {componentProps.children as ReactNode}
-          {props.description && <span>{tooltip}</span>}
-        </>
-      </RACToggleButton>
-    </TooltipWrapper>
-  )
-}
+    return (
+      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+        <RACToggleButton
+          ref={ref}
+          {...componentProps}
+          className={[buttonRecipe(variantProps), props.className].join(' ')}
+        >
+          <>
+            {componentProps.children as ReactNode}
+            {props.description && <span>{tooltip}</span>}
+          </>
+        </RACToggleButton>
+      </TooltipWrapper>
+    )
+  }
+)
+
+ToggleButton.displayName = 'ToggleButton'

src/frontend/src/primitives/VisualOnlyTooltip.tsx

@@ -0,0 +1,88 @@
+import { type ReactNode, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { css } from '@/styled-system/css'
+
+export type VisualOnlyTooltipProps = {
+  children: ReactNode
+  tooltip: string
+}
+
+/**
+ * Wrapper component that displays a tooltip visually only (not announced by screen readers).
+ *
+ * This is necessary because TooltipTrigger from react-aria-components automatically adds
+ * aria-describedby on the button, which links the tooltip for accessibility.
+ * Even with aria-hidden="true" on the tooltip, screen readers still announce its content → duplication.
+ * This CSS wrapper avoids TooltipTrigger → no automatic aria-describedby → no duplication.
+ *
+ * Uses a portal to avoid being clipped by parent containers with overflow: hidden.
+ */
+export const VisualOnlyTooltip = ({
+  children,
+  tooltip,
+}: VisualOnlyTooltipProps) => {
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const [isVisible, setIsVisible] = useState(false)
+
+  const getPosition = () => {
+    if (!wrapperRef.current) return null
+    const rect = wrapperRef.current.getBoundingClientRect()
+    return {
+      top: rect.top - 8,
+      left: rect.left + rect.width / 2,
+    }
+  }
+
+  const position = getPosition()
+  const tooltipData = isVisible && position ? { isVisible, position } : null
+
+  return (
+    <>
+      <div
+        ref={wrapperRef}
+        onMouseEnter={() => setIsVisible(true)}
+        onMouseLeave={() => setIsVisible(false)}
+        onFocus={() => setIsVisible(true)}
+        onBlur={() => setIsVisible(false)}
+      >
+        {children}
+      </div>
+      {tooltipData &&
+        createPortal(
+          <div
+            aria-hidden="true"
+            role="presentation"
+            className={css({
+              position: 'fixed',
+              padding: '2px 8px',
+              backgroundColor: 'primaryDark.100',
+              color: 'gray.100',
+              borderRadius: '4px',
+              fontSize: 14,
+              whiteSpace: 'nowrap',
+              pointerEvents: 'none',
+              zIndex: 9999,
+              boxShadow: '0 8px 20px rgba(0 0 0 / 0.1)',
+              '&::after': {
+                content: '""',
+                position: 'absolute',
+                top: '100%',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                border: '4px solid transparent',
+                borderTopColor: 'primaryDark.100',
+              },
+            })}
+            style={{
+              top: `${tooltipData.position.top}px`,
+              left: `${tooltipData.position.left}px`,
+              transform: 'translate(-50%, -100%)',
+            }}
+          >
+            {tooltip}
+          </div>,
+          document.body
+        )}
+    </>
+  )
+}