wip poc

Document focus management pattern entry

.gitignore

@@ -77,6 +77,9 @@ db.sqlite3
 *.iml
 .devcontainer
 
+# Personal rules/config files
+rules.md
+
 # Egress output
 docker/livekit/out
 

CHANGELOG.md

@@ -7,19 +7,43 @@ and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed
+
+- ♿(frontend) improve menu focus management #869
+- ♿️(frontend) add accessible back button in side panel #881
+- ♿️(frontend) improve participants toggle a11y label #880
+- ♿️(frontend) make carousel image decorative #871
+- ♿️(frontend) reactions are now vocalized and configurable #849
+- ♿️(frontend) improve background effect announcements #879
+
+### Fixed
+
+- 🔒(backend) prevent automatic upgrade setuptools
+- ♿(frontend) improve contrast for selected options #863
+- ♿️(frontend) announce copy state in invite dialog #877
+- 📝(frontend) align close dialog label in rooms locale #878
+- 🩹(backend) use case-insensitive email matching in the external api #887
+
+## [1.3.0] - 2026-01-13
 
 ### Added
 
 - ✨(summary) add dutch and german languages
+- 🔧(agents) make Silero VAD optional
+- 🚸(frontend) explain to a user they were ejected
 
 ### 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
 
 ### Fixed
 
 - 🐛(frontend) remove unexpected F2 tooltip when clicking video screen
+- 🩹(frontend) icon font loading to avoid text/icon flickering
 
 ## [1.2.0] - 2026-01-05
 

Dockerfile

@@ -4,7 +4,7 @@
 FROM python:3.13.5-alpine3.21 AS base
 
 # Upgrade pip to its latest release to speed up dependencies installation
-RUN python -m pip install --upgrade pip setuptools
+RUN python -m pip install --upgrade pip
 
 # Upgrade system packages to install security updates
 RUN apk update && \

docs/installation/compose.md

@@ -1,6 +1,6 @@
 # Installation with docker compose
 
-We provide a sample configuration for running Meet using Docker Compose. Please note that this configuration is experimental, and the official way to deploy Meet in production is to use [k8s](../installation/k8s.md)
+We provide a sample configuration for running Meet using Docker Compose. Please note that this configuration is experimental, and the official way to deploy Meet in production is to use [k8s](../installation/kubernetes.md).
 
 ## Requirements
 

src/agents/multi-user-transcriber.py

@@ -31,6 +31,7 @@ logger = logging.getLogger("transcriber")
 
 TRANSCRIBER_AGENT_NAME = os.getenv("TRANSCRIBER_AGENT_NAME", "multi-user-transcriber")
 STT_PROVIDER = os.getenv("STT_PROVIDER", "deepgram")
+ENABLE_SILERO_VAD = os.getenv("ENABLE_SILERO_VAD", "true").lower() == "true"
 
 
 def create_stt_provider():
@@ -122,9 +123,8 @@ class MultiUserTranscriber:
         if participant.identity in self._sessions:
             return self._sessions[participant.identity]
 
-        session = AgentSession(
-            vad=self.ctx.proc.userdata["vad"],
-        )
+        vad = self.ctx.proc.userdata.get("vad", None)
+        session = AgentSession(vad=vad)
         room_io = RoomIO(
             agent_session=session,
             room=self.ctx.room,
@@ -193,7 +193,8 @@ async def handle_transcriber_job_request(job_req: JobRequest) -> None:
 
 def prewarm(proc: JobProcess):
     """Preload voice activity detection model."""
-    proc.userdata["vad"] = silero.VAD.load()
+    if ENABLE_SILERO_VAD:
+        proc.userdata["vad"] = silero.VAD.load()
 
 
 if __name__ == "__main__":

src/agents/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "agents"
-version = "1.2.0"
+version = "1.3.0"
 requires-python = ">=3.12"
 dependencies = [
     "livekit-agents==1.3.10",

src/backend/core/external_api/viewsets.py

@@ -5,7 +5,7 @@ from logging import getLogger
 
 from django.conf import settings
 from django.contrib.auth.hashers import check_password
-from django.core.exceptions import ValidationError
+from django.core.exceptions import SuspiciousOperation, ValidationError
 from django.core.validators import validate_email
 
 import jwt
@@ -93,7 +93,7 @@ class ApplicationViewSet(viewsets.GenericViewSet):
             )
 
         try:
-            user = models.User.objects.get(email=email)
+            user = models.User.objects.get(email__iexact=email)
         except models.User.DoesNotExist as e:
             if (
                 settings.APPLICATION_ALLOW_USER_CREATION
@@ -123,6 +123,10 @@ class ApplicationViewSet(viewsets.GenericViewSet):
                 )
             else:
                 raise drf_exceptions.NotFound("User not found.") from e
+        except models.User.MultipleObjectsReturned as e:
+            raise SuspiciousOperation(
+                "Multiple user accounts share a common email."
+            ) from e
 
         now = datetime.now(timezone.utc)
         scope = " ".join(application.scopes or [])

src/backend/core/tests/test_external_api_token.py

@@ -22,7 +22,7 @@ pytestmark = pytest.mark.django_db
 def test_api_applications_generate_token_success(settings):
     """Valid credentials should return a JWT token."""
     settings.APPLICATION_JWT_SECRET_KEY = "devKey"
-    user = UserFactory(email="user@example.com")
+    UserFactory(email="User.Family@example.com")
     application = ApplicationFactory(
         active=True,
         scopes=[ApplicationScope.ROOMS_LIST, ApplicationScope.ROOMS_CREATE],
@@ -40,7 +40,7 @@ def test_api_applications_generate_token_success(settings):
             "client_id": application.client_id,
             "client_secret": plain_secret,
             "grant_type": "client_credentials",
-            "scope": user.email,
+            "scope": "user.family@example.com",
         },
         format="json",
     )

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "1.2.0"
+version = "1.3.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",

src/frontend/README.md

@@ -28,3 +28,37 @@ export default {
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+## Side Panel Focus Pattern
+
+We use a consistent focus management pattern for side panels:
+
+- **Open**: focus the first actionable element inside the panel.
+- **Close**: restore focus to the button that opened the panel.
+
+Implementation summary:
+
+1. A provider stores a `panelRef` and a registry of trigger refs (`setTrigger/getTrigger`).
+2. Each trigger button registers itself with `setTrigger("key", el)`.
+3. Panel content uses `useRestoreFocus` with:
+   - `resolveTrigger` → returns `getTrigger("key")`.
+   - `onOpened` → finds the first actionable element inside `panelRef`.
+
+Example:
+
+```tsx
+// Trigger button
+;<ToggleButton ref={(el) => setTrigger('tools', el)} />
+
+// Panel content
+useRestoreFocus(isOpen, {
+  resolveTrigger: (activeEl) => getTrigger('tools') ?? activeEl,
+  onOpened: () => {
+    const first = panelRef.current?.querySelector(
+      '[data-attr="tools-list"] button'
+    )
+    // Leading semicolon avoids ASI issues when a line starts with '('
+    ;(first as HTMLElement | null)?.focus({ preventScroll: true })
+  },
+})
+```

src/frontend/index.html

@@ -6,6 +6,22 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
+    <!-- Font URLs are resolved and replaced by Vite during the build process. Font loading failures will not break the application. -->
+    <link
+      rel="preload"
+      as="font"
+      crossorigin="anonymous"
+      href="/node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-latin-400-normal.woff2"
+      type="font/woff2"
+    />
+    <!-- Font URLs are resolved and replaced by Vite during the build process. Font loading failures will not break the application. -->
+    <link
+      rel="preload"
+      as="font"
+      crossorigin="anonymous"
+      href="/node_modules/@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-wght-normal.woff2"
+      type="font/woff2"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%VITE_APP_TITLE%</title>
   </head>

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.2.0",
+      "version": "1.3.0",
       "dependencies": {
         "@fontsource-variable/material-symbols-outlined": "5.2.30",
         "@fontsource/material-icons-outlined": "5.2.6",

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",

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/home/components/IntroSlider.tsx

@@ -192,7 +192,7 @@ export const IntroSlider = () => {
         <SlideContainer>
           {SLIDES.map((slide, index) => (
             <Slide visible={index == slideIndex} key={index}>
-              <Image src={slide.src} alt={t(`${slide.key}.imgAlt`)} />
+              <Image src={slide.src} alt="" role="presentation" />
               <TextAnimation visible={index == slideIndex}>
                 <Heading>{t(`${slide.key}.title`)}</Heading>
                 <Body>{t(`${slide.key}.body`)}</Body>

src/frontend/src/features/recording/components/ControlsButton.tsx

@@ -1,7 +1,7 @@
-import { css, cx } from '@/styled-system/css'
+import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Spinner } from '@/primitives/Spinner'
-import { Button, Text } from '@/primitives'
+import { Button, Icon, Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { RecordingStatuses } from '../hooks/useRecordingStatuses'
 import { ReactNode, useEffect, useRef, useState } from 'react'
@@ -141,31 +141,23 @@ export const ControlsButton = ({
           })}
           onPress={() => openSidePanel()}
         >
-          <span
-            className={cx(
-              'material-icons',
-              css({
-                color: 'primary.500',
-                marginRight: '1rem',
-              })
-            )}
-          >
-            info
-          </span>
+          <Icon
+            className={css({
+              color: 'primary.500',
+              marginRight: '1rem',
+            })}
+            name="info"
+          />
           <Text variant={'smNote'}>
             {parseLineBreaks(t('button.anotherModeStarted'))}
           </Text>
-          <span
-            className={cx(
-              'material-icons',
-              css({
-                color: 'primary.500',
-                marginLeft: 'auto',
-              })
-            )}
-          >
-            chevron_right
-          </span>
+          <Icon
+            className={css({
+              color: 'primary.500',
+              marginLeft: 'auto',
+            })}
+            name="chevron_right"
+          />
         </RACButton>
       )}
       <Button

src/frontend/src/features/recording/components/LoginPrompt.tsx

@@ -1,4 +1,4 @@
-import { H, Text } from '@/primitives'
+import { H, Text, Icon } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { LoginButton } from '@/components/LoginButton'
 import { HStack } from '@/styled-system/jsx'
@@ -24,9 +24,7 @@ export const LoginPrompt = ({ heading, body }: LoginPromptProps) => {
       })}
     >
       <HStack justify="start" alignItems="center" marginBottom="0.5rem">
-        <span className="material-symbols" aria-hidden={true}>
-          login
-        </span>
+        <Icon type="symbols" name="login" />
         <H lvl={3} margin={false} padding={false}>
           {heading}
         </H>

src/frontend/src/features/recording/components/RecordingStatusIcon.tsx

@@ -1,4 +1,5 @@
 import { Spinner } from '@/primitives/Spinner'
+import { Icon } from '@/primitives'
 
 interface RecordingStatusIconProps {
   isStarted: boolean
@@ -14,8 +15,8 @@ export const RecordingStatusIcon = ({
   }
 
   if (isTranscriptActive) {
-    return <span className="material-symbols">speech_to_text</span>
+    return <Icon type="symbols" name="speech_to_text" />
   }
 
-  return <span className="material-symbols">screen_record</span>
+  return <Icon type="symbols" name="screen_record" />
 }

src/frontend/src/features/recording/components/RequestRecording.tsx

@@ -1,4 +1,4 @@
-import { Button, H, Text } from '@/primitives'
+import { Button, Icon, H, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
@@ -59,7 +59,7 @@ export const RequestRecording = ({
       })}
     >
       <HStack justify="start" alignItems="center" marginBottom="0.5rem">
-        <span className="material-symbols">person_raised_hand</span>
+        <Icon type="symbols" name="person_raised_hand" />
         <H lvl={3} margin={false} padding={false}>
           {heading}
         </H>

src/frontend/src/features/recording/components/RowWrapper.tsx

@@ -1,5 +1,6 @@
 import { css } from '@/styled-system/css'
 import { ReactNode } from 'react'
+import { Icon } from '@/primitives'
 
 type RowPosition = 'first' | 'middle' | 'last' | 'single'
 
@@ -45,7 +46,7 @@ export const RowWrapper = ({
         })}
       >
         {/*  fixme - doesn't handle properly material-symbols  */}
-        <span className="material-icons">{iconName}</span>
+        <Icon name={iconName} />
       </div>
       <div
         className={css({

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -145,7 +145,7 @@ export const ScreenRecordingSidePanel = () => {
           },
         })}
       />
-      <VStack gap={0} marginBottom={30}>
+      <VStack gap={0} marginBottom={15}>
         <H lvl={1} margin={'sm'} fullWidth>
           {t('heading')}
         </H>
@@ -162,7 +162,7 @@ export const ScreenRecordingSidePanel = () => {
           )}
         </Text>
       </VStack>
-      <VStack gap={0} marginBottom={40}>
+      <VStack gap={0} marginBottom={25}>
         <RowWrapper iconName="cloud_download" position="first">
           <Text variant="sm">{t('details.destination')}</Text>
         </RowWrapper>

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -181,7 +181,7 @@ export const TranscriptSidePanel = () => {
           },
         })}
       />
-      <VStack gap={0} marginBottom={30}>
+      <VStack gap={0} marginBottom={15}>
         <H lvl={1} margin={'sm'}>
           {t('heading')}
         </H>
@@ -198,7 +198,7 @@ export const TranscriptSidePanel = () => {
           )}
         </Text>
       </VStack>
-      <VStack gap={0} marginBottom={40}>
+      <VStack gap={0} marginBottom={25}>
         <RowWrapper iconName="article" position="first">
           <Text variant="sm">
             {data?.transcription_destination ? (

src/frontend/src/features/recording/hooks/useHumanizeRecordingMaxDuration.ts

@@ -11,6 +11,7 @@ export const useHumanizeRecordingMaxDuration = () => {
 
     return humanizeDuration(data?.recording?.max_duration, {
       language: i18n.language,
+      delimiter: ' ',
     })
   }, [data])
 }

src/frontend/src/features/rooms/components/Conference.tsx

@@ -25,12 +25,12 @@ import { VideoConference } from '../livekit/prefabs/VideoConference'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
-import { navigateTo } from '@/navigation/navigateTo'
 import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
 import { usePostHog } from 'posthog-js/react'
 import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
+import { navigateTo } from '@/navigation/navigateTo'
 
 export const Conference = ({
   roomId,
@@ -228,10 +228,20 @@ export const Conference = ({
             posthog.captureException(e)
           }}
           onDisconnected={(e) => {
-            if (e == DisconnectReason.CLIENT_INITIATED) {
-              navigateTo('feedback', { duplicateIdentity: false })
-            } else if (e == DisconnectReason.DUPLICATE_IDENTITY) {
-              navigateTo('feedback', { duplicateIdentity: true })
+            switch (e) {
+              case DisconnectReason.CLIENT_INITIATED:
+                navigateTo('feedback')
+                return
+              case DisconnectReason.DUPLICATE_IDENTITY:
+              case DisconnectReason.PARTICIPANT_REMOVED:
+                navigateTo(
+                  'feedback',
+                  {},
+                  {
+                    state: { reason: e },
+                  }
+                )
+                return
             }
           }}
           onMediaDeviceFailure={(e, kind) => {

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -112,8 +112,8 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                     square
                     size={'sm'}
                     onPress={copyRoomUrlToClipboard}
-                    aria-label={t('copyUrl')}
-                    tooltip={t('copyUrl')}
+                    aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                    tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
                   >
                     {isRoomUrlCopied ? (
                       <RiCheckLine aria-hidden="true" />
@@ -138,11 +138,12 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                   {formatPinCode(roomData?.pin_code)}
                 </Text>
               </div>
+
               <Button
                 variant={isCopied ? 'success' : 'secondaryText'}
                 size="sm"
                 fullWidth
-                aria-label={t('copy')}
+                aria-label={isCopied ? t('copied') : t('copy')}
                 style={{
                   justifyContent: 'start',
                 }}
@@ -173,7 +174,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
             <Button
               variant={isCopied ? 'success' : 'tertiary'}
               fullWidth
-              aria-label={t('copy')}
+              aria-label={isCopied ? t('copied') : t('copy')}
               onPress={copyRoomToClipboard}
               data-attr="share-dialog-copy"
             >

src/frontend/src/features/rooms/livekit/components/Admin.tsx

@@ -10,9 +10,16 @@ import { keys } from '@/api/queryKeys'
 import { useQuery } from '@tanstack/react-query'
 import { useParams } from 'wouter'
 import { usePublishSourcesManager } from '@/features/rooms/livekit/hooks/usePublishSourcesManager'
+import { useSidePanel } from '../hooks/useSidePanel'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
+import { useSidePanelRef } from '../hooks/useSidePanelRef'
+import { useSidePanelTriggers } from '../hooks/useSidePanelTriggers'
 
 export const Admin = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'admin' })
+  const { isAdminOpen } = useSidePanel()
+  const panelRef = useSidePanelRef()
+  const { getTrigger } = useSidePanelTriggers()
 
   const { roomId } = useParams()
 
@@ -38,6 +45,29 @@ export const Admin = () => {
     isScreenShareEnabled,
   } = usePublishSourcesManager()
 
+  // Restore focus to the element that opened the Admin panel
+  useRestoreFocus(isAdminOpen, {
+    resolveTrigger: (activeEl) => {
+      return getTrigger('admin') ?? activeEl
+    },
+    // Focus the first focusable element when the panel opens (first Field switch)
+    onOpened: () => {
+      requestAnimationFrame(() => {
+        const panel = panelRef.current
+        if (panel) {
+          // Find the first switch in the moderation section
+          const firstSwitch =
+            panel.querySelector<HTMLElement>('[role="switch"]')
+          if (firstSwitch) {
+            firstSwitch.focus({ preventScroll: true })
+          }
+        }
+      })
+    },
+    restoreFocusRaf: true,
+    preventScroll: true,
+  })
+
   return (
     <Div
       display="flex"

src/frontend/src/features/rooms/livekit/components/AdminToggle.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { ToggleButton } from '@/primitives'
 import { RiAdminLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
@@ -5,6 +6,7 @@ import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 import { useIsAdminOrOwner } from '../hooks/useIsAdminOrOwner'
 import { useSidePanel } from '../hooks/useSidePanel'
+import { useSidePanelTriggers } from '../hooks/useSidePanelTriggers'
 
 export const AdminToggle = ({
   variant = 'primaryTextDark',
@@ -14,10 +16,17 @@ export const AdminToggle = ({
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.admin' })
 
   const { isAdminOpen, toggleAdmin } = useSidePanel()
+  const { setTrigger } = useSidePanelTriggers()
   const tooltipLabel = isAdminOpen ? 'open' : 'closed'
+  const setAdminTriggerRef = useCallback(
+    (el: HTMLElement | null) => {
+      setTrigger('admin', el)
+    },
+    [setTrigger]
+  )
 
   const hasAdminAccess = useIsAdminOrOwner()
-  if (!hasAdminAccess) return
+  if (!hasAdminAccess) return null
 
   return (
     <div
@@ -32,6 +41,7 @@ export const AdminToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isAdminOpen}
+        ref={setAdminTriggerRef}
         onPress={(e) => {
           toggleAdmin()
           onPress?.(e)

src/frontend/src/features/rooms/livekit/components/Info.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
@@ -10,8 +10,23 @@ import { formatPinCode } from '../../utils/telephony'
 import { useTelephony } from '../hooks/useTelephony'
 import { useCopyRoomToClipboard } from '../hooks/useCopyRoomToClipboard'
 
+const useFocusOnOpen = ({ ref, key }) => {
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const panel = ref.current
+      if (panel) {
+        const firstButton = panel.querySelector<HTMLElement>(key)
+        if (firstButton) {
+          firstButton.focus({ preventScroll: true })
+        }
+      }
+    })
+  }, [])
+}
+
 export const Info = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'info' })
+  const panelRef = useRef()
 
   const data = useRoomData()
   const roomUrl = getRouteUrl('room', data?.slug)
@@ -24,6 +39,8 @@ export const Info = () => {
 
   const { isCopied, copyRoomToClipboard } = useCopyRoomToClipboard(data)
 
+  useFocusOnOpen({ ref: panelRef, key: '[data-attr="copy-info-sidepanel"]' })
+
   return (
     <Div
       display="flex"
@@ -32,6 +49,7 @@ export const Info = () => {
       flexGrow={1}
       flexDirection="column"
       alignItems="start"
+      ref={panelRef}
     >
       <VStack alignItems="start">
         <Text
@@ -71,7 +89,7 @@ export const Info = () => {
           variant={isCopied ? 'success' : 'tertiaryText'}
           aria-label={t('roomInformation.button.ariaLabel')}
           onPress={copyRoomToClipboard}
-          data-attr="copy-info-sidepannel"
+          data-attr="copy-info-sidepanel"
           style={{
             marginLeft: '-8px',
           }}

src/frontend/src/features/rooms/livekit/components/ReactionPortal.tsx

@@ -5,6 +5,9 @@ import { css } from '@/styled-system/css'
 import { Participant } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
+import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
+import { accessibilityStore } from '@/stores/accessibility'
+import { useSnapshot } from 'valtio'
 
 export const ANIMATION_DURATION = 3000
 export const ANIMATION_DISTANCE = 300
@@ -140,11 +143,53 @@ export function ReactionPortal({
   )
 }
 
-export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) =>
-  reactions.map((instance) => (
-    <ReactionPortal
-      key={instance.id}
-      emoji={instance.emoji}
-      participant={instance.participant}
-    />
-  ))
+export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
+  const { announceReactions } = useSnapshot(accessibilityStore)
+  const [announcement, setAnnouncement] = useState<string | null>(null)
+  const [lastAnnouncedId, setLastAnnouncedId] = useState<number | null>(null)
+
+  const latestReaction =
+    reactions.length > 0 ? reactions[reactions.length - 1] : undefined
+
+  useEffect(() => {
+    if (!announceReactions) {
+      setAnnouncement(null)
+      return
+    }
+    if (!latestReaction) return
+    const isNewReaction = latestReaction.id !== lastAnnouncedId
+    if (!isNewReaction) return
+
+    const emojiLabel = getEmojiLabel(latestReaction.emoji, t)
+    const participantName = latestReaction.participant?.isLocal
+      ? t('you')
+      : latestReaction.participant?.name?.trim() ||
+        t('someone', { defaultValue: 'Someone' })
+    setAnnouncement(t('announce', { name: participantName, emoji: emojiLabel }))
+    setLastAnnouncedId(latestReaction.id)
+
+    const timer = setTimeout(() => setAnnouncement(null), 1200)
+    return () => clearTimeout(timer)
+  }, [latestReaction, lastAnnouncedId, announceReactions, t])
+
+  return (
+    <>
+      {reactions.map((instance) => (
+        <ReactionPortal
+          key={instance.id}
+          emoji={instance.emoji}
+          participant={instance.participant}
+        />
+      ))}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {announcement ?? ''}
+      </div>
+    </>
+  )
+}

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -13,27 +13,37 @@ import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
 import { Tools } from './Tools'
 import { Info } from './Info'
+import { useSidePanelRef } from '../hooks/useSidePanelRef'
+import { useEscapeKey } from '@/hooks/useEscapeKey'
+import { HStack } from '@/styled-system/jsx'
 
 type StyledSidePanelProps = {
   title: string
+  ariaLabel: string
   children: ReactNode
   onClose: () => void
   isClosed: boolean
   closeButtonTooltip: string
   isSubmenu: boolean
   onBack: () => void
+  panelRef: React.RefObject<HTMLElement>
+  backButtonLabel: string
 }
 
 const StyledSidePanel = ({
   title,
+  ariaLabel,
   children,
   onClose,
   isClosed,
   closeButtonTooltip,
   isSubmenu = false,
   onBack,
+  panelRef,
+  backButtonLabel,
 }: StyledSidePanelProps) => (
-  <div
+  <aside
+    ref={panelRef}
     className={css({
       borderWidth: '1px',
       borderStyle: 'solid',
@@ -58,32 +68,37 @@ const StyledSidePanel = ({
     style={{
       transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
     }}
+    aria-hidden={isClosed}
+    aria-label={ariaLabel}
   >
-    <Heading
-      slot="title"
-      level={1}
-      className={text({ variant: 'h2' })}
-      style={{
-        paddingLeft: '1.5rem',
-        paddingTop: '1rem',
-        display: isClosed ? 'none' : 'flex',
-        justifyContent: 'start',
-        alignItems: 'center',
-      }}
-    >
+    <HStack alignItems="center">
       {isSubmenu && (
         <Button
           variant="secondaryText"
-          size={'sm'}
+          size="sm"
           square
-          className={css({ marginRight: '0.5rem' })}
+          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
+          aria-label={backButtonLabel}
           onPress={onBack}
         >
-          <RiArrowLeftLine size={20} />
+          <RiArrowLeftLine size={20} aria-hidden="true" />
         </Button>
       )}
-      {title}
-    </Heading>
+      <Heading
+        slot="title"
+        level={1}
+        className={text({ variant: 'h2' })}
+        style={{
+          paddingLeft: isSubmenu ? 0 : '1.5rem',
+          paddingTop: '1rem',
+          display: isClosed ? 'none' : 'flex',
+          justifyContent: 'start',
+          alignItems: 'center',
+        }}
+      >
+        {title}
+      </Heading>
+    </HStack>
     <Div
       position="absolute"
       top="5"
@@ -104,7 +119,7 @@ const StyledSidePanel = ({
       </Button>
     </Div>
     {children}
-  </div>
+  </aside>
 )
 
 type PanelProps = {
@@ -125,8 +140,7 @@ const Panel = ({ isOpen, keepAlive = false, children }: PanelProps) => (
     {keepAlive || isOpen ? children : null}
   </div>
 )
-
-export const SidePanel = () => {
+const SidePanelContent = () => {
   const {
     activePanelId,
     isParticipantsOpen,
@@ -140,10 +154,28 @@ export const SidePanel = () => {
     activeSubPanelId,
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
+  const panelRef = useSidePanelRef()
+
+  useEscapeKey(
+    () => {
+      // Close subpanel + panel together for a consistent Escape behavior
+      if (isSubPanelOpen) {
+        layoutStore.activeSubPanelId = null
+        layoutStore.activePanelId = null
+        return
+      }
+      layoutStore.activePanelId = null
+    },
+    {
+      isActive: isSidePanelOpen,
+      capture: true,
+    }
+  )
 
   return (
     <StyledSidePanel
       title={t(`heading.${activeSubPanelId || activePanelId}`)}
+      ariaLabel={t('ariaLabel')}
       onClose={() => {
         layoutStore.activePanelId = null
         layoutStore.activeSubPanelId = null
@@ -153,12 +185,16 @@ export const SidePanel = () => {
       })}
       isClosed={!isSidePanelOpen}
       isSubmenu={isSubPanelOpen}
+      backButtonLabel={t('backToTools')}
       onBack={() => (layoutStore.activeSubPanelId = null)}
+      panelRef={panelRef}
     >
-      <Panel isOpen={isParticipantsOpen}>
+      {/* keepAlive preserves focus restoration + state (e.g. scroll/input) across panels;
+          revisit if memory becomes a concern */}
+      <Panel isOpen={isParticipantsOpen} keepAlive={true}>
         <ParticipantsList />
       </Panel>
-      <Panel isOpen={isEffectsOpen}>
+      <Panel isOpen={isEffectsOpen} keepAlive={true}>
         <Effects />
       </Panel>
       <Panel isOpen={isChatOpen} keepAlive={true}>
@@ -167,7 +203,7 @@ export const SidePanel = () => {
       <Panel isOpen={isToolsOpen} keepAlive={true}>
         <Tools />
       </Panel>
-      <Panel isOpen={isAdminOpen}>
+      <Panel isOpen={isAdminOpen} keepAlive={true}>
         <Admin />
       </Panel>
       <Panel isOpen={isInfoOpen}>
@@ -176,3 +212,7 @@ export const SidePanel = () => {
     </StyledSidePanel>
   )
 }
+
+export const SidePanel = () => {
+  return <SidePanelContent />
+}

src/frontend/src/features/rooms/livekit/components/Tools.tsx

@@ -1,10 +1,12 @@
-import { A, Div, Text } from '@/primitives'
+import { A, Div, Icon, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { ReactNode } from 'react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
 import { useRestoreFocus } from '@/hooks/useRestoreFocus'
+import { useSidePanelRef } from '../hooks/useSidePanelRef'
+import { useSidePanelTriggers } from '../hooks/useSidePanelTriggers'
 import {
   useIsRecordingModeEnabled,
   RecordingMode,
@@ -87,7 +89,7 @@ const ToolButton = ({
           alignItems: 'center',
         })}
       >
-        <span className="material-symbols">chevron_forward</span>
+        <Icon type="symbols" name="chevron_forward" />
       </div>
     </RACButton>
   )
@@ -98,6 +100,8 @@ export const Tools = () => {
   const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
     useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
+  const panelRef = useSidePanelRef()
+  const { getTrigger } = useSidePanelTriggers()
 
   // Restore focus to the element that opened the Tools panel
   // following the same pattern as Chat.
@@ -106,10 +110,30 @@ export const Tools = () => {
     // find the "more options" button ("Plus d'options") that opened the menu
     resolveTrigger: (activeEl) => {
       if (activeEl?.tagName === 'DIV') {
-        return document.querySelector<HTMLElement>('#room-options-trigger')
+        return getTrigger('options') ?? activeEl
       }
       // For direct button clicks (e.g. "Plus d'outils"), use the active element as is
-      return activeEl
+      return getTrigger('tools') ?? activeEl
+    },
+    // Focus the first focusable element when the panel opens
+    onOpened: () => {
+      requestAnimationFrame(() => {
+        const panel = panelRef.current
+        if (panel) {
+          // Find the first ToolButton in the tools list (transcript or screen recording button)
+          const toolsList = panel.querySelector<HTMLElement>(
+            '[data-attr="tools-list"]'
+          )
+          if (toolsList) {
+            const firstToolButton = toolsList.querySelector<HTMLElement>(
+              'button:first-of-type'
+            )
+            if (firstToolButton) {
+              firstToolButton.focus({ preventScroll: true })
+            }
+          }
+        }
+      })
     },
     restoreFocusRaf: true,
     preventScroll: true,
@@ -141,6 +165,7 @@ export const Tools = () => {
       flexDirection="column"
       alignItems="start"
       gap={0.5}
+      data-attr="tools-list"
     >
       <Text
         variant="note"
@@ -163,7 +188,7 @@ export const Tools = () => {
       </Text>
       {isTranscriptEnabled && (
         <ToolButton
-          icon={<span className="material-symbols">speech_to_text</span>}
+          icon={<Icon type="symbols" name="speech_to_text" />}
           title={t('tools.transcript.title')}
           description={t('tools.transcript.body')}
           onPress={() => openTranscript()}
@@ -171,7 +196,7 @@ export const Tools = () => {
       )}
       {isScreenRecordingEnabled && (
         <ToolButton
-          icon={<span className="material-symbols">mode_standby</span>}
+          icon={<Icon type="symbols" name="mode_standby" />}
           title={t('tools.screenRecording.title')}
           description={t('tools.screenRecording.body')}
           onPress={() => openScreenRecording()}

src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
 import { Button, Popover } from '@/primitives'
@@ -9,13 +10,13 @@ import { css } from '@/styled-system/css'
 import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoices'
 import { useCanPublishTrack } from '../../../hooks/useCanPublishTrack'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
-import * as React from 'react'
 import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { TrackSource } from '@livekit/protocol'
 import Source = Track.Source
 import { isSafari } from '@/utils/livekit'
+import { useFocusOnOpen } from '@/hooks/useFocusOnOpen'
 
 type AudioDevicesControlProps = Omit<
   UseTrackToggleProps<Source.Microphone>,
@@ -29,6 +30,8 @@ export const AudioDevicesControl = ({
   ...props
 }: AudioDevicesControlProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
+  const popoverContentRef = React.useRef<HTMLDivElement>(null)
 
   const {
     userChoices: { audioDeviceId, audioOutputDeviceId },
@@ -55,6 +58,12 @@ export const AudioDevicesControl = ({
 
   const canPublishTrack = useCanPublishTrack(TrackSource.MICROPHONE)
 
+  useFocusOnOpen(isMenuOpen, popoverContentRef, {
+    selector:
+      '[data-attr="audio-input-select"] button, [data-attr="audio-input-select"] [role="combobox"]',
+    delayMs: 250,
+  })
+
   return (
     <div
       className={css({
@@ -76,7 +85,12 @@ export const AudioDevicesControl = ({
         }}
       />
       {!hideMenu && (
-        <Popover variant="dark" withArrow={false}>
+        <Popover
+          variant="dark"
+          withArrow={false}
+          isOpen={isMenuOpen}
+          onOpenChange={setIsMenuOpen}
+        >
           <Button
             tooltip={selectLabel}
             aria-label={selectLabel}
@@ -92,6 +106,7 @@ export const AudioDevicesControl = ({
           </Button>
           {({ close }) => (
             <div
+              ref={popoverContentRef}
               className={css({
                 maxWidth: '36rem',
                 padding: '0.15rem',
@@ -100,6 +115,7 @@ export const AudioDevicesControl = ({
               })}
             >
               <div
+                data-attr="audio-input-select"
                 style={{
                   flex: '1 1 0',
                   minWidth: 0,

src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx

@@ -10,6 +10,7 @@ import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoice
 import { useCanPublishTrack } from '../../../hooks/useCanPublishTrack'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
 import { useSidePanel } from '../../../hooks/useSidePanel'
+import { useSidePanelTriggers } from '../../../hooks/useSidePanelTriggers'
 import { BackgroundProcessorFactory } from '../../blur'
 import Source = Track.Source
 import * as React from 'react'
@@ -17,10 +18,12 @@ import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { TrackSource } from '@livekit/protocol'
+import { useFocusOnOpen } from '@/hooks/useFocusOnOpen'
 
 const EffectsButton = ({ onPress }: { onPress: () => void }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
   const { isEffectsOpen, toggleEffects } = useSidePanel()
+  const { setTrigger } = useSidePanelTriggers()
   return (
     <Button
       size="sm"
@@ -28,6 +31,7 @@ const EffectsButton = ({ onPress }: { onPress: () => void }) => {
       tooltip={t('effects')}
       aria-label={t('effects')}
       variant="primaryDark"
+      ref={(el) => setTrigger('effects', el)}
       onPress={() => {
         if (!isEffectsOpen) toggleEffects()
         onPress()
@@ -50,6 +54,9 @@ export const VideoDeviceControl = ({
   ...props
 }: VideoDeviceControlProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
+  const popoverContentRef = React.useRef<HTMLDivElement>(null)
+  const { setTrigger } = useSidePanelTriggers()
 
   const { userChoices, saveVideoInputDeviceId, saveVideoInputEnabled } =
     usePersistentUserChoices()
@@ -99,6 +106,12 @@ export const VideoDeviceControl = ({
   const selectLabel = t(`settings.${SettingsDialogExtendedKey.VIDEO}`)
   const canPublishTrack = useCanPublishTrack(TrackSource.CAMERA)
 
+  useFocusOnOpen(isMenuOpen, popoverContentRef, {
+    selector:
+      '[data-attr="video-input-select"] button, [data-attr="video-input-select"] [role="combobox"]',
+    delayMs: 250,
+  })
+
   return (
     <div
       className={css({
@@ -120,12 +133,18 @@ export const VideoDeviceControl = ({
         }}
       />
       {!hideMenu && (
-        <Popover variant="dark" withArrow={false}>
+        <Popover
+          variant="dark"
+          withArrow={false}
+          isOpen={isMenuOpen}
+          onOpenChange={setIsMenuOpen}
+        >
           <Button
             tooltip={selectLabel}
             aria-label={selectLabel}
             groupPosition="right"
             square
+            ref={(el) => setTrigger('cameraMenu', el)}
             variant={
               !canPublishTrack || !trackProps.enabled || cannotUseDevice
                 ? 'error2'
@@ -136,6 +155,7 @@ export const VideoDeviceControl = ({
           </Button>
           {({ close }) => (
             <div
+              ref={popoverContentRef}
               className={css({
                 maxWidth: '36rem',
                 padding: '0.15rem',
@@ -144,6 +164,7 @@ export const VideoDeviceControl = ({
               })}
             >
               <div
+                data-attr="video-input-select"
                 style={{
                   flex: '1 1 0',
                   minWidth: 0,

src/frontend/src/features/rooms/livekit/components/controls/InfoToggle.tsx

@@ -1,9 +1,11 @@
+import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiInformationLine } from '@remixicon/react'
 import { css } from '@/styled-system/css'
 import { ToggleButton } from '@/primitives'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useSidePanelTriggers } from '../../hooks/useSidePanelTriggers'
 
 export const InfoToggle = ({
   onPress,
@@ -12,8 +14,18 @@ export const InfoToggle = ({
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.info' })
 
   const { isInfoOpen, toggleInfo } = useSidePanel()
+  // const { setTrigger } = useSidePanelTriggers()
   const tooltipLabel = isInfoOpen ? 'open' : 'closed'
 
+  const wip = useRef<HTMLElement | null>()
+
+  // const setInfoTriggerRef = useCallback(
+  //   (el: HTMLElement | null) => {
+  //     setTrigger('info', el)
+  //   },
+  //   [setTrigger]
+  // )
+
   return (
     <div
       className={css({
@@ -27,8 +39,9 @@ export const InfoToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isInfoOpen}
+        ref={wip}
         onPress={(e) => {
-          toggleInfo()
+          toggleInfo(wip)
           onPress?.(e)
         }}
         data-attr={`controls-info-${tooltipLabel}`}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -1,10 +1,19 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
 import { OptionsMenuItems } from './OptionsMenuItems'
+import { useSidePanelTriggers } from '../../../hooks/useSidePanelTriggers'
 
 export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
+  const { setTrigger } = useSidePanelTriggers()
+  const setOptionsTriggerRef = useCallback(
+    (el: HTMLElement | null) => {
+      setTrigger('options', el)
+    },
+    [setTrigger]
+  )
 
   return (
     <Menu variant="dark">
@@ -14,6 +23,7 @@ export const OptionsButton = () => {
         variant="primaryDark"
         aria-label={t('options.buttonLabel')}
         tooltip={t('options.buttonLabel')}
+        ref={setOptionsTriggerRef}
       >
         <RiMoreFill />
       </Button>

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsCollapsableList.tsx

@@ -70,6 +70,7 @@ export function ParticipantsCollapsableList<T>({
       <ToggleHeader
         isSelected={isOpen}
         aria-label={label}
+        data-focus-target="list-header"
         onPress={() => setIsOpen(!isOpen)}
         style={{
           borderRadius: !isOpen ? '7px' : undefined,

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -12,10 +12,17 @@ import { useWaitingParticipants } from '@/features/rooms/hooks/useWaitingPartici
 import { Participant } from 'livekit-client'
 import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
 import { MuteEveryoneButton } from './MuteEveryoneButton'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
+import { useSidePanelRef } from '../../../hooks/useSidePanelRef'
+import { useSidePanelTriggers } from '../../../hooks/useSidePanelTriggers'
 
 // TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
 export const ParticipantsList = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'participants' })
+  const { isParticipantsOpen } = useSidePanel()
+  const panelRef = useSidePanelRef()
+  const { getTrigger } = useSidePanelTriggers()
 
   // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
   // because the 'useLocalParticipant' hook does not update the participant's information when their
@@ -48,6 +55,31 @@ export const ParticipantsList = () => {
   const { waitingParticipants, handleParticipantEntry } =
     useWaitingParticipants()
 
+  // Restore focus to the element that opened the Participants panel
+  useRestoreFocus(isParticipantsOpen, {
+    resolveTrigger: (activeEl) => {
+      return getTrigger('participants') ?? activeEl
+    },
+    // Focus the first focusable element when the panel opens
+    onOpened: () => {
+      // Use setTimeout + RAF to ensure DOM is fully rendered and transition completed
+      setTimeout(() => {
+        requestAnimationFrame(() => {
+          const panel = panelRef.current
+          if (panel) {
+            // Find the first ToggleHeader (collapsable list header) in the participants panel
+            const firstListHeader = panel.querySelector<HTMLElement>(
+              'button[data-focus-target="list-header"]'
+            )
+            firstListHeader?.focus({ preventScroll: true })
+          }
+        })
+      }, 100) // Wait for panel slide-in animation to complete
+    },
+    restoreFocusRaf: true,
+    preventScroll: true,
+  })
+
   // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
   return (
     <Div overflowY="scroll">

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx

@@ -1,10 +1,13 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
+import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'
 import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 import { useSidePanel } from '../../../hooks/useSidePanel'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useSidePanelTriggers } from '../../../hooks/useSidePanelTriggers'
 
 export const ParticipantsToggle = ({
   onPress,
@@ -19,10 +22,19 @@ export const ParticipantsToggle = ({
    */
   const participants = useParticipants()
   const numParticipants = participants?.length
+  const announcedCount =
+    numParticipants && numParticipants > 0 ? numParticipants : 1
 
   const { isParticipantsOpen, toggleParticipants } = useSidePanel()
+  const { setTrigger } = useSidePanelTriggers()
 
   const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
+  const setParticipantsTriggerRef = useCallback(
+    (el: HTMLElement | null) => {
+      setTrigger('participants', el)
+    },
+    [setTrigger]
+  )
 
   return (
     <div
@@ -31,21 +43,25 @@ export const ParticipantsToggle = ({
         display: 'inline-block',
       })}
     >
-      <ToggleButton
-        square
-        variant="primaryTextDark"
-        aria-label={t(tooltipLabel)}
-        tooltip={t(tooltipLabel)}
-        isSelected={isParticipantsOpen}
-        onPress={(e) => {
-          toggleParticipants()
-          onPress?.(e)
-        }}
-        data-attr={`controls-participants-${tooltipLabel}`}
-        {...props}
-      >
-        <RiGroupLine />
-      </ToggleButton>
+      <VisualOnlyTooltip tooltip={t(tooltipLabel)}>
+        <ToggleButton
+          square
+          variant="primaryTextDark"
+          aria-label={`${t(tooltipLabel)}. ${t('count', {
+            count: announcedCount,
+          })}.`}
+          isSelected={isParticipantsOpen}
+          ref={setParticipantsTriggerRef}
+          onPress={(e) => {
+            toggleParticipants()
+            onPress?.(e)
+          }}
+          data-attr={`controls-participants-${tooltipLabel}`}
+          {...props}
+        >
+          <RiGroupLine />
+        </ToggleButton>
+      </VisualOnlyTooltip>
       <div
         className={css({
           position: 'absolute',

src/frontend/src/features/rooms/livekit/components/controls/ReactionsToggle.tsx

@@ -10,9 +10,11 @@ import {
   ANIMATION_DURATION,
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
+import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
 import { Toolbar as RACToolbar } from 'react-aria-components'
 import { Participant } from 'livekit-client'
 import useRateLimiter from '@/hooks/useRateLimiter'
+import { useEscapeKey } from '@/hooks/useEscapeKey'
 
 // eslint-disable-next-line react-refresh/only-export-components
 export enum Emoji {
@@ -36,6 +38,7 @@ export const ReactionsToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
   const [reactions, setReactions] = useState<Reaction[]>([])
   const instanceIdRef = useRef(0)
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
   const room = useRoomContext()
 
   const [isVisible, setIsVisible] = useState(false)
@@ -101,6 +104,22 @@ export const ReactionsToggle = () => {
     }
   }, [isVisible, isRendered])
 
+  useEscapeKey(
+    () => {
+      // Mirror the trigger button behavior (Enter toggles open/close)
+      triggerRef.current?.click()
+      requestAnimationFrame(() => {
+        triggerRef.current?.focus({ preventScroll: true })
+      })
+    },
+    {
+      isActive: isVisible,
+      capture: true,
+      preventDefault: true,
+      stopPropagation: true,
+    }
+  )
+
   return (
     <>
       <div
@@ -113,6 +132,7 @@ export const ReactionsToggle = () => {
           variant="primaryDark"
           aria-label={t('button')}
           tooltip={t('button')}
+          ref={triggerRef}
           onPress={() => setIsVisible(!isVisible)}
         >
           <RiEmotionLine />
@@ -145,7 +165,7 @@ export const ReactionsToggle = () => {
                 <Button
                   key={index}
                   onPress={() => debouncedSendReaction(emoji)}
-                  aria-label={t('send', { emoji })}
+                  aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
                   variant="primaryTextDark"
                   size="sm"
                   square

src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx

@@ -1,9 +1,11 @@
+import { useCallback } from 'react'
 import { ToggleButton } from '@/primitives'
 import { RiShapesLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useSidePanelTriggers } from '../../hooks/useSidePanelTriggers'
 
 export const ToolsToggle = ({
   variant = 'primaryTextDark',
@@ -13,7 +15,14 @@ export const ToolsToggle = ({
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.tools' })
 
   const { isToolsOpen, toggleTools } = useSidePanel()
+  const { setTrigger } = useSidePanelTriggers()
   const tooltipLabel = isToolsOpen ? 'open' : 'closed'
+  const setToolsTriggerRef = useCallback(
+    (el: HTMLElement | null) => {
+      setTrigger('tools', el)
+    },
+    [setTrigger]
+  )
 
   return (
     <div
@@ -28,6 +37,7 @@ export const ToolsToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isToolsOpen}
+        ref={setToolsTriggerRef}
         onPress={(e) => {
           toggleTools()
           onPress?.(e)

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

@@ -5,14 +5,48 @@ import { EffectsConfiguration } from './EffectsConfiguration'
 import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 import { useCanPublishTrack } from '@/features/rooms/livekit/hooks/useCanPublishTrack'
 import { TrackSource } from '@livekit/protocol'
+import { useSidePanel } from '../../hooks/useSidePanel'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
+import { useSidePanelRef } from '../../hooks/useSidePanelRef'
+import { useSidePanelTriggers } from '../../hooks/useSidePanelTriggers'
 
 export const Effects = () => {
   const { cameraTrack } = useLocalParticipant()
   const localCameraTrack = cameraTrack?.track as LocalVideoTrack
   const { saveProcessorSerialized } = usePersistentUserChoices()
+  const { isEffectsOpen } = useSidePanel()
+  const panelRef = useSidePanelRef()
+  const { getTrigger } = useSidePanelTriggers()
 
   const canPublishCamera = useCanPublishTrack(TrackSource.CAMERA)
 
+  useRestoreFocus(isEffectsOpen, {
+    resolveTrigger: (activeEl) => {
+      if (activeEl?.tagName === 'DIV') {
+        return getTrigger('options') ?? activeEl
+      }
+      // For direct button clicks, use the active element as is
+      return activeEl
+    },
+    // Focus the first focusable element when the panel opens
+    onOpened: () => {
+      requestAnimationFrame(() => {
+        const panel = panelRef.current
+        if (panel) {
+          // Find the first toggle button (blur light button)
+          const firstButton = panel.querySelector<HTMLElement>(
+            '[data-attr="toggle-blur-light"]'
+          )
+          if (firstButton) {
+            firstButton.focus({ preventScroll: true })
+          }
+        }
+      })
+    },
+    restoreFocusRaf: true,
+    preventScroll: true,
+  })
+
   return (
     <div
       className={css({

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 [effectStatusMessage, setEffectStatusMessage] = useState('')
+  const effectAnnouncementTimeout = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null)
+  const effectAnnouncementId = useRef(0)
 
   useEffect(() => {
     const videoElement = videoRef.current
@@ -69,16 +75,95 @@ export const EffectsConfiguration = ({
     }
   }, [videoTrack, videoTrack?.isMuted])
 
+  useEffect(() => {
+    if (!blurLightRef.current) return
+
+    const rafId = requestAnimationFrame(() => {
+      blurLightRef.current?.focus({ preventScroll: true })
+    })
+
+    return () => {
+      cancelAnimationFrame(rafId)
+    }
+  }, [])
+
+  useEffect(
+    () => () => {
+      if (effectAnnouncementTimeout.current) {
+        clearTimeout(effectAnnouncementTimeout.current)
+      }
+    },
+    []
+  )
+
+  const announceEffectStatusMessage = (message: string) => {
+    effectAnnouncementId.current += 1
+    const currentId = effectAnnouncementId.current
+
+    if (effectAnnouncementTimeout.current) {
+      clearTimeout(effectAnnouncementTimeout.current)
+    }
+
+    // Clear the region first so screen readers drop queued announcements.
+    setEffectStatusMessage('')
+
+    effectAnnouncementTimeout.current = setTimeout(() => {
+      if (currentId !== effectAnnouncementId.current) return
+      setEffectStatusMessage(message)
+    }, 80)
+  }
+
   const clearEffect = async () => {
     await videoTrack.stopProcessor()
     onSubmit?.(undefined)
   }
 
+  const getVirtualBackgroundName = (imagePath?: string) => {
+    if (!imagePath) return ''
+    const match = imagePath.match(/\/backgrounds\/(\d+)\.jpg$/)
+    if (!match) return ''
+    const index = Number(match[1]) - 1
+    if (Number.isNaN(index)) return ''
+    return t(`virtual.descriptions.${index}`)
+  }
+
+  const updateEffectStatusMessage = (
+    type: ProcessorType,
+    options: BackgroundOptions,
+    wasSelectedBeforeToggle: boolean
+  ) => {
+    if (wasSelectedBeforeToggle) {
+      announceEffectStatusMessage(t('blur.status.none'))
+      return
+    }
+
+    if (type === ProcessorType.BLUR) {
+      const message =
+        options.blurRadius === BlurRadius.LIGHT
+          ? t('blur.status.light')
+          : t('blur.status.strong')
+      announceEffectStatusMessage(message)
+      return
+    }
+
+    if (type === ProcessorType.VIRTUAL) {
+      const backgroundName = getVirtualBackgroundName(options.imagePath)
+      if (backgroundName) {
+        announceEffectStatusMessage(
+          `${t('virtual.selectedLabel')} ${backgroundName}`
+        )
+        return
+      }
+    }
+  }
+
   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 +189,7 @@ export const EffectsConfiguration = ({
 
     const processor = getProcessor()
     try {
-      if (isSelected(type, options)) {
+      if (wasSelectedBeforeToggle) {
         // Stop processor.
         await clearEffect()
       } else if (
@@ -131,6 +216,8 @@ export const EffectsConfiguration = ({
         // We want to trigger onSubmit when options changes so the parent component is aware of it.
         onSubmit?.(processor)
       }
+
+      updateEffectStatusMessage(type, options, wasSelectedBeforeToggle)
     } catch (error) {
       console.error('Error applying effect:', error)
     } finally {
@@ -153,8 +240,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 +372,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">
+                  {effectStatusMessage}
+                </div>
               </div>
               <div
                 className={css({
@@ -343,39 +445,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/features/rooms/livekit/contexts/SidePanelContext.tsx

@@ -0,0 +1,29 @@
+import { useRef, ReactNode } from 'react'
+import { SidePanelContext, SidePanelTriggerKey } from './sidePanelContextValue'
+
+export const SidePanelProvider = ({ children }: { children: ReactNode }) => {
+  const panelRef = useRef<HTMLElement>(null)
+  const triggersRef = useRef<Record<SidePanelTriggerKey, HTMLElement | null>>({
+    participants: null,
+    tools: null,
+    info: null,
+    admin: null,
+    options: null,
+    effects: null,
+    cameraMenu: null,
+  })
+
+  const setTrigger = (key: SidePanelTriggerKey, el: HTMLElement | null) => {
+    triggersRef.current[key] = el
+  }
+
+  const getTrigger = (key: SidePanelTriggerKey) => {
+    return triggersRef.current[key] ?? null
+  }
+
+  return (
+    <SidePanelContext.Provider value={{ panelRef, setTrigger, getTrigger }}>
+      {children}
+    </SidePanelContext.Provider>
+  )
+}

src/frontend/src/features/rooms/livekit/contexts/sidePanelContextValue.ts

@@ -0,0 +1,20 @@
+import { createContext } from 'react'
+
+export type SidePanelTriggerKey =
+  | 'participants'
+  | 'tools'
+  | 'info'
+  | 'admin'
+  | 'options'
+  | 'effects'
+  | 'cameraMenu'
+
+export type SidePanelContextValue = {
+  panelRef: React.RefObject<HTMLElement>
+  setTrigger: (key: SidePanelTriggerKey, el: HTMLElement | null) => void
+  getTrigger: (key: SidePanelTriggerKey) => HTMLElement | null
+}
+
+export const SidePanelContext = createContext<SidePanelContextValue | null>(
+  null
+)

src/frontend/src/features/rooms/livekit/hooks/useSidePanel.ts

@@ -1,5 +1,6 @@
-import { useSnapshot } from 'valtio'
+import { ref, useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
+import { useEffect } from 'react'
 
 export enum PanelId {
   PARTICIPANTS = 'participants',
@@ -56,8 +57,13 @@ export const useSidePanel = () => {
     if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
-  const toggleInfo = () => {
+  const toggleInfo = (wip) => {
     layoutStore.activePanelId = isInfoOpen ? null : PanelId.INFO
+
+    if (!isInfoOpen) {
+      layoutStore.genericRef = ref(wip)
+    }
+
     if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
   }
 
@@ -71,6 +77,18 @@ export const useSidePanel = () => {
     layoutStore.activePanelId = PanelId.TOOLS
   }
 
+  useEffect(() => {
+    if (!layoutSnap.activePanelId) {
+      console.log('$$prout closing')
+      const trigger = layoutSnap?.genericRef?.current
+      console.log(trigger)
+      if (trigger) {
+        trigger.focus({ preventScroll: true })
+        trigger.setAttribute('data-restore-focus-visible', '')
+      }
+    }
+  }, [layoutSnap.activePanelId, layoutSnap?.genericRef])
+
   return {
     activePanelId,
     activeSubPanelId,

src/frontend/src/features/rooms/livekit/hooks/useSidePanelRef.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { SidePanelContext } from '../contexts/sidePanelContextValue'
+
+export const useSidePanelRef = () => {
+  const context = useContext(SidePanelContext)
+  if (!context) {
+    throw new Error('useSidePanelRef must be used within SidePanelProvider')
+  }
+  return context.panelRef
+}

src/frontend/src/features/rooms/livekit/hooks/useSidePanelTriggers.ts

@@ -0,0 +1,15 @@
+import { useContext } from 'react'
+import { SidePanelContext } from '../contexts/sidePanelContextValue'
+
+export const useSidePanelTriggers = () => {
+  const context = useContext(SidePanelContext)
+  if (!context) {
+    throw new Error(
+      'useSidePanelTriggers must be used within SidePanelProvider'
+    )
+  }
+  return {
+    setTrigger: context.setTrigger,
+    getTrigger: context.getTrigger,
+  }
+}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -26,6 +26,7 @@ import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { useSidePanel } from '../hooks/useSidePanel'
+import { SidePanelProvider } from '../contexts/SidePanelContext'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
@@ -188,75 +189,77 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
           value={layoutContext}
           // onPinChange={handleFocusStateChange}
         >
-          <ScreenShareErrorModal
-            isOpen={isShareErrorVisible}
-            onClose={() => setIsShareErrorVisible(false)}
-          />
-          <IsIdleDisconnectModal />
-          <div
-            // todo - extract these magic values into constant
-            style={{
-              position: 'absolute',
-              inset: isSidePanelOpen
-                ? `var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px`
-                : `var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))`,
-              transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
-              maxHeight: '100%',
-            }}
-          >
-            <LayoutWrapper areSubtitlesOpen={areSubtitlesOpen}>
-              <div
-                style={{
-                  display: 'flex',
-                  position: 'relative',
-                  width: '100%',
-                }}
-              >
-                {!focusTrack ? (
-                  <div
-                    className="lk-grid-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <GridLayout tracks={tracks} style={{ padding: 0 }}>
-                      <ParticipantTile />
-                    </GridLayout>
-                  </div>
-                ) : (
-                  <div
-                    className="lk-focus-layout-wrapper"
-                    style={{ height: 'auto' }}
-                  >
-                    <FocusLayoutContainer style={{ padding: 0 }}>
-                      <CarouselLayout
-                        tracks={carouselTracks}
-                        style={{
-                          minWidth: '200px',
-                        }}
-                      >
+          <SidePanelProvider>
+            <ScreenShareErrorModal
+              isOpen={isShareErrorVisible}
+              onClose={() => setIsShareErrorVisible(false)}
+            />
+            <IsIdleDisconnectModal />
+            <div
+              // todo - extract these magic values into constant
+              style={{
+                position: 'absolute',
+                inset: isSidePanelOpen
+                  ? `var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px`
+                  : `var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))`,
+                transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
+                maxHeight: '100%',
+              }}
+            >
+              <LayoutWrapper areSubtitlesOpen={areSubtitlesOpen}>
+                <div
+                  style={{
+                    display: 'flex',
+                    position: 'relative',
+                    width: '100%',
+                  }}
+                >
+                  {!focusTrack ? (
+                    <div
+                      className="lk-grid-layout-wrapper"
+                      style={{ height: 'auto' }}
+                    >
+                      <GridLayout tracks={tracks} style={{ padding: 0 }}>
                         <ParticipantTile />
-                      </CarouselLayout>
-                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                    </FocusLayoutContainer>
-                  </div>
-                )}
-              </div>
-            </LayoutWrapper>
-            <Subtitles />
-            <MainNotificationToast />
-          </div>
-          <ControlBar
-            onDeviceError={(e) => {
-              console.error(e)
-              if (
-                e.source == Track.Source.ScreenShare &&
-                e.error.toString() ==
-                  'NotAllowedError: Permission denied by system'
-              ) {
-                setIsShareErrorVisible(true)
-              }
-            }}
-          />
-          <SidePanel />
+                      </GridLayout>
+                    </div>
+                  ) : (
+                    <div
+                      className="lk-focus-layout-wrapper"
+                      style={{ height: 'auto' }}
+                    >
+                      <FocusLayoutContainer style={{ padding: 0 }}>
+                        <CarouselLayout
+                          tracks={carouselTracks}
+                          style={{
+                            minWidth: '200px',
+                          }}
+                        >
+                          <ParticipantTile />
+                        </CarouselLayout>
+                        {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                      </FocusLayoutContainer>
+                    </div>
+                  )}
+                </div>
+              </LayoutWrapper>
+              <Subtitles />
+              <MainNotificationToast />
+            </div>
+            <ControlBar
+              onDeviceError={(e) => {
+                console.error(e)
+                if (
+                  e.source == Track.Source.ScreenShare &&
+                  e.error.toString() ==
+                    'NotAllowedError: Permission denied by system'
+                ) {
+                  setIsShareErrorVisible(true)
+                }
+              }}
+            />
+            <SidePanel />
+          </SidePanelProvider>
         </LayoutContextProvider>
       )}
       <RoomAudioRenderer />

src/frontend/src/features/rooms/livekit/utils/reactionUtils.ts

@@ -0,0 +1,24 @@
+import { useTranslation } from 'react-i18next'
+
+export const getEmojiLabel = (
+  emoji: string,
+  t: ReturnType<typeof useTranslation>['t']
+) => {
+  const emojiLabels: Record<string, string> = {
+    'thumbs-up': t('emojis.thumbs-up', { defaultValue: 'thumbs up' }),
+    'thumbs-down': t('emojis.thumbs-down', { defaultValue: 'thumbs down' }),
+    'clapping-hands': t('emojis.clapping-hands', {
+      defaultValue: 'clapping hands',
+    }),
+    'red-heart': t('emojis.red-heart', { defaultValue: 'red heart' }),
+    'face-with-tears-of-joy': t('emojis.face-with-tears-of-joy', {
+      defaultValue: 'face with tears of joy',
+    }),
+    'face-with-open-mouth': t('emojis.face-with-open-mouth', {
+      defaultValue: 'surprised face',
+    }),
+    'party-popper': t('emojis.party-popper', { defaultValue: 'party popper' }),
+    'folded-hands': t('emojis.folded-hands', { defaultValue: 'folded hands' }),
+  }
+  return emojiLabels[emoji] ?? emoji
+}

src/frontend/src/features/rooms/routes/Feedback.tsx

@@ -3,7 +3,9 @@ import { Button } from '@/primitives'
 import { Screen } from '@/layout/Screen'
 import { Center, HStack, styled, VStack } from '@/styled-system/jsx'
 import { Rating } from '@/features/rooms/components/Rating.tsx'
-import { useLocation, useSearchParams } from 'wouter'
+import { useLocation } from 'wouter'
+import { useMemo } from 'react'
+import { DisconnectReason } from 'livekit-client'
 
 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -20,25 +22,40 @@ const Heading = styled('h1', {
   },
 })
 
+enum DisconnectReasonKey {
+  DuplicateIdentity = 'duplicateIdentity',
+  ParticipantRemoved = 'participantRemoved',
+}
+
 export const FeedbackRoute = () => {
   const { t } = useTranslation('rooms')
   const [, setLocation] = useLocation()
 
-  const [searchParams] = useSearchParams()
+  const reasonKey = useMemo(() => {
+    const state = window.history.state
+
+    if (!state?.reason) return
+    switch (state.reason) {
+      case DisconnectReason.DUPLICATE_IDENTITY:
+        return DisconnectReasonKey.DuplicateIdentity
+      case DisconnectReason.PARTICIPANT_REMOVED:
+        return DisconnectReasonKey.ParticipantRemoved
+    }
+  }, [])
+
+  const showBackButton = reasonKey !== DisconnectReasonKey.ParticipantRemoved
 
   return (
     <Screen layout="centered" footer={false}>
       <Center>
         <VStack>
-          <Heading>
-            {t(
-              `feedback.heading.${searchParams.get('duplicateIdentity') ? 'duplicateIdentity' : 'normal'}`
-            )}
-          </Heading>
+          <Heading>{t(`feedback.heading.${reasonKey || 'normal'}`)}</Heading>
           <HStack>
-            <Button variant="secondary" onPress={() => window.history.back()}>
-              {t('feedback.back')}
-            </Button>
+            {showBackButton && (
+              <Button variant="secondary" onPress={() => window.history.back()}>
+                {t('feedback.back')}
+              </Button>
+            )}
             <Button variant="primary" onPress={() => setLocation('/')}>
               {t('feedback.home')}
             </Button>

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -2,6 +2,7 @@ import { Dialog, type DialogProps } from '@/primitives'
 import { Tab, Tabs, TabList } from '@/primitives/Tabs.tsx'
 import { css } from '@/styled-system/css'
 import { text } from '@/primitives/Text.tsx'
+import { Icon } from '@/primitives/Icon'
 import { Heading } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import {
@@ -10,6 +11,7 @@ import {
   RiSettings3Line,
   RiSpeakerLine,
   RiVideoOnLine,
+  RiEyeLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
@@ -21,6 +23,7 @@ import { useRef } from 'react'
 import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import AccessibilityTab from './tabs/AccessibilityTab'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -106,11 +109,16 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
             </Tab>
             {isAdminOrOwner && (
               <Tab icon highlight id={SettingsDialogExtendedKey.TRANSCRIPTION}>
-                <span className="material-symbols">speech_to_text</span>
+                <Icon type="symbols" name="speech_to_text" />
                 {isWideScreen &&
                   t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)}
               </Tab>
             )}
+            <Tab icon highlight id={SettingsDialogExtendedKey.ACCESSIBILITY}>
+              <RiEyeLine />
+              {isWideScreen &&
+                t(`tabs.${SettingsDialogExtendedKey.ACCESSIBILITY}`)}
+            </Tab>
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>
@@ -124,6 +132,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
           <NotificationsTab id={SettingsDialogExtendedKey.NOTIFICATIONS} />
           {/* Transcription tab won't be accessible if the tab is not active in the tab list */}
           <TranscriptionTab id={SettingsDialogExtendedKey.TRANSCRIPTION} />
+          <AccessibilityTab id={SettingsDialogExtendedKey.ACCESSIBILITY} />
         </div>
       </Tabs>
     </Dialog>

src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx

@@ -0,0 +1,40 @@
+import { Field, H } from '@/primitives'
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { accessibilityStore } from '@/stores/accessibility'
+
+export type AccessibilityTabProps = Pick<TabPanelProps, 'id'>
+
+export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
+  const { t } = useTranslation('settings')
+  const snap = useSnapshot(accessibilityStore)
+
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('tabs.accessibility')}</H>
+      <ul
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        })}
+      >
+        <li>
+          <Field
+            type="switch"
+            label={t('accessibility.announceReactions.label')}
+            isSelected={snap.announceReactions}
+            onChange={(value) => {
+              accessibilityStore.announceReactions = value
+            }}
+            wrapperProps={{ noMargin: true, fullWidth: true }}
+          />
+        </li>
+      </ul>
+    </TabPanel>
+  )
+}
+
+export default AccessibilityTab

src/frontend/src/features/settings/type.ts

@@ -5,4 +5,5 @@ export enum SettingsDialogExtendedKey {
   GENERAL = 'general',
   NOTIFICATIONS = 'notifications',
   TRANSCRIPTION = 'transcription',
+  ACCESSIBILITY = 'accessibility',
 }

src/frontend/src/features/subtitle/hooks/useSubtitles.tsx

@@ -2,10 +2,14 @@ import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
 import { useStartSubtitle } from '../api/startSubtitle'
 import { useRoomData } from '@/features/rooms/livekit/hooks/useRoomData'
+import { useRoomContext } from '@livekit/components-react'
+import { useEffect } from 'react'
+import { RoomEvent } from 'livekit-client'
 
 export const useSubtitles = () => {
   const layoutSnap = useSnapshot(layoutStore)
 
+  const room = useRoomContext()
   const apiRoomData = useRoomData()
   const { mutateAsync: startSubtitleRoom, isPending } = useStartSubtitle()
 
@@ -20,6 +24,18 @@ export const useSubtitles = () => {
     layoutStore.showSubtitles = !layoutSnap.showSubtitles
   }
 
+  useEffect(() => {
+    if (!room) return
+
+    const closeSubtitles = () => {
+      layoutStore.showSubtitles = false
+    }
+    room.on(RoomEvent.Disconnected, closeSubtitles)
+    return () => {
+      room.off(RoomEvent.Disconnected, closeSubtitles)
+    }
+  }, [room])
+
   return {
     areSubtitlesOpen: layoutSnap.showSubtitles,
     toggleSubtitles,

src/frontend/src/hooks/useEscapeKey.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react'
+
+type UseEscapeKeyOptions = {
+  isActive: boolean
+  capture?: boolean
+  preventDefault?: boolean
+  stopPropagation?: boolean
+}
+
+export const useEscapeKey = (
+  handler: () => void,
+  {
+    isActive,
+    capture = false,
+    preventDefault = false,
+    stopPropagation = false,
+  }: UseEscapeKeyOptions
+) => {
+  const handleRef = useRef(handler)
+  handleRef.current = handler
+  useEffect(() => {
+    if (!isActive) return
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return
+      if (preventDefault) event.preventDefault()
+      if (stopPropagation) event.stopPropagation()
+      handleRef.current()
+    }
+
+    document.addEventListener('keydown', onKeyDown, capture)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, capture)
+    }
+  }, [capture, isActive, preventDefault, stopPropagation])
+}

src/frontend/src/hooks/useFocusOnOpen.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+
+type UseFocusOnOpenOptions = {
+  selector: string
+  delayMs?: number
+  preventScroll?: boolean
+}
+
+export const useFocusOnOpen = (
+  isOpen: boolean,
+  containerRef: React.RefObject<HTMLElement>,
+  { selector, delayMs = 0, preventScroll = true }: UseFocusOnOpenOptions
+) => {
+  useEffect(() => {
+    if (!isOpen) return
+    const timer = setTimeout(() => {
+      requestAnimationFrame(() => {
+        const first = containerRef.current?.querySelector<HTMLElement>(selector)
+        first?.focus({ preventScroll })
+      })
+    }, delayMs)
+    return () => clearTimeout(timer)
+  }, [containerRef, delayMs, isOpen, preventScroll, selector])
+}

src/frontend/src/hooks/useRestoreFocus.ts

@@ -26,6 +26,26 @@ export function useRestoreFocus(
 
   const prevIsOpenRef = useRef(false)
   const triggerRef = useRef<HTMLElement | null>(null)
+  const cleanupRef = useRef<(() => void) | null>(null)
+  const lastInteractionRef = useRef<'keyboard' | 'mouse' | null>(null)
+
+  useEffect(() => {
+    // Track last interaction type (like native :focus-visible behavior)
+    const handleKeyDown = () => {
+      lastInteractionRef.current = 'keyboard'
+    }
+    const handleMouseDown = () => {
+      lastInteractionRef.current = 'mouse'
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('mousedown', handleMouseDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('mousedown', handleMouseDown)
+    }
+  }, [])
 
   useEffect(() => {
     const wasOpen = prevIsOpenRef.current
@@ -41,7 +61,28 @@ export function useRestoreFocus(
     if (wasOpen && !isOpen) {
       const trigger = triggerRef.current
       if (trigger && document.contains(trigger)) {
-        const focus = () => trigger.focus({ preventScroll })
+        const focus = () => {
+          trigger.focus({ preventScroll })
+          // Only show focus ring if last interaction was keyboard (like native :focus-visible)
+          if (lastInteractionRef.current === 'keyboard') {
+            trigger.setAttribute('data-restore-focus-visible', '')
+            // Remove focus ring only when the trigger loses focus
+            const handleBlur = () => {
+              if (document.contains(trigger)) {
+                trigger.removeAttribute('data-restore-focus-visible')
+              }
+            }
+            trigger.addEventListener('blur', handleBlur, { once: true })
+            // Store cleanup for unmount case
+            cleanupRef.current?.()
+            cleanupRef.current = () => {
+              trigger.removeEventListener('blur', handleBlur)
+              if (document.contains(trigger)) {
+                trigger.removeAttribute('data-restore-focus-visible')
+              }
+            }
+          }
+        }
         if (restoreFocusRaf) requestAnimationFrame(focus)
         else focus()
       }
@@ -50,6 +91,12 @@ export function useRestoreFocus(
     }
 
     prevIsOpenRef.current = isOpen
+
+    // Cleanup: remove focus ring if component unmounts before focus changes
+    return () => {
+      cleanupRef.current?.()
+      cleanupRef.current = null
+    }
   }, [
     isOpen,
     onClosed,

src/frontend/src/locales/de/home.json

@@ -44,18 +44,15 @@
     },
     "slide1": {
       "title": "Wechseln Sie zur Einfachheit. Testen Sie uns jetzt!",
-      "body": "Entdecken Sie eine intuitive und zugängliche Lösung, entwickelt für alle Mitarbeitenden im öffentlichen Dienst, ihre Partner und viele weitere.",
-      "imgAlt": "Illustration einer benutzerfreundlichen und barrierefreien Kollaborationsplattform"
+      "body": "Entdecken Sie eine intuitive und zugängliche Lösung, entwickelt für alle Mitarbeitenden im öffentlichen Dienst, ihre Partner und viele weitere."
     },
     "slide2": {
       "title": "Gruppenanrufe ohne Einschränkungen",
-      "body": "Unbegrenzte Meeting-Dauer mit flüssiger, hochwertiger Kommunikation – unabhängig von der Gruppengröße.",
-      "imgAlt": "Bild eines virtuellen Meetings mit mehreren nahtlos zusammenarbeitenden Teilnehmenden"
+      "body": "Unbegrenzte Meeting-Dauer mit flüssiger, hochwertiger Kommunikation – unabhängig von der Gruppengröße."
     },
     "slide3": {
       "title": "Verwandeln Sie Ihre Meetings mit KI",
-      "body": "Erhalten Sie präzise und verwertbare Transkripte zur Steigerung Ihrer Produktivität. Funktion in der Beta – jetzt testen!",
-      "imgAlt": "Illustration KI-gestützter Notizen in einem virtuellen Meeting"
+      "body": "Erhalten Sie präzise und verwertbare Transkripte zur Steigerung Ihrer Produktivität. Funktion in der Beta – jetzt testen!"
     }
   }
 }

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

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "Sie haben das Meeting verlassen",
-      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten"
+      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten",
+      "participantRemoved": "Sie wurden von einem Administrator aus dem Anruf entfernt"
     },
     "home": "Zur Startseite zurückkehren",
     "back": "Dem Meeting erneut beitreten"
@@ -85,6 +86,7 @@
     "heading": "Ihr Meeting ist bereit",
     "description": "Teilen Sie diesen Link mit Personen, die Sie zum Meeting einladen möchten.",
     "permissions": "Personen mit diesem Link benötigen keine Erlaubnis, um diesem Meeting beizutreten.",
+    "closeDialog": "Dialogfenster schließen",
     "phone": {
       "call": "Rufen Sie an:",
       "pinCode": "Code:"
@@ -191,7 +193,9 @@
     "leave": "Verlassen",
     "participants": {
       "open": "Alle ausblenden",
-      "closed": "Alle anzeigen"
+      "closed": "Alle anzeigen",
+      "count_one": "{{count}} Teilnehmer",
+      "count_other": "{{count}} Teilnehmer"
     },
     "tools": {
       "open": "Weitere Tools ausblenden",
@@ -205,7 +209,18 @@
     "reactions": {
       "button": "Reaktion senden",
       "send": "Reaktion {{emoji}} senden",
-      "you": "Sie"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "Sie",
+      "emojis": {
+        "thumbs-up": "Daumen hoch",
+        "thumbs-down": "Daumen runter",
+        "clapping-hands": "Klatschende Hände",
+        "red-heart": "rotes Herz",
+        "face-with-tears-of-joy": "Gesicht mit Freudentränen",
+        "face-with-open-mouth": "überraschter Gesichtsausdruck",
+        "party-popper": "Party-Popper",
+        "folded-hands": "gefaltete Hände"
+      }
     }
   },
   "options": {
@@ -233,15 +248,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 +290,8 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Seitenleiste",
+    "backToTools": "Zurück zu den Meeting-Tools",
     "heading": {
       "participants": "Teilnehmer",
       "effects": "Effekte",

src/frontend/src/locales/en/home.json

@@ -44,18 +44,15 @@
     },
     "slide1": {
       "title": "Make the switch to simplicity. Try us now!",
-      "body": "Discover an intuitive and accessible solution, designed for all public agents, their partners, and much more.",
-      "imgAlt": "Illustration of a user-friendly and accessible collaboration platform"
+      "body": "Discover an intuitive and accessible solution, designed for all public agents, their partners, and much more."
     },
     "slide2": {
       "title": "Host group calls without limits",
-      "body": "Unlimited time meetings, with smooth and high-quality communication, no matter the group size.",
-      "imgAlt": "Image of a virtual meeting with multiple participants collaborating seamlessly"
+      "body": "Unlimited time meetings, with smooth and high-quality communication, no matter the group size."
     },
     "slide3": {
       "title": "Transform your meetings with AI",
-      "body": "Get accurate and actionable transcripts to boost your productivity. Feature in beta—try it now!",
-      "imgAlt": "Illustration of AI-powered note-taking in a virtual meeting"
+      "body": "Get accurate and actionable transcripts to boost your productivity. Feature in beta—try it now!"
     }
   }
 }

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

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "You have left the meeting",
-      "duplicateIdentity": "You have joined the meeting from another device"
+      "duplicateIdentity": "You have joined the meeting from another device",
+      "participantRemoved": "You have been removed from the meeting by an administrator"
     },
     "home": "Return to home",
     "back": "Rejoin the meeting"
@@ -15,7 +16,7 @@
       "audio": "Audio settings",
       "video": "Video settings"
     },
-    "effects": "Effects",
+    "effects": "Backgrounds and Effects",
     "videoinput": {
       "choose": "Select camera",
       "permissionsNeeded": "Select camera - permission needed",
@@ -38,7 +39,7 @@
   },
   "join": {
     "effects": {
-      "description": "Apply effects",
+      "description": "Apply backgrounds and effects",
       "title": "Effects",
       "subTitle": "Configure your camera's effects."
     },
@@ -85,6 +86,7 @@
     "heading": "Your meeting is ready",
     "description": "Share this link with people you want to invite to the meeting.",
     "permissions": "People with this link do not need your permission to join this meeting.",
+    "closeDialog": "Close dialog",
     "phone": {
       "call": "Call:",
       "pinCode": "Code:"
@@ -191,7 +193,9 @@
     "leave": "Leave",
     "participants": {
       "open": "Hide everyone",
-      "closed": "See everyone"
+      "closed": "See everyone",
+      "count_one": "{{count}} participant",
+      "count_other": "{{count}} participants"
     },
     "tools": {
       "open": "Hide more tools",
@@ -205,7 +209,18 @@
     "reactions": {
       "button": "Send reaction",
       "send": "Send reaction {{emoji}}",
-      "you": "you"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "you",
+      "emojis": {
+        "thumbs-up": "thumbs up",
+        "thumbs-down": "thumbs down",
+        "clapping-hands": "clapping hands",
+        "red-heart": "red heart",
+        "face-with-tears-of-joy": "face with tears of joy",
+        "face-with-open-mouth": "surprised face",
+        "party-popper": "party popper",
+        "folded-hands": "folded hands"
+      }
     }
   },
   "options": {
@@ -216,7 +231,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 +248,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 +290,11 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Sidepanel",
+    "backToTools": "Back to meeting tools",
     "heading": {
       "participants": "Participants",
-      "effects": "Effects",
+      "effects": "Backgrounds and Effects",
       "chat": "Messages in the chat",
       "transcript": "Transcribe",
       "screenRecording": "Record",
@@ -268,7 +304,7 @@
     },
     "content": {
       "participants": "participants",
-      "effects": "effects",
+      "effects": "Backgrounds and Effects",
       "chat": "messages",
       "transcript": "transcribe",
       "screenRecording": "record",
@@ -543,7 +579,7 @@
       "enable": "Pin",
       "disable": "Unpin"
     },
-    "effects": "Apply visual effects",
+    "effects": "Apply backgrounds and effects",
     "muteParticipant": "Mute {{name}}",
     "fullScreen": "Full screen"
   },

src/frontend/src/locales/en/settings.json

@@ -108,12 +108,18 @@
     "label": "Language"
   },
   "settingsButtonLabel": "Settings",
+  "accessibility": {
+    "announceReactions": {
+      "label": "Announce reactions aloud"
+    }
+  },
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
     "video": "Video",
     "general": "General",
     "notifications": "Notifications",
+    "accessibility": "Accessibility",
     "transcription": "Transcription"
   }
 }

src/frontend/src/locales/fr/home.json

@@ -44,18 +44,15 @@
     },
     "slide1": {
       "title": "Passez à la simplicité. Essayez-nous dès maintenant !",
-      "body": "Découvrez une solution intuitive et accessible, conçue pour tous les agents publics et leurs partenaires, et bien plus encore.",
-      "imgAlt": "Illustration d'une plateforme de collaboration simple et accessible"
+      "body": "Découvrez une solution intuitive et accessible, conçue pour tous les agents publics et leurs partenaires, et bien plus encore."
     },
     "slide2": {
       "title": "Organisez des appels de groupe sans limite",
-      "body": "Réunions sans limite de temps, avec une communication fluide et de haute qualité, quel que soit le nombre.",
-      "imgAlt": "Image d'une réunion virtuelle avec plusieurs participants collaborant efficacement"
+      "body": "Réunions sans limite de temps, avec une communication fluide et de haute qualité, quel que soit le nombre."
     },
     "slide3": {
       "title": "Transformez vos réunions avec l'IA",
-      "body": "Obtenez des transcriptions précises et actionnables, pour booster votre productivité. Fonctionnalité en beta, essayez-la maintenant !",
-      "imgAlt": "Illustration de prise de notes assistée par l'IA dans une réunion virtuelle"
+      "body": "Obtenez des transcriptions précises et actionnables, pour booster votre productivité. Fonctionnalité en beta, essayez-la maintenant !"
     }
   }
 }

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

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "Vous avez quitté la réunion",
-      "duplicateIdentity": "Vous avez rejoint la réunion depuis un autre appareil"
+      "duplicateIdentity": "Vous avez rejoint la réunion depuis un autre appareil",
+      "participantRemoved": "Vous avez été exclu de l'appel par un administrateur"
     },
     "home": "Retourner à l'accueil",
     "back": "Réintégrer la réunion"
@@ -15,7 +16,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 +40,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",
@@ -85,6 +86,7 @@
     "heading": "Votre réunion est prête",
     "description": "Partagez ces informations avec les personnes que vous souhaitez inviter à la réunion.",
     "permissions": "Les personnes disposant de ce lien n'ont pas besoin de votre autorisation pour rejoindre cette réunion.",
+    "closeDialog": "Fermer la fenêtre modale",
     "phone": {
       "call": "Appelez le :",
       "pinCode": "Code :"
@@ -191,7 +193,9 @@
     "leave": "Quitter",
     "participants": {
       "open": "Masquer les participants",
-      "closed": "Afficher les participants"
+      "closed": "Afficher les participants",
+      "count_one": "{{count}} participant",
+      "count_other": "{{count}} participants"
     },
     "tools": {
       "open": "Masquer les outils de réunion",
@@ -205,7 +209,18 @@
     "reactions": {
       "button": "Envoyer une réaction",
       "send": "Envoyer la réaction {{emoji}}",
-      "you": "vous"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "vous",
+      "emojis": {
+        "thumbs-up": "pouce levé",
+        "thumbs-down": "pouce baissé",
+        "clapping-hands": "applaudissements",
+        "red-heart": "cœur",
+        "face-with-tears-of-joy": "visage qui rit",
+        "face-with-open-mouth": "visage étonné",
+        "party-popper": "confettis",
+        "folded-hands": "mains jointes"
+      }
     }
   },
   "options": {
@@ -216,7 +231,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 +245,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 +290,11 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Panneau latéral",
+    "backToTools": "Retour aux outils de réunion",
     "heading": {
       "participants": "Participants",
-      "effects": "Effets",
+      "effects": "Arrière-plans et effets",
       "chat": "Messages dans l'appel",
       "transcript": "Transcrire",
       "screenRecording": "Enregistrer",
@@ -543,7 +579,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/fr/settings.json

@@ -108,12 +108,18 @@
     "label": "Langue de l'application"
   },
   "settingsButtonLabel": "Paramètres",
+  "accessibility": {
+    "announceReactions": {
+      "label": "Vocaliser les réactions"
+    }
+  },
   "tabs": {
     "account": "Profil",
     "audio": "Audio",
     "video": "Vidéo",
     "general": "Général",
     "notifications": "Notifications",
+    "accessibility": "Accessibilité",
     "transcription": "Transcription"
   }
 }

src/frontend/src/locales/nl/home.json

@@ -44,18 +44,15 @@
     },
     "slide1": {
       "title": "Stap over op eenvoud. Probeer ons nu!",
-      "body": "Ontdek een intuïtieve en toegankelijke oplossing, ontworpen voor alle openbare partijen, hun partners en nog veel meer.",
-      "imgAlt": "Illustratie van een gebruiksvriendelijk en toegankelijk samenwerkingsplatform"
+      "body": "Ontdek een intuïtieve en toegankelijke oplossing, ontworpen voor alle openbare partijen, hun partners en nog veel meer."
     },
     "slide2": {
       "title": "Houdt groepsgesprekken zonder limieten",
-      "body": "Vergaderingen van onbeperkte lengte, met soepele en hoogwaardige communicatie, ongeacht de groepsgrootte.",
-      "imgAlt": "Afbeelding van een virtuele ontmoeting met meerdere deelnemers die naadloos samenwerken"
+      "body": "Vergaderingen van onbeperkte lengte, met soepele en hoogwaardige communicatie, ongeacht de groepsgrootte."
     },
     "slide3": {
       "title": "Transformeer uw vergaderingen met AI",
-      "body": "Krijg nauwkeurige en bruikbare transcripties om uw productiviteit te stimuleren. Deze mogelijkheid is in bèta, probeer het nu!",
-      "imgAlt": "Illustratie van AI-aangedreven notitie in een virtuele vergadering"
+      "body": "Krijg nauwkeurige en bruikbare transcripties om uw productiviteit te stimuleren. Deze mogelijkheid is in bèta, probeer het nu!"
     }
   }
 }

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

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "Je hebt de vergadering verlaten",
-      "duplicateIdentity": "U heeft de vergadering via een ander apparaat geopend"
+      "duplicateIdentity": "U heeft de vergadering via een ander apparaat geopend",
+      "participantRemoved": "U bent door een beheerder uit het gesprek verwijderd"
     },
     "home": "Keer terug naar het hoofdscherm",
     "back": "Sluit weer bij de vergadering aan"
@@ -85,6 +86,7 @@
     "heading": "Uw vergadering is klaar",
     "description": "Deel deze link met mensen die u wilt uitnodigen voor de vergadering.",
     "permissions": "Mensen met deze link hebben uw toestemming niet nodig om deel te nemen aan deze vergadering.",
+    "closeDialog": "Sluit het dialoogvenster",
     "phone": {
       "call": "Bel:",
       "pinCode": "Code:"
@@ -191,7 +193,9 @@
     "leave": "Vertrekken",
     "participants": {
       "open": "Verberg iedereen",
-      "closed": "Toon iedereen"
+      "closed": "Toon iedereen",
+      "count_one": "{{count}} deelnemer",
+      "count_other": "{{count}} deelnemers"
     },
     "tools": {
       "open": "Meer tools verbergen",
@@ -205,7 +209,18 @@
     "reactions": {
       "button": "Stuur reactie",
       "send": "Stuur reactie {{emoji}}",
-      "you": "U"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "U",
+      "emojis": {
+        "thumbs-up": "duim omhoog",
+        "thumbs-down": "duim omlaag",
+        "clapping-hands": "applaudisserende handen",
+        "red-heart": "rood hart",
+        "face-with-tears-of-joy": "gezicht met tranen van vreugde",
+        "face-with-open-mouth": "verrast gezicht",
+        "party-popper": "feestknaller",
+        "folded-hands": "gevouwen handen"
+      }
     }
   },
   "options": {
@@ -233,15 +248,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 +290,8 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Zijbalk",
+    "backToTools": "Terug naar vergadertools",
     "heading": {
       "participants": "Deelnemers",
       "effects": "Effecten",

src/frontend/src/primitives/Icon.tsx

@@ -0,0 +1,71 @@
+import { cva, RecipeVariantProps } from '@/styled-system/css'
+import { ComponentPropsWithoutRef } from 'react'
+
+const iconRecipe = cva({
+  base: {
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    display: 'inline-block',
+    lineHeight: 1,
+    textTransform: 'none',
+    letterSpacing: 'normal',
+    wordWrap: 'normal',
+    whiteSpace: 'nowrap',
+    direction: 'ltr',
+  },
+  variants: {
+    type: {
+      icons: {
+        fontFamily: 'Material Icons Outlined',
+        webkitFontSmoothing: 'antialiased',
+        mozOsxFontSmoothing: 'grayscale',
+        textRendering: 'optimizeLegibility',
+        fontFeatureSettings: '"liga"',
+      },
+      symbols: {
+        fontFamily: 'Material Symbols Outlined Variable',
+      },
+    },
+    size: {
+      sm: {
+        fontSize: '18px',
+      },
+      md: {
+        fontSize: '24px',
+      },
+      lg: {
+        fontSize: '32px',
+      },
+      xl: {
+        fontSize: '40px',
+      },
+    },
+  },
+  defaultVariants: {
+    type: 'icons',
+    size: 'md',
+  },
+})
+
+export type IconRecipeProps = RecipeVariantProps<typeof iconRecipe>
+
+export type IconProps = IconRecipeProps &
+  ComponentPropsWithoutRef<'span'> & {
+    name: string
+  }
+
+export const Icon = ({ name, ...props }: IconProps) => {
+  const [variantProps, componentProps] = iconRecipe.splitVariantProps(props)
+  const { className, ...remainingComponentProps } = componentProps
+
+  return (
+    <span
+      translate="no"
+      aria-hidden="true"
+      className={[iconRecipe(variantProps), className].join(' ')}
+      {...remainingComponentProps}
+    >
+      {name}
+    </span>
+  )
+}

src/frontend/src/primitives/Popover.tsx

@@ -70,6 +70,9 @@ export const Popover = ({
   children,
   variant = 'light',
   withArrow = true,
+  isOpen,
+  defaultOpen,
+  onOpenChange,
   ...dialogProps
 }: {
   children: [
@@ -80,10 +83,17 @@ export const Popover = ({
   ]
   variant?: 'dark' | 'light'
   withArrow?: boolean
+  isOpen?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
 } & Omit<DialogProps, 'children'>) => {
   const [trigger, popoverContent] = children
   return (
-    <DialogTrigger>
+    <DialogTrigger
+      isOpen={isOpen}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
       {trigger}
       <StyledPopover>
         {withArrow && (

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
+        )}
+    </>
+  )
+}

src/frontend/src/primitives/buttonRecipe.ts

@@ -112,7 +112,8 @@ export const buttonRecipe = cva({
         },
         transition: 'box-shadow 0.2s ease-in-out',
         '&[data-selected]': {
-          boxShadow: 'token(colors.primary.400) 0px 0px 0px 3px inset',
+          boxShadow:
+            '0 0 0 3px token(colors.primary.600) inset, 0 0 0 5px white inset',
         },
         '&[data-disabled]': {
           backgroundColor: 'greyscale.100',

src/frontend/src/primitives/index.ts

@@ -30,3 +30,4 @@ export { Ul } from './Ul'
 export { VerticallyOffCenter } from './VerticallyOffCenter'
 export { TextArea } from './TextArea'
 export { Switch } from './Switch'
+export { Icon } from './Icon'

src/frontend/src/routes.ts

@@ -43,11 +43,6 @@ export const routes: Record<
   feedback: {
     name: 'feedback',
     path: '/feedback',
-    to: (params: { duplicateIdentity?: false }) =>
-      '/feedback' +
-      (params.duplicateIdentity
-        ? `?duplicateIdentity=${params?.duplicateIdentity}`
-        : ''),
     Component: FeedbackRoute,
   },
   legalTerms: {

src/frontend/src/stores/accessibility.ts

@@ -0,0 +1,76 @@
+import { proxy, subscribe } from 'valtio'
+import { STORAGE_KEYS } from '@/utils/storageKeys'
+import { deserializeToProxyMap } from '@/utils/valtio'
+
+type AccessibilityState = {
+  announceReactions: boolean
+}
+
+const DEFAULT_STATE: AccessibilityState = {
+  announceReactions: false,
+}
+
+function getAccessibilityState(): AccessibilityState {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEYS.ACCESSIBILITY)
+    if (stored) {
+      const parsed = JSON.parse(stored)
+      return {
+        ...DEFAULT_STATE,
+        ...parsed,
+        announceReactions:
+          typeof parsed.announceReactions === 'boolean'
+            ? parsed.announceReactions
+            : DEFAULT_STATE.announceReactions,
+      }
+    }
+
+    // Legacy migration: if the setting was previously stored in notifications
+    const legacy = localStorage.getItem(STORAGE_KEYS.NOTIFICATIONS)
+    if (legacy) {
+      try {
+        const parsedLegacy = JSON.parse(legacy, deserializeToProxyMap)
+        if (typeof parsedLegacy?.announceReactions === 'boolean') {
+          const migratedState: AccessibilityState = {
+            ...DEFAULT_STATE,
+            ...parsedLegacy,
+            announceReactions: parsedLegacy.announceReactions,
+          }
+
+          try {
+            localStorage.setItem(
+              STORAGE_KEYS.ACCESSIBILITY,
+              JSON.stringify(migratedState)
+            )
+            localStorage.removeItem(STORAGE_KEYS.NOTIFICATIONS)
+          } catch {
+            // ignore persistence issues during migration
+          }
+
+          return migratedState
+        }
+      } catch {
+        // ignore legacy parsing issues
+      }
+    }
+
+    return DEFAULT_STATE
+  } catch (error: unknown) {
+    console.error(
+      '[AccessibilityStore] Failed to parse stored settings:',
+      error
+    )
+    return DEFAULT_STATE
+  }
+}
+
+export const accessibilityStore = proxy<AccessibilityState>(
+  getAccessibilityState()
+)
+
+subscribe(accessibilityStore, () => {
+  localStorage.setItem(
+    STORAGE_KEYS.ACCESSIBILITY,
+    JSON.stringify(accessibilityStore)
+  )
+})

src/frontend/src/stores/layout.ts

@@ -10,6 +10,7 @@ type State = {
   showSubtitles: boolean
   activePanelId: PanelId | null
   activeSubPanelId: SubPanelId | null
+  genericRef: HTMLElement | null
 }
 
 export const layoutStore = proxy<State>({
@@ -18,4 +19,5 @@ export const layoutStore = proxy<State>({
   showSubtitles: false,
   activePanelId: null,
   activeSubPanelId: null,
+  genericRef: null,
 })

src/frontend/src/styles/a11y.ts

@@ -0,0 +1,14 @@
+import { css } from '@/styled-system/css'
+
+// Reusable visually hidden style for screen-reader-only content
+export const srOnly = css({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+  border: 0,
+})

src/frontend/src/styles/icons.css

@@ -1,27 +0,0 @@
-@import '@fontsource/material-icons-outlined';
-
-.material-icons,
-.material-symbols {
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: 'liga';
-}
-
-.material-icons {
-  font-family: 'Material Icons Outlined';
-}
-
-.material-symbols {
-  font-family: 'Material Symbols Outlined Variable';
-}

src/frontend/src/styles/index.css

@@ -1,5 +1,4 @@
 @import './livekit.css';
-@import './icons.css';
 @layer reset, base, tokens, recipes, utilities;
 html,
 body,
@@ -24,9 +23,20 @@ body,
 }
 
 [data-rac][data-focus-visible]:not(label, .react-aria-Select),
+[data-rac][data-restore-focus-visible]:not(label, .react-aria-Select),
 :is(a, button, input[type='text'], select, textarea):not(
     [data-rac]
-  ):focus-visible {
+  ):focus-visible,
+/* Show focus ring when data-focus-visible is set programmatically (e.g., when restoring focus) */
+[data-focus-visible]:is(a, button, input[type='text'], select, textarea):focus,
+/* Show focus ring when restoring focus on react-aria buttons without overriding its focus state */
+[data-restore-focus-visible]:is(
+    a,
+    button,
+    input[type='text'],
+    select,
+    textarea
+  ):focus {
   outline: 2px solid var(--colors-focus-ring);
   outline-offset: 1px;
 }
@@ -54,3 +64,36 @@ body:has(.lk-video-conference) #crisp-chatbox > * > div[role='button'] {
     transform: translateY(0);
   }
 }
+
+/* Generated using the Advanced installation guidelines from
+ * https://fontsource.org/fonts/material-icons-outlined/install
+ */
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-display: block;
+  font-weight: 400;
+  src: url(@fontsource/material-icons-outlined/files/material-icons-outlined-latin-400-normal.woff2)
+    format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Generated using the Advanced installation guidelines from
+ * https://fontsource.org/fonts/material-symbols-outlined/install
+ */
+/* material-symbols-outlined-latin-wght-normal */
+@font-face {
+  font-family: 'Material Symbols Outlined Variable';
+  font-style: normal;
+  font-display: block;
+  font-weight: 100 700;
+  src: url(@fontsource-variable/material-symbols-outlined/files/material-symbols-outlined-latin-wght-normal.woff2)
+    format('woff2-variations');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}

src/frontend/src/utils/storageKeys.tsx

@@ -4,4 +4,5 @@
 export const STORAGE_KEYS = {
   NOTIFICATIONS: 'app_notification_settings',
   USER_PREFERENCES: 'app_user_preferences',
+  ACCESSIBILITY: 'app_accessibility_settings',
 } as const

src/helm/env.d/dev-keycloak/values.meet.yaml.gotmpl

@@ -267,6 +267,7 @@ agents:
     LIVEKIT_API_KEY: {{ $key }}
     {{- end }}
     {{- end }}
+    ENABLE_SILERO_VAD: "false"
 
   image:
     repository: localhost:5001/meet-agents

src/mail/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mail_mjml",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mail_mjml",
-      "version": "1.2.0",
+      "version": "1.3.0",
       "license": "MIT",
       "dependencies": {
         "@html-to/text-cli": "0.5.4",

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {

src/sdk/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sdk",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sdk",
-      "version": "1.2.0",
+      "version": "1.3.0",
       "license": "ISC",
       "workspaces": [
         "./library",

src/sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdk",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "",
   "license": "ISC",
   "description": "",

src/summary/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "summary"
-version = "1.2.0"
+version = "1.3.0"
 dependencies = [
     "fastapi[standard]>=0.105.0",
     "uvicorn>=0.24.0",