💄(frontend) add minor layout adjustments

Propose minor layout adjustments to ensure the DINUM version with French copywriting does not look visually awkward due to line breaks.
🐛(backend) fix certificates volume mount path for Python 3.13
2026-01-05 17:43:40 +01:00 · 2026-01-05 17:43:37 +01:00
132 changed files with 655 additions and 2691 deletions
@@ -147,14 +147,6 @@ jobs:
        with:
          username: ${{ secrets.DOCKER_HUB_USER }}
          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
-      -
-        name: Run trivy scan
-        uses: numerique-gouv/action-trivy-cache@main
-        continue-on-error: true
-        with:
-          docker-build-args: '-f src/summary/Dockerfile --target production'
-          docker-image-name: '${{ env.DOCKER_CONTAINER_REGISTRY_HOSTNAME }}/${{ env.DOCKER_CONTAINER_REGISTRY_NAMESPACE }}/meet-summary:${{ github.sha }}'
-          docker-context: './src/summary'
      -
        name: Build and push
        uses: docker/build-push-action@v6
@@ -186,14 +178,6 @@ jobs:
        with:
          username: ${{ secrets.DOCKER_HUB_USER }}
          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
-      -
-        name: Run trivy scan
-        uses: numerique-gouv/action-trivy-cache@main
-        continue-on-error: true
-        with:
-          docker-build-args: '-f src/agents/Dockerfile --target production'
-          docker-image-name: '${{ env.DOCKER_CONTAINER_REGISTRY_HOSTNAME }}/${{ env.DOCKER_CONTAINER_REGISTRY_NAMESPACE }}/meet-agents:${{ github.sha }}'
-          docker-context: './src/agents'
      -
        name: Build and push
        uses: docker/build-push-action@v6
@@ -77,9 +77,6 @@ db.sqlite3
 *.iml
 .devcontainer

-# Personal rules/config files
-rules.md
-
 # Egress output
 docker/livekit/out

@@ -8,89 +8,19 @@ and this project adheres to

 ## [Unreleased]

-### Changed
-
- ♿️(frontend) fix form labels and autocomplete wiring #932
- ♿(frontend) improve menu focus management #869
-
-## [1.5.0] - 2026-01-28
-
-### Changed
-
- ♿️(frontend) adjust visual-only tooltip a11y labels #910
- ♿️(frontend) sr pin/unpin announcements with dedicated messages #898
- ♿(frontend) adjust sr announcements for idle disconnect timer #908
- ♿️(frontend) add global screen reader announcer#922
-
-### Fixed
-
- 🔒️(frontend) fix an XSS vulnerability on the recording page #911
-
-## [1.4.0] - 2026-01-25
-
-### Added
-
- ✨(frontend) add configurable redirect for unauthenticated users #904
-### 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
- 🐛(frontend) ensure transcript segments are sorted by their timestamp #899
- 🐛(frontend) scope scrollbar gutter override to video rooms #882
-
-## [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
-
-### Added
-
 - ✨(agent) support Kyutai client for subtitle
+- ✨(frontend) remove the beta badge
 - ✨(all) support starting transcription and recording simultaneously
 - ✨(backend) persist options on a recording
 - ✨(all) support choosing the transcription language
 - ✨(summary) add a download link to the audio/video file
 - ✨(frontend) allow unprivileged users to request a recording
-
-### Changed
-
- 🚸(frontend) remove the beta badge
 - ♻️(summary) extract file handling in a robust service
 - ♻️(all) manage recording state on the backend side

 ## [1.1.0] - 2025-12-22

-### Added
+### Added 

 - ✨(backend) enable user creation via email for external integrations
 - ✨(summary) add Langfuse observability for LLM API calls
@@ -102,6 +32,6 @@ and this project adheres to
 - ♿(frontend) improve accessibility:
 - ♿️(frontend) hover controls, focus, SR #803
 - ♿️(frontend) change ptt keybinding from space to v #813
- ♿(frontend) indicate external link opens in new window on feedback #816
+- ♿(frontend) indicate external link opens in new window on feedback #816 
 - ♿(frontend) fix heading level in modal to maintain semantic hierarchy #815
 - ♿️(frontend) Improve focus management when opening and closing chat #807
@@ -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
+RUN python -m pip install --upgrade pip setuptools

 # Upgrade system packages to install security updates
 RUN apk update && \
@@ -50,9 +50,6 @@ La Suite Meet is fully self-hostable and released under the MIT License, ensurin

 We’re continuously adding new features to enhance your experience, with the latest updates coming soon!

-### 🚀 Major roll out to all French public servants
-
-On the 25th of January 2026, David Amiel, France’s Minister for Civil Service and State Reform, announced the full deployment of Visio—the French government’s dedicated Meet platform—to all public servants. ([Source in French](https://www.latribune.fr/article/la-tribune-dimanche/politique/73157688099661/david-amiel-ministre-delegue-de-la-fonction-publique-nous-allons-sortir-de-la-dependance-aux-outils-americains))

 ## Table of Contents

@@ -89,7 +86,7 @@ We hope to see many more, here is an incomplete list of public La Suite Meet ins
 | [visio.numerique.gouv.fr](https://visio.numerique.gouv.fr/)   | DINUM    | French public agents working for the central administration and the extended public sphere. ProConnect is required to login in or sign up|
 | [visio.suite.anct.gouv.fr](https://visio.suite.anct.gouv.fr/) | ANCT    | French public agents working for the territorial administration and the extended public sphere. ProConnect is required to login in or sign up|
 | [visio.lasuite.coop](https://visio.lasuite.coop/)             | lasuite.coop    | Free and open demo to all. Content and accounts are reset after one month |
-| [mosacloud.cloud](https://mosa.cloud/)                        | mosa.cloud    | Demo instance of mosa.cloud, a dutch company providing services around La Suite apps. |
+| [meet.demo.mosacloud.eu](https://meet.demo.mosacloud.eu/)     | mosa.cloud    | Demo instance of mosa.cloud, a dutch company providing services around La Suite apps. |


 ## Contributing
@@ -3,8 +3,3 @@ redis:
  address: redis:6379
 keys:
  devkey: secret
-
-webhook:
-  api_key: devkey
-  urls:
-      - http://app-dev:8000/api/v1.0/rooms/webhooks-livekit/
@@ -10,7 +10,7 @@ services:
    - env.d/postgresql
    - env.d/common
    volumes:
-    - ./data/databases/backend:/var/lib/postgresql/data
+    - ./data/databases/backend:/var/lib/postgresql/data/pgdata

  redis:
    image: redis:5
@@ -8,7 +8,7 @@
 ### Step 1: Prepare your working environment:

 ```bash
-mkdir -p keycloak/env.d && cd keycloak
+mkdir keycloak/env.d && cd keycloak
 curl -o compose.yaml https://raw.githubusercontent.com/suitenumerique/meet/refs/heads/main/docs/examples/compose/keycloak/compose.yaml
 curl -o env.d/kc_postgresql https://raw.githubusercontent.com/suitenumerique/meet/refs/heads/main/env.d/production.dist/kc_postgresql
 curl -o env.d/keycloak https://raw.githubusercontent.com/suitenumerique/meet/refs/heads/main/env.d/production.dist/keycloak
@@ -89,4 +89,4 @@ Your keycloak instance is now available on https://doc.yourdomain.tld
 #### Step 3: Get Client Credentials

 1. Go to the "Credentials" tab.
-2. Copy the client ID (`meet` in this example) and the client secret.
+2. Copy the client ID (`meet` in this example) and the client secret.
@@ -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/kubernetes.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/k8s.md)

 ## Requirements

@@ -47,7 +47,7 @@ curl -o default.conf.template https://raw.githubusercontent.com/suitenumerique/m

 ## Step 2: Configuration

-Meet configuration is achieved through environment variables. We provide a [detailed description of all variables](../../src/helm/meet/README.md).
+Meet configuration is achieved through environment variables. We provide a [detailed description of all variables](../env.md).

 In this example, we assume the following services:

@@ -129,7 +129,7 @@ The following ports will need to be opened:
 - 7881/tcp - WebRTC ICE over TCP
 - 7882/udp - for WebRTC multiplexing over UDP

-If you are using ufw, enter the following:
+If you are using ufw, enter the follwoing:
 ```
 ufw allow 80/tcp
 ufw allow 443/tcp
@@ -177,15 +177,6 @@ You will need to uncomment the environment and network sections in compose file
 #    external: true
 ```

-#### Caddy Reverse Proxy
-Expose the Frontend port to the host
-```yaml
-frontend:
-  …
-  ports:
-    - "8086:8086"
-```
-
 ## Step 5: Start Meet

 You are ready to start your Meet application !
@@ -207,7 +198,7 @@ Replace `<admin email>` with the email of your admin user and generate a secure

 Your Meet instance is now available on the domain you defined, https://meet.yourdomain.tld.

-The admin interface is available on https://meet.yourdomain.tld/admin with the admin user you just created.
+THe admin interface is available on https://meet.yourdomain.tld/admin with the admin user you just created.

 ## How to upgrade your Meet application

@@ -1,7 +1,7 @@
 APP_NAME="meet-app-summary-dev"
 APP_API_TOKEN="password"

-AWS_STORAGE_BUCKET_NAME="http://meet-media-storage"
+AWS_STORAGE_BUCKET_NAME="meet-media-storage"
 AWS_S3_ENDPOINT_URL="minio:9000"
 AWS_S3_SECURE_ACCESS=false

@@ -20,7 +20,7 @@ DJANGO_EMAIL_FROM=<your email address>
 #DJANGO_EMAIL_USE_SSL=true # A flag to enable or disable SSL for email sending.

 DJANGO_EMAIL_BRAND_NAME="La Suite Numérique" 
-DJANGO_EMAIL_LOGO_IMG="https://${MEET_HOST}/assets/logo-suite-numerique.png"
+DJANGO_EMAIL_LOGO_IMG="https://${meet_HOST}/assets/logo-suite-numerique.png"

 # Backend url
 MEET_BASE_URL="https://${MEET_HOST}"
@@ -31,7 +31,6 @@ 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():
@@ -123,8 +122,9 @@ class MultiUserTranscriber:
        if participant.identity in self._sessions:
            return self._sessions[participant.identity]

-        vad = self.ctx.proc.userdata.get("vad", None)
-        session = AgentSession(vad=vad)
+        session = AgentSession(
+            vad=self.ctx.proc.userdata["vad"],
+        )
        room_io = RoomIO(
            agent_session=session,
            room=self.ctx.room,
@@ -193,8 +193,7 @@ async def handle_transcriber_job_request(job_req: JobRequest) -> None:

 def prewarm(proc: JobProcess):
    """Preload voice activity detection model."""
-    if ENABLE_SILERO_VAD:
-        proc.userdata["vad"] = silero.VAD.load()
+    proc.userdata["vad"] = silero.VAD.load()


 if __name__ == "__main__":
@@ -1,7 +1,7 @@

 [project]
 name = "agents"
-version = "1.5.0"
+version = "1.1.0"
 requires-python = ">=3.12"
 dependencies = [
    "livekit-agents==1.3.10",
@@ -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 SuspiciousOperation, ValidationError
+from django.core.exceptions import ValidationError
 from django.core.validators import validate_email

 import jwt
@@ -28,7 +28,7 @@ from . import authentication, permissions, serializers
 logger = getLogger(__name__)


-class ApplicationViewSet(viewsets.ViewSet):
+class ApplicationViewSet(viewsets.GenericViewSet):
    """API endpoints for application authentication and token generation."""

    @decorators.action(
@@ -93,7 +93,7 @@ class ApplicationViewSet(viewsets.ViewSet):
            )

        try:
-            user = models.User.objects.get(email__iexact=email)
+            user = models.User.objects.get(email=email)
        except models.User.DoesNotExist as e:
            if (
                settings.APPLICATION_ALLOW_USER_CREATION
@@ -123,10 +123,6 @@ class ApplicationViewSet(viewsets.ViewSet):
                )
            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 [])
@@ -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"
-    UserFactory(email="User.Family@example.com")
+    user = UserFactory(email="user@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.family@example.com",
+            "scope": user.email,
        },
        format="json",
    )
@@ -336,9 +336,6 @@ class Base(Configuration):
        "feedback": values.DictValue(
            {}, environ_name="FRONTEND_FEEDBACK", environ_prefix=None
        ),
-        "external_home_url": values.Value(
-            None, environ_name="FRONTEND_EXTERNAL_HOME_URL", environ_prefix=None
-        ),
        "use_french_gov_footer": values.BooleanValue(
            False, environ_name="FRONTEND_USE_FRENCH_GOV_FOOTER", environ_prefix=None
        ),
@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name = "meet"
-version = "1.5.0"
+version = "1.1.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
    "Development Status :: 5 - Production/Stable",
@@ -56,7 +56,7 @@ dependencies = [
    "whitenoise==6.11.0",
    "mozilla-django-oidc==4.0.1",
    "livekit-api==1.0.7",
-    "aiohttp==3.13.3",
+    "aiohttp==3.13.2",
 ]

 [project.urls]
@@ -28,37 +28,3 @@ 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 })
-  },
-})
-```
@@ -6,22 +6,6 @@
    <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>
@@ -1,12 +1,12 @@
 {
  "name": "meet",
-  "version": "1.5.0",
+  "version": "1.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "meet",
-      "version": "1.5.0",
+      "version": "1.1.0",
      "dependencies": {
        "@fontsource-variable/material-symbols-outlined": "5.2.30",
        "@fontsource/material-icons-outlined": "5.2.6",
@@ -1,7 +1,7 @@
 {
  "name": "meet",
  "private": true,
-  "version": "1.5.0",
+  "version": "1.1.0",
  "type": "module",
  "scripts": {
    "dev": "panda codegen && vite",
@@ -17,7 +17,6 @@ export interface ApiConfig {
  feedback: {
    url: string
  }
-  external_home_url?: string
  silence_livekit_debug_logs?: boolean
  is_silent_login_enabled?: boolean
  custom_css_url?: string
@@ -6,7 +6,6 @@ export const BlurOnStrong = () => {
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
@@ -192,7 +192,7 @@ export const IntroSlider = () => {
        <SlideContainer>
          {SLIDES.map((slide, index) => (
            <Slide visible={index == slideIndex} key={index}>
-              <Image src={slide.src} alt="" role="presentation" />
+              <Image src={slide.src} alt={t(`${slide.key}.imgAlt`)} />
              <TextAnimation visible={index == slideIndex}>
                <Heading>{t(`${slide.key}.title`)}</Heading>
                <Body>{t(`${slide.key}.body`)}</Body>
@@ -11,7 +11,7 @@ import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
 import { MoreLink } from '@/features/home/components/MoreLink'
-import { ReactNode, useEffect, useState } from 'react'
+import { ReactNode, useState } from 'react'

 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
@@ -19,7 +19,6 @@ import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePers
 import { useConfig } from '@/api/useConfig'
 import { LoginButton } from '@/components/LoginButton'
 import { ApiRoom } from '@/features/rooms/api/ApiRoom'
-import { LoadingScreen } from '@/components/LoadingScreen'

 const Columns = ({ children }: { children?: ReactNode }) => {
  return (
@@ -156,34 +155,9 @@ export const Home = () => {

  const { mutateAsync: createRoom } = useCreateRoom()
  const [laterRoom, setLaterRoom] = useState<null | ApiRoom>(null)
-  const [redirectFailed, setRedirectFailed] = useState(false)

  const { data } = useConfig()

-  useEffect(() => {
-    const checkSiteAndRedirect = async () => {
-      if (!data?.external_home_url) return
-      if (isLoggedIn === false) {
-        try {
-          await fetch(data.external_home_url, {
-            method: 'HEAD', // Use HEAD to avoid downloading the full page
-            mode: 'no-cors', // Needed for cross-origin requests
-          })
-          window.location.replace(data.external_home_url)
-        } catch (error) {
-          setRedirectFailed(true)
-          console.error('Site is not reachable:', error)
-        }
-      }
-    }
-
-    checkSiteAndRedirect()
-  }, [isLoggedIn, data])
-
-  if (data?.external_home_url && isLoggedIn == false && !redirectFailed) {
-    return <LoadingScreen header={false} footer={false} delay={0} />
-  }
-
  return (
    <UserAware>
      <Screen>
@@ -111,13 +111,15 @@ export const TermsOfServiceRoute = () => {
        ))}

        {/* Article 7 */}
-        <H lvl={2}>{t('articles.article7.title')}</H>
-        <P>{t('articles.article7.content')}</P>
+        <H lvl={2} margin={false}>
+          {t('articles.article7.title')}
+        </H>

        {/* Section 7.1 */}
        <H lvl={3} bold>
          {t('articles.article7.sections.section1.title')}
        </H>
+        <P>{t('articles.article7.sections.section1.content')}</P>
        {ensureArray(
          t('articles.article7.sections.section1.paragraphs', {
            returnObjects: true,
@@ -130,51 +132,16 @@ export const TermsOfServiceRoute = () => {
        <H lvl={3} bold>
          {t('articles.article7.sections.section2.title')}
        </H>
-        {ensureArray(
-          t('articles.article7.sections.section2.paragraphs', {
-            returnObjects: true,
-          })
-        ).map((paragraph, index) => (
-          <P key={index}>{paragraph}</P>
-        ))}
-
-        {/* Section 7.3 */}
-        <H lvl={3} bold>
-          {t('articles.article7.sections.section3.title')}
-        </H>
-        {ensureArray(
-          t('articles.article7.sections.section3.paragraphs', {
-            returnObjects: true,
-          })
-        ).map((paragraph, index) => (
-          <P key={index}>{paragraph}</P>
-        ))}
-
-        {/* Section 7.4 */}
-        <H lvl={3} bold>
-          {t('articles.article7.sections.section4.title')}
-        </H>
-        {ensureArray(
-          t('articles.article7.sections.section4.paragraphs', {
-            returnObjects: true,
-          })
-        ).map((paragraph, index) => (
-          <P key={index}>{paragraph}</P>
-        ))}
-
-        {/* Section 7.5 */}
-        <H lvl={3} bold>
-          {t('articles.article7.sections.section5.title')}
-        </H>
        <P>
-          {t('articles.article7.sections.section5.content')
+          {t('articles.article7.sections.section2.content')
            .split('https://github.com/suitenumerique/meet')[0]
            .replace('https://github.com/suitenumerique/meet', '')}{' '}
          <A href="https://github.com/suitenumerique/meet" color="primary">
            https://github.com/suitenumerique/meet
          </A>
+          {'. '}
          {
-            t('articles.article7.sections.section5.content').split(
+            t('articles.article7.sections.section2.content').split(
              'https://github.com/suitenumerique/meet'
            )[1]
          }
@@ -1,7 +1,7 @@
-import { css } from '@/styled-system/css'
+import { css, cx } from '@/styled-system/css'
 import { HStack } from '@/styled-system/jsx'
 import { Spinner } from '@/primitives/Spinner'
-import { Button, Icon, Text } from '@/primitives'
+import { Button, Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { RecordingStatuses } from '../hooks/useRecordingStatuses'
 import { ReactNode, useEffect, useRef, useState } from 'react'
@@ -42,17 +42,6 @@ export const ControlsButton = ({
 }: ControlsButtonProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: i18nKeyPrefix })

-  // Focus management: focus the primary action button when this side panel opens.
-  const primaryActionRef = useRef<HTMLButtonElement | null>(null)
-
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      if (primaryActionRef.current) {
-        primaryActionRef.current.focus({ preventScroll: true })
-      }
-    })
-  }, [])
-
  const room = useRoomContext()
  const isRoomConnected = room.state == ConnectionState.Connected

@@ -108,7 +97,6 @@ export const ControlsButton = ({
          fullWidth
          onPress={handle}
          isDisabled={isDisabled}
-          ref={primaryActionRef}
        >
          {t('button.stop')}
        </Button>
@@ -141,23 +129,31 @@ export const ControlsButton = ({
          })}
          onPress={() => openSidePanel()}
        >
-          <Icon
-            className={css({
-              color: 'primary.500',
-              marginRight: '1rem',
-            })}
-            name="info"
-          />
+          <span
+            className={cx(
+              'material-icons',
+              css({
+                color: 'primary.500',
+                marginRight: '1rem',
+              })
+            )}
+          >
+            info
+          </span>
          <Text variant={'smNote'}>
            {parseLineBreaks(t('button.anotherModeStarted'))}
          </Text>
-          <Icon
-            className={css({
-              color: 'primary.500',
-              marginLeft: 'auto',
-            })}
-            name="chevron_right"
-          />
+          <span
+            className={cx(
+              'material-icons',
+              css({
+                color: 'primary.500',
+                marginLeft: 'auto',
+              })
+            )}
+          >
+            chevron_right
+          </span>
        </RACButton>
      )}
      <Button
@@ -166,7 +162,6 @@ export const ControlsButton = ({
        onPress={handle}
        isDisabled={isDisabled}
        size="compact"
-        ref={primaryActionRef}
      >
        {t('button.start')}
      </Button>
@@ -1,4 +1,4 @@
-import { H, Text, Icon } from '@/primitives'
+import { H, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { LoginButton } from '@/components/LoginButton'
 import { HStack } from '@/styled-system/jsx'
@@ -24,7 +24,9 @@ export const LoginPrompt = ({ heading, body }: LoginPromptProps) => {
      })}
    >
      <HStack justify="start" alignItems="center" marginBottom="0.5rem">
-        <Icon type="symbols" name="login" />
+        <span className="material-symbols" aria-hidden={true}>
+          login
+        </span>
        <H lvl={3} margin={false} padding={false}>
          {heading}
        </H>
@@ -1,6 +1,6 @@
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
-import { useMemo, useRef, useEffect } from 'react'
+import { useMemo } from 'react'
 import { Text } from '@/primitives'
 import {
  RecordingMode,
@@ -13,7 +13,6 @@ import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useRoomMetadata } from '../hooks/useRoomMetadata'
 import { RecordingStatusIcon } from './RecordingStatusIcon'
 import { useIsRecording } from '@livekit/components-react'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'

 export const RecordingStateToast = () => {
  const { t } = useTranslation('rooms', {
@@ -22,9 +21,6 @@ export const RecordingStateToast = () => {

  const { openTranscript, openScreenRecording } = useSidePanel()

-  const lastKeyRef = useRef('')
-  const announce = useScreenReaderAnnounce()
-
  const hasTranscriptAccess = useHasRecordingAccess(
    RecordingMode.Transcript,
    FeatureFlags.Transcript
@@ -71,16 +67,6 @@ export const RecordingStateToast = () => {
    return `${metadata.recording_mode}.${status}`
  }, [metadata, isStarted, isStarting, isRecording])

-  // Update screen reader message only when the key actually changes
-  // This prevents duplicate announcements caused by re-renders
-  useEffect(() => {
-    if (key && key !== lastKeyRef.current) {
-      lastKeyRef.current = key
-      const message = t(key)
-      announce(message)
-    }
-  }, [announce, key, t])
-
  if (!key) return null

  const hasScreenRecordingAccessAndActive =
@@ -88,65 +74,61 @@ export const RecordingStateToast = () => {
  const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess

  return (
-    <>
-      {/* Visual banner (without aria-live to avoid duplicate announcements) */}
-      <div
-        className={css({
-          display: 'flex',
-          position: 'fixed',
-          top: '10px',
-          left: '10px',
-          paddingY: '0.25rem',
-          paddingX: '0.75rem 0.75rem',
-          backgroundColor: 'danger.700',
-          borderColor: 'white',
-          border: '1px solid',
-          color: 'white',
-          borderRadius: '4px',
-          gap: '0.5rem',
-        })}
-      >
-        <RecordingStatusIcon
-          isStarted={isStarted}
-          isTranscriptActive={isTranscriptActive}
-        />
+    <div
+      className={css({
+        display: 'flex',
+        position: 'fixed',
+        top: '10px',
+        left: '10px',
+        paddingY: '0.25rem',
+        paddingX: '0.75rem 0.75rem',
+        backgroundColor: 'danger.700',
+        borderColor: 'white',
+        border: '1px solid',
+        color: 'white',
+        borderRadius: '4px',
+        gap: '0.5rem',
+      })}
+    >
+      <RecordingStatusIcon
+        isStarted={isStarted}
+        isTranscriptActive={isTranscriptActive}
+      />

-        {!hasScreenRecordingAccessAndActive &&
-          !hasTranscriptAccessAndActive && (
-            <Text
-              variant={'sm'}
-              className={css({
-                fontWeight: '500 !important',
-              })}
-            >
-              {t(key)}
-            </Text>
-          )}
-        {hasScreenRecordingAccessAndActive && (
-          <RACButton
-            onPress={openScreenRecording}
-            className={css({
-              textStyle: 'sm !important',
-              fontWeight: '500 !important',
-              cursor: 'pointer',
-            })}
-          >
-            {t(key)}
-          </RACButton>
-        )}
-        {hasTranscriptAccessAndActive && (
-          <RACButton
-            onPress={openTranscript}
-            className={css({
-              textStyle: 'sm !important',
-              fontWeight: '500 !important',
-              cursor: 'pointer',
-            })}
-          >
-            {t(key)}
-          </RACButton>
-        )}
-      </div>
-    </>
+      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
+        <Text
+          variant={'sm'}
+          className={css({
+            fontWeight: '500 !important',
+          })}
+        >
+          {t(key)}
+        </Text>
+      )}
+      {hasScreenRecordingAccessAndActive && (
+        <RACButton
+          onPress={openScreenRecording}
+          className={css({
+            textStyle: 'sm !important',
+            fontWeight: '500 !important',
+            cursor: 'pointer',
+          })}
+        >
+          {t(key)}
+        </RACButton>
+      )}
+      {hasTranscriptAccessAndActive && (
+        <RACButton
+          onPress={openTranscript}
+          className={css({
+            textStyle: 'sm !important',
+            fontWeight: '500 !important',
+            cursor: 'pointer',
+          })}
+        >
+          {t(key)}
+        </RACButton>
+      )}
+    </div>
  )
 }
@@ -1,5 +1,4 @@
 import { Spinner } from '@/primitives/Spinner'
-import { Icon } from '@/primitives'

 interface RecordingStatusIconProps {
  isStarted: boolean
@@ -15,8 +14,8 @@ export const RecordingStatusIcon = ({
  }

  if (isTranscriptActive) {
-    return <Icon type="symbols" name="speech_to_text" />
+    return <span className="material-symbols">speech_to_text</span>
  }

-  return <Icon type="symbols" name="screen_record" />
+  return <span className="material-symbols">screen_record</span>
 }
@@ -1,4 +1,4 @@
-import { Button, Icon, H, Text } from '@/primitives'
+import { Button, 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">
-        <Icon type="symbols" name="person_raised_hand" />
+        <span className="material-symbols">person_raised_hand</span>
        <H lvl={3} margin={false} padding={false}>
          {heading}
        </H>
@@ -1,6 +1,5 @@
 import { css } from '@/styled-system/css'
 import { ReactNode } from 'react'
-import { Icon } from '@/primitives'

 type RowPosition = 'first' | 'middle' | 'last' | 'single'

@@ -46,7 +45,7 @@ export const RowWrapper = ({
        })}
      >
        {/*  fixme - doesn't handle properly material-symbols  */}
-        <Icon name={iconName} />
+        <span className="material-icons">{iconName}</span>
      </div>
      <div
        className={css({
@@ -5,6 +5,7 @@ import { useRoomId } from '@/features/rooms/livekit/hooks/useRoomId'
 import { useRoomContext } from '@livekit/components-react'
 import {
  RecordingMode,
+  useHasFeatureWithoutAdminRights,
  useHumanizeRecordingMaxDuration,
  useRecordingStatuses,
 } from '@/features/recording'
@@ -18,6 +19,7 @@ import {
 } from '@/features/notifications'
 import posthog from 'posthog-js'
 import { useConfig } from '@/api/useConfig'
+import { FeatureFlags } from '@/features/analytics/enums'
 import { NoAccessView } from './NoAccessView'
 import { ControlsButton } from './ControlsButton'
 import { RowWrapper } from './RowWrapper'
@@ -26,7 +28,6 @@ import { Checkbox } from '@/primitives/Checkbox'
 import { useTranscriptionLanguage } from '@/features/settings'
 import { useMutateRecording } from '../hooks/useMutateRecording'
 import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
-import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner.ts'

 export const ScreenRecordingSidePanel = () => {
  const { data } = useConfig()
@@ -37,7 +38,10 @@ export const ScreenRecordingSidePanel = () => {

  const [includeTranscript, setIncludeTranscript] = useState(false)

-  const isAdminOrOwner = useIsAdminOrOwner()
+  const hasFeatureWithoutAdminRights = useHasFeatureWithoutAdminRights(
+    RecordingMode.ScreenRecording,
+    FeatureFlags.ScreenRecording
+  )

  const { notifyParticipants } = useNotifyParticipants()
  const { selectedLanguageKey, isLanguageSetToAuto } =
@@ -94,17 +98,14 @@ export const ScreenRecordingSidePanel = () => {
        await notifyParticipants({
          type: NotificationType.ScreenRecordingStarted,
        })
-        posthog.capture('screen-recording-started', {
-          includeTranscript: includeTranscript,
-          language: selectedLanguageKey,
-        })
+        posthog.capture('screen-recording-started', {})
      }
    } catch (error) {
      console.error('Failed to handle recording:', error)
    }
  }

-  if (!isAdminOrOwner) {
+  if (hasFeatureWithoutAdminRights) {
    return (
      <NoAccessView
        i18nKeyPrefix={keyPrefix}
@@ -145,7 +146,7 @@ export const ScreenRecordingSidePanel = () => {
          },
        })}
      />
-      <VStack gap={0} marginBottom={15}>
+      <VStack gap={0} marginBottom={30}>
        <H lvl={1} margin={'sm'} fullWidth>
          {t('heading')}
        </H>
@@ -162,7 +163,7 @@ export const ScreenRecordingSidePanel = () => {
          )}
        </Text>
      </VStack>
-      <VStack gap={0} marginBottom={25}>
+      <VStack gap={0} marginBottom={40}>
        <RowWrapper iconName="cloud_download" position="first">
          <Text variant="sm">{t('details.destination')}</Text>
        </RowWrapper>
@@ -117,10 +117,7 @@ export const TranscriptSidePanel = () => {
        await notifyParticipants({
          type: NotificationType.TranscriptionStarted,
        })
-        posthog.capture('transcript-started', {
-          includeScreenRecording: includeScreenRecording,
-          language: selectedLanguageKey,
-        })
+        posthog.capture('transcript-started', {})
      }
    } catch (error) {
      console.error('Failed to handle transcript:', error)
@@ -181,7 +178,7 @@ export const TranscriptSidePanel = () => {
          },
        })}
      />
-      <VStack gap={0} marginBottom={15}>
+      <VStack gap={0} marginBottom={30}>
        <H lvl={1} margin={'sm'}>
          {t('heading')}
        </H>
@@ -198,7 +195,7 @@ export const TranscriptSidePanel = () => {
          )}
        </Text>
      </VStack>
-      <VStack gap={0} marginBottom={25}>
+      <VStack gap={0} marginBottom={40}>
        <RowWrapper iconName="article" position="first">
          <Text variant="sm">
            {data?.transcription_destination ? (
@@ -11,7 +11,6 @@ export const useHumanizeRecordingMaxDuration = () => {

    return humanizeDuration(data?.recording?.max_duration, {
      language: i18n.language,
-      delimiter: ' ',
    })
  }, [data])
 }
@@ -104,12 +104,14 @@ export const RecordingDownload = () => {
              {t('success.title')}
            </H>
            <Text centered margin="md" wrap={'balance'}>
-              <span>
-                {t('success.body', {
-                  room: data.room.name,
-                  created_at: formatDate(data.created_at, 'YYYY-MM-DD HH:mm'),
-                })}
-              </span>
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: t('success.body', {
+                    room: data.room.name,
+                    created_at: formatDate(data.created_at, 'YYYY-MM-DD HH:mm'),
+                  }),
+                }}
+              />
              <span>
                {configData?.recording?.expiration_days && (
                  <>
@@ -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,20 +228,10 @@ export const Conference = ({
            posthog.captureException(e)
          }}
          onDisconnected={(e) => {
-            switch (e) {
-              case DisconnectReason.CLIENT_INITIATED:
-                navigateTo('feedback')
-                return
-              case DisconnectReason.DUPLICATE_IDENTITY:
-              case DisconnectReason.PARTICIPANT_REMOVED:
-                navigateTo(
-                  'feedback',
-                  {},
-                  {
-                    state: { reason: e },
-                  }
-                )
-                return
+            if (e == DisconnectReason.CLIENT_INITIATED) {
+              navigateTo('feedback', { duplicateIdentity: false })
+            } else if (e == DisconnectReason.DUPLICATE_IDENTITY) {
+              navigateTo('feedback', { duplicateIdentity: true })
            }
          }}
          onMediaDeviceFailure={(e, kind) => {
@@ -112,8 +112,8 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                    square
                    size={'sm'}
                    onPress={copyRoomUrlToClipboard}
-                    aria-label={isRoomUrlCopied ? t('copied') : t('copyUrl')}
-                    tooltip={isRoomUrlCopied ? t('copied') : t('copyUrl')}
+                    aria-label={t('copyUrl')}
+                    tooltip={t('copyUrl')}
                  >
                    {isRoomUrlCopied ? (
                      <RiCheckLine aria-hidden="true" />
@@ -138,12 +138,11 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                  {formatPinCode(roomData?.pin_code)}
                </Text>
              </div>
-
              <Button
                variant={isCopied ? 'success' : 'secondaryText'}
                size="sm"
                fullWidth
-                aria-label={isCopied ? t('copied') : t('copy')}
+                aria-label={t('copy')}
                style={{
                  justifyContent: 'start',
                }}
@@ -174,7 +173,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
            <Button
              variant={isCopied ? 'success' : 'tertiary'}
              fullWidth
-              aria-label={isCopied ? t('copied') : t('copy')}
+              aria-label={t('copy')}
              onPress={copyRoomToClipboard}
              data-attr="share-dialog-copy"
            >
@@ -446,14 +446,16 @@ export const Join = ({
                type="text"
                onChange={saveUsername}
                label={t('usernameLabel')}
-                id="input-name"
+                aria-label={t('usernameLabel')}
                defaultValue={username}
                validate={(value) => !value && t('errors.usernameEmpty')}
                wrapperProps={{
                  noMargin: true,
                  fullWidth: true,
                }}
-                autoComplete="name"
+                labelProps={{
+                  center: true,
+                }}
                maxLength={50}
              />
            </VStack>
@@ -10,16 +10,9 @@ 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()

@@ -45,29 +38,6 @@ 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"
@@ -5,7 +5,6 @@ import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 import { useIsAdminOrOwner } from '../hooks/useIsAdminOrOwner'
 import { useSidePanel } from '../hooks/useSidePanel'
-import { useSidePanelTriggerRef } from '../hooks/useSidePanelTriggerRef'

 export const AdminToggle = ({
  variant = 'primaryTextDark',
@@ -16,10 +15,9 @@ export const AdminToggle = ({

  const { isAdminOpen, toggleAdmin } = useSidePanel()
  const tooltipLabel = isAdminOpen ? 'open' : 'closed'
-  const setAdminTriggerRef = useSidePanelTriggerRef('admin')

  const hasAdminAccess = useIsAdminOrOwner()
-  if (!hasAdminAccess) return null
+  if (!hasAdminAccess) return

  return (
    <div
@@ -34,7 +32,6 @@ export const AdminToggle = ({
        aria-label={t(tooltipLabel)}
        tooltip={t(tooltipLabel)}
        isSelected={isAdminOpen}
-        ref={setAdminTriggerRef}
        onPress={(e) => {
          toggleAdmin()
          onPress?.(e)
@@ -9,16 +9,9 @@ import { useRoomData } from '../hooks/useRoomData'
 import { formatPinCode } from '../../utils/telephony'
 import { useTelephony } from '../hooks/useTelephony'
 import { useCopyRoomToClipboard } from '../hooks/useCopyRoomToClipboard'
-import { useSidePanel } from '../hooks/useSidePanel'
-import { useRestoreFocus } from '@/hooks/useRestoreFocus'
-import { useSidePanelRef } from '../hooks/useSidePanelRef'
-import { useSidePanelTriggers } from '../hooks/useSidePanelTriggers'

 export const Info = () => {
  const { t } = useTranslation('rooms', { keyPrefix: 'info' })
-  const { isInfoOpen } = useSidePanel()
-  const panelRef = useSidePanelRef()
-  const { getTrigger } = useSidePanelTriggers()

  const data = useRoomData()
  const roomUrl = getRouteUrl('room', data?.slug)
@@ -31,27 +24,6 @@ export const Info = () => {

  const { isCopied, copyRoomToClipboard } = useCopyRoomToClipboard(data)

-  // Restore focus to the element that opened the Info panel
-  useRestoreFocus(isInfoOpen, {
-    resolveTrigger: (activeEl) => getTrigger('info') ?? activeEl,
-    // Focus the first focusable element when the panel opens
-    onOpened: () => {
-      requestAnimationFrame(() => {
-        const panel = panelRef.current
-        if (panel) {
-          const firstButton = panel.querySelector<HTMLElement>(
-            '[data-attr="copy-info-sidepanel"]'
-          )
-          if (firstButton) {
-            firstButton.focus({ preventScroll: true })
-          }
-        }
-      })
-    },
-    restoreFocusRaf: true,
-    preventScroll: true,
-  })
-
  return (
    <Div
      display="flex"
@@ -99,7 +71,7 @@ export const Info = () => {
          variant={isCopied ? 'success' : 'tertiaryText'}
          aria-label={t('roomInformation.button.ariaLabel')}
          onPress={copyRoomToClipboard}
-          data-attr="copy-info-sidepanel"
+          data-attr="copy-info-sidepannel"
          style={{
            marginLeft: '-8px',
          }}
@@ -1,26 +1,21 @@
-import { Button, Dialog, H, P, ScreenReaderAnnouncer } from '@/primitives'
+import { Button, Dialog, H, P } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
 import { useSnapshot } from 'valtio'
 import { connectionObserverStore } from '@/stores/connectionObserver'
 import { HStack } from '@/styled-system/jsx'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { navigateTo } from '@/navigation/navigateTo'
 import humanizeDuration from 'humanize-duration'
 import i18n from 'i18next'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'

 const IDLE_DISCONNECT_TIMEOUT_MS = 120000 // 2 minutes
-const COUNTDOWN_ANNOUNCEMENT_SECONDS = [90, 60, 30]
-const FINAL_COUNTDOWN_SECONDS = 10

 export const IsIdleDisconnectModal = () => {
  const connectionObserverSnap = useSnapshot(connectionObserverStore)
  const [timeRemaining, setTimeRemaining] = useState(IDLE_DISCONNECT_TIMEOUT_MS)
-  const lastAnnouncementRef = useRef<number | null>(null)

  const { t } = useTranslation('rooms', { keyPrefix: 'isIdleDisconnectModal' })
-  const announce = useScreenReaderAnnounce()

  useEffect(() => {
    if (connectionObserverSnap.isIdleDisconnectModalOpen) {
@@ -40,42 +35,10 @@ export const IsIdleDisconnectModal = () => {
    }
  }, [connectionObserverSnap.isIdleDisconnectModalOpen])

-  useEffect(() => {
-    if (!connectionObserverSnap.isIdleDisconnectModalOpen) {
-      lastAnnouncementRef.current = null
-    }
-  }, [connectionObserverSnap.isIdleDisconnectModalOpen])
-
-  const remainingSeconds = Math.floor(timeRemaining / 1000)
-  const minutes = Math.floor(remainingSeconds / 60)
-  const seconds = remainingSeconds % 60
+  const minutes = Math.floor(timeRemaining / 1000 / 60)
+  const seconds = (timeRemaining / 1000) % 60
  const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`

-  useEffect(() => {
-    if (!connectionObserverSnap.isIdleDisconnectModalOpen) return
-
-    const shouldAnnounce =
-      COUNTDOWN_ANNOUNCEMENT_SECONDS.includes(remainingSeconds) ||
-      remainingSeconds <= FINAL_COUNTDOWN_SECONDS
-
-    if (shouldAnnounce && remainingSeconds !== lastAnnouncementRef.current) {
-      lastAnnouncementRef.current = remainingSeconds
-      const message = t('countdownAnnouncement', {
-        duration: humanizeDuration(remainingSeconds * 1000, {
-          language: i18n.language,
-          round: false,
-          largest: 2,
-        }),
-      })
-      announce(message, 'assertive', 'idle')
-    }
-  }, [
-    announce,
-    connectionObserverSnap.isIdleDisconnectModalOpen,
-    remainingSeconds,
-    t,
-  ])
-
  return (
    <Dialog
      isOpen={connectionObserverSnap.isIdleDisconnectModalOpen}
@@ -89,7 +52,6 @@ export const IsIdleDisconnectModal = () => {
      {({ close }) => {
        return (
          <div>
-            <ScreenReaderAnnouncer channel="idle" />
            <div
              className={css({
                height: '50px',
@@ -103,7 +65,6 @@ export const IsIdleDisconnectModal = () => {
                color: 'blue.800',
                margin: 'auto',
              })}
-              aria-hidden="true"
            >
              {formattedTime}
            </div>
@@ -117,9 +117,7 @@ export const ParticipantTile: (
    'aria-label': t('containerLabel', { name: participantName }),
    onFocus: (event: React.FocusEvent<HTMLDivElement>) => {
      elementProps.onFocus?.(event)
-      const target = event.target as HTMLElement | null
-      const isFocusVisible = !!target?.matches?.(':focus-visible')
-      setHasKeyboardFocus(isFocusVisible)
+      setHasKeyboardFocus(true)
    },
    onBlur: (event: React.FocusEvent<HTMLDivElement>) => {
      elementProps.onBlur?.(event)
@@ -5,10 +5,6 @@ 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'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'

 export const ANIMATION_DURATION = 3000
 export const ANIMATION_DISTANCE = 300
@@ -144,41 +140,11 @@ export function ReactionPortal({
  )
 }

-export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
-  const { announceReactions } = useSnapshot(accessibilityStore)
-  const [lastAnnouncedId, setLastAnnouncedId] = useState<number | null>(null)
-  const announce = useScreenReaderAnnounce()
-
-  const latestReaction =
-    reactions.length > 0 ? reactions[reactions.length - 1] : undefined
-
-  useEffect(() => {
-    if (!announceReactions) {
-      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' })
-    announce(t('announce', { name: participantName, emoji: emojiLabel }))
-    setLastAnnouncedId(latestReaction.id)
-  }, [announce, latestReaction, lastAnnouncedId, announceReactions, t])
-
-  return (
-    <>
-      {reactions.map((instance) => (
-        <ReactionPortal
-          key={instance.id}
-          emoji={instance.emoji}
-          participant={instance.participant}
-        />
-      ))}
-    </>
-  )
-}
+export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) =>
+  reactions.map((instance) => (
+    <ReactionPortal
+      key={instance.id}
+      emoji={instance.emoji}
+      participant={instance.participant}
+    />
+  ))
@@ -13,37 +13,27 @@ 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) => (
-  <aside
-    ref={panelRef}
+  <div
    className={css({
      borderWidth: '1px',
      borderStyle: 'solid',
@@ -68,37 +58,32 @@ const StyledSidePanel = ({
    style={{
      transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
    }}
-    aria-hidden={isClosed}
-    aria-label={ariaLabel}
  >
-    <HStack alignItems="center">
+    <Heading
+      slot="title"
+      level={1}
+      className={text({ variant: 'h2' })}
+      style={{
+        paddingLeft: '1.5rem',
+        paddingTop: '1rem',
+        display: isClosed ? 'none' : 'flex',
+        justifyContent: 'start',
+        alignItems: 'center',
+      }}
+    >
      {isSubmenu && (
        <Button
          variant="secondaryText"
-          size="sm"
+          size={'sm'}
          square
-          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
-          aria-label={backButtonLabel}
+          className={css({ marginRight: '0.5rem' })}
          onPress={onBack}
        >
-          <RiArrowLeftLine size={20} aria-hidden="true" />
+          <RiArrowLeftLine size={20} />
        </Button>
      )}
-      <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>
+      {title}
+    </Heading>
    <Div
      position="absolute"
      top="5"
@@ -119,7 +104,7 @@ const StyledSidePanel = ({
      </Button>
    </Div>
    {children}
-  </aside>
+  </div>
 )

 type PanelProps = {
@@ -140,7 +125,8 @@ const Panel = ({ isOpen, keepAlive = false, children }: PanelProps) => (
    {keepAlive || isOpen ? children : null}
  </div>
 )
-const SidePanelContent = () => {
+
+export const SidePanel = () => {
  const {
    activePanelId,
    isParticipantsOpen,
@@ -152,37 +138,23 @@ const SidePanelContent = () => {
    isInfoOpen,
    isSubPanelOpen,
    activeSubPanelId,
-    closeSidePanel,
  } = useSidePanel()
  const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
-  const panelRef = useSidePanelRef()
-
-  useEscapeKey(
-    () => {
-      // Close subpanel + panel together for a consistent Escape behavior
-      closeSidePanel()
-    },
-    {
-      isActive: isSidePanelOpen,
-      capture: true,
-    }
-  )

  return (
    <StyledSidePanel
      title={t(`heading.${activeSubPanelId || activePanelId}`)}
-      ariaLabel={t('ariaLabel')}
-      onClose={closeSidePanel}
+      onClose={() => {
+        layoutStore.activePanelId = null
+        layoutStore.activeSubPanelId = null
+      }}
      closeButtonTooltip={t('closeButton', {
        content: t(`content.${activeSubPanelId || activePanelId}`),
      })}
      isClosed={!isSidePanelOpen}
      isSubmenu={isSubPanelOpen}
-      backButtonLabel={t('backToTools')}
      onBack={() => (layoutStore.activeSubPanelId = null)}
-      panelRef={panelRef}
    >
-      {/* keepAlive stays only for Info to reduce memory footprint */}
      <Panel isOpen={isParticipantsOpen}>
        <ParticipantsList />
      </Panel>
@@ -192,7 +164,7 @@ const SidePanelContent = () => {
      <Panel isOpen={isChatOpen} keepAlive={true}>
        <Chat />
      </Panel>
-      <Panel isOpen={isToolsOpen} keepAlive={true}>
+      <Panel isOpen={isToolsOpen}>
        <Tools />
      </Panel>
      <Panel isOpen={isAdminOpen}>
@@ -204,7 +176,3 @@ const SidePanelContent = () => {
    </StyledSidePanel>
  )
 }
-
-export const SidePanel = () => {
-  return <SidePanelContent />
-}
@@ -1,12 +1,9 @@
-import { A, Div, Icon, Text } from '@/primitives'
+import { A, Div, 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,
@@ -89,7 +86,7 @@ const ToolButton = ({
          alignItems: 'center',
        })}
      >
-        <Icon type="symbols" name="chevron_forward" />
+        <span className="material-symbols">chevron_forward</span>
      </div>
    </RACButton>
  )
@@ -97,47 +94,9 @@ const ToolButton = ({

 export const Tools = () => {
  const { data } = useConfig()
-  const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
+  const { openTranscript, openScreenRecording, activeSubPanelId } =
    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.
-  useRestoreFocus(isToolsOpen, {
-    // If the active element is a MenuItem (DIV) that will be unmounted when the menu closes,
-    // find the "more options" button ("Plus d'options") that opened the menu
-    resolveTrigger: (activeEl) => {
-      if (activeEl?.tagName === 'DIV') {
-        return getTrigger('options') ?? activeEl
-      }
-      // For direct button clicks (e.g. "Plus d'outils"), use the active element as is
-      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,
-  })

  const isTranscriptEnabled = useIsRecordingModeEnabled(
    RecordingMode.Transcript
@@ -165,7 +124,6 @@ export const Tools = () => {
      flexDirection="column"
      alignItems="start"
      gap={0.5}
-      data-attr="tools-list"
    >
      <Text
        variant="note"
@@ -188,7 +146,7 @@ export const Tools = () => {
      </Text>
      {isTranscriptEnabled && (
        <ToolButton
-          icon={<Icon type="symbols" name="speech_to_text" />}
+          icon={<span className="material-symbols">speech_to_text</span>}
          title={t('tools.transcript.title')}
          description={t('tools.transcript.body')}
          onPress={() => openTranscript()}
@@ -196,7 +154,7 @@ export const Tools = () => {
      )}
      {isScreenRecordingEnabled && (
        <ToolButton
-          icon={<Icon type="symbols" name="mode_standby" />}
+          icon={<span className="material-symbols">mode_standby</span>}
          title={t('tools.screenRecording.title')}
          description={t('tools.screenRecording.body')}
          onPress={() => openScreenRecording()}
@@ -1,4 +1,3 @@
-import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTrackToggle, UseTrackToggleProps } from '@livekit/components-react'
 import { Button, Popover } from '@/primitives'
@@ -10,13 +9,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 { AUDIO_INPUT_FOCUS_SELECTOR } from './deviceFocusSelectors'

 type AudioDevicesControlProps = Omit<
  UseTrackToggleProps<Source.Microphone>,
@@ -30,7 +29,6 @@ export const AudioDevicesControl = ({
  ...props
 }: AudioDevicesControlProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false)

  const {
    userChoices: { audioDeviceId, audioOutputDeviceId },
@@ -78,16 +76,7 @@ export const AudioDevicesControl = ({
        }}
      />
      {!hideMenu && (
-        <Popover
-          variant="dark"
-          withArrow={false}
-          isOpen={isMenuOpen}
-          onOpenChange={setIsMenuOpen}
-          focusOnOpen={{
-            selector: AUDIO_INPUT_FOCUS_SELECTOR,
-            delayMs: 250,
-          }}
-        >
+        <Popover variant="dark" withArrow={false}>
          <Button
            tooltip={selectLabel}
            aria-label={selectLabel}
@@ -111,7 +100,6 @@ export const AudioDevicesControl = ({
              })}
            >
              <div
-                data-attr="audio-input-select"
                style={{
                  flex: '1 1 0',
                  minWidth: 0,
@@ -10,7 +10,6 @@ import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoice
 import { useCanPublishTrack } from '../../../hooks/useCanPublishTrack'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
 import { useSidePanel } from '../../../hooks/useSidePanel'
-import { useSidePanelTriggerRef } from '../../../hooks/useSidePanelTriggerRef'
 import { BackgroundProcessorFactory } from '../../blur'
 import Source = Track.Source
 import * as React from 'react'
@@ -18,12 +17,10 @@ import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { TrackSource } from '@livekit/protocol'
-import { VIDEO_INPUT_FOCUS_SELECTOR } from './deviceFocusSelectors'

 const EffectsButton = ({ onPress }: { onPress: () => void }) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
  const { isEffectsOpen, toggleEffects } = useSidePanel()
-  const setEffectsTriggerRef = useSidePanelTriggerRef('effects')
  return (
    <Button
      size="sm"
@@ -31,7 +28,6 @@ const EffectsButton = ({ onPress }: { onPress: () => void }) => {
      tooltip={t('effects')}
      aria-label={t('effects')}
      variant="primaryDark"
-      ref={setEffectsTriggerRef}
      onPress={() => {
        if (!isEffectsOpen) toggleEffects()
        onPress()
@@ -54,8 +50,6 @@ export const VideoDeviceControl = ({
  ...props
 }: VideoDeviceControlProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
-  const setCameraMenuTriggerRef = useSidePanelTriggerRef('cameraMenu')

  const { userChoices, saveVideoInputDeviceId, saveVideoInputEnabled } =
    usePersistentUserChoices()
@@ -126,22 +120,12 @@ export const VideoDeviceControl = ({
        }}
      />
      {!hideMenu && (
-        <Popover
-          variant="dark"
-          withArrow={false}
-          isOpen={isMenuOpen}
-          onOpenChange={setIsMenuOpen}
-          focusOnOpen={{
-            selector: VIDEO_INPUT_FOCUS_SELECTOR,
-            delayMs: 250,
-          }}
-        >
+        <Popover variant="dark" withArrow={false}>
          <Button
            tooltip={selectLabel}
            aria-label={selectLabel}
            groupPosition="right"
            square
-            ref={setCameraMenuTriggerRef}
            variant={
              !canPublishTrack || !trackProps.enabled || cannotUseDevice
                ? 'error2'
@@ -152,7 +136,6 @@ export const VideoDeviceControl = ({
          </Button>
          {({ close }) => (
            <div
-              data-attr="camera-menu-popover"
              className={css({
                maxWidth: '36rem',
                padding: '0.15rem',
@@ -161,7 +144,6 @@ export const VideoDeviceControl = ({
              })}
            >
              <div
-                data-attr="video-input-select"
                style={{
                  flex: '1 1 0',
                  minWidth: 0,
@@ -1,5 +0,0 @@
-export const AUDIO_INPUT_FOCUS_SELECTOR =
-  '[data-attr="audio-input-select"] button, [data-attr="audio-input-select"] [role="combobox"]'
-
-export const VIDEO_INPUT_FOCUS_SELECTOR =
-  '[data-attr="video-input-select"] button, [data-attr="video-input-select"] [role="combobox"]'
@@ -4,7 +4,6 @@ import { css } from '@/styled-system/css'
 import { ToggleButton } from '@/primitives'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useSidePanelTriggerRef } from '../../hooks/useSidePanelTriggerRef'

 export const InfoToggle = ({
  onPress,
@@ -14,7 +13,6 @@ export const InfoToggle = ({

  const { isInfoOpen, toggleInfo } = useSidePanel()
  const tooltipLabel = isInfoOpen ? 'open' : 'closed'
-  const setInfoTriggerRef = useSidePanelTriggerRef('info')

  return (
    <div
@@ -29,7 +27,6 @@ export const InfoToggle = ({
        aria-label={t(tooltipLabel)}
        tooltip={t(tooltipLabel)}
        isSelected={isInfoOpen}
-        ref={setInfoTriggerRef}
        onPress={(e) => {
          toggleInfo()
          onPress?.(e)
@@ -2,21 +2,17 @@ import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
 import { OptionsMenuItems } from './OptionsMenuItems'
-import { useSidePanelTriggerRef } from '../../../hooks/useSidePanelTriggerRef'

 export const OptionsButton = () => {
  const { t } = useTranslation('rooms')
-  const setOptionsTriggerRef = useSidePanelTriggerRef('options')

  return (
    <Menu variant="dark">
      <Button
-        id="room-options-trigger"
        square
        variant="primaryDark"
        aria-label={t('options.buttonLabel')}
        tooltip={t('options.buttonLabel')}
-        ref={setOptionsTriggerRef}
      >
        <RiMoreFill />
      </Button>
@@ -70,7 +70,6 @@ export function ParticipantsCollapsableList<T>({
      <ToggleHeader
        isSelected={isOpen}
        aria-label={label}
-        data-focus-target="list-header"
        onPress={() => setIsOpen(!isOpen)}
        style={{
          borderRadius: !isOpen ? '7px' : undefined,
@@ -12,17 +12,10 @@ 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
@@ -55,31 +48,6 @@ 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">
@@ -1,12 +1,10 @@
 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 { useSidePanelTriggerRef } from '../../../hooks/useSidePanelTriggerRef'

 export const ParticipantsToggle = ({
  onPress,
@@ -21,11 +19,8 @@ export const ParticipantsToggle = ({
   */
  const participants = useParticipants()
  const numParticipants = participants?.length
-  const announcedCount =
-    numParticipants && numParticipants > 0 ? numParticipants : 1

  const { isParticipantsOpen, toggleParticipants } = useSidePanel()
-  const setParticipantsTriggerRef = useSidePanelTriggerRef('participants')

  const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'

@@ -36,25 +31,21 @@ export const ParticipantsToggle = ({
        display: 'inline-block',
      })}
    >
-      <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>
+      <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>
      <div
        className={css({
          position: 'absolute',
@@ -10,11 +10,9 @@ 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 {
@@ -38,7 +36,6 @@ 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)
@@ -104,22 +101,6 @@ 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
@@ -132,7 +113,6 @@ export const ReactionsToggle = () => {
          variant="primaryDark"
          aria-label={t('button')}
          tooltip={t('button')}
-          ref={triggerRef}
          onPress={() => setIsVisible(!isVisible)}
        >
          <RiEmotionLine />
@@ -165,7 +145,7 @@ export const ReactionsToggle = () => {
                <Button
                  key={index}
                  onPress={() => debouncedSendReaction(emoji)}
-                  aria-label={t('send', { emoji: getEmojiLabel(emoji, t) })}
+                  aria-label={t('send', { emoji })}
                  variant="primaryTextDark"
                  size="sm"
                  square
@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useSidePanelTriggerRef } from '../../hooks/useSidePanelTriggerRef'

 export const ToolsToggle = ({
  variant = 'primaryTextDark',
@@ -15,7 +14,6 @@ export const ToolsToggle = ({

  const { isToolsOpen, toggleTools } = useSidePanel()
  const tooltipLabel = isToolsOpen ? 'open' : 'closed'
-  const setToolsTriggerRef = useSidePanelTriggerRef('tools')

  return (
    <div
@@ -30,7 +28,6 @@ export const ToolsToggle = ({
        aria-label={t(tooltipLabel)}
        tooltip={t(tooltipLabel)}
        isSelected={isToolsOpen}
-        ref={setToolsTriggerRef}
        onPress={(e) => {
          toggleTools()
          onPress?.(e)
@@ -5,51 +5,14 @@ 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
-      }
-      if (activeEl?.closest('[data-attr="camera-menu-popover"]')) {
-        return getTrigger('cameraMenu') ?? 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({
@@ -9,16 +9,15 @@ 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'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'

 enum BlurRadius {
  NONE = 0,
@@ -51,17 +50,11 @@ 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 announce = useScreenReaderAnnounce()
-  const effectAnnouncementTimeout = useRef<ReturnType<
-    typeof setTimeout
-  > | null>(null)
-  const effectAnnouncementId = useRef(0)

  useEffect(() => {
    const videoElement = videoRef.current
@@ -76,92 +69,16 @@ 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)
-    }
-
-    effectAnnouncementTimeout.current = setTimeout(() => {
-      if (currentId !== effectAnnouncementId.current) return
-      announce(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
@@ -187,7 +104,7 @@ export const EffectsConfiguration = ({

    const processor = getProcessor()
    try {
-      if (wasSelectedBeforeToggle) {
+      if (isSelected(type, options)) {
        // Stop processor.
        await clearEffect()
      } else if (
@@ -214,8 +131,6 @@ 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 {
@@ -238,28 +153,8 @@ export const EffectsConfiguration = ({
    )
  }

-  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}`)
+  const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
+    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
  }

  return (
@@ -370,57 +265,65 @@ export const EffectsConfiguration = ({
              >
                {t('blur.title')}
              </H>
-              <div>
-                <div
-                  className={css({
-                    display: 'flex',
-                    gap: '1.25rem',
-                  })}
+              <div
+                className={css({
+                  display: 'flex',
+                  gap: '1.25rem',
+                })}
+              >
+                <ToggleButton
+                  variant="bigSquare"
+                  aria-label={t('clear')}
+                  onPress={async () => {
+                    await clearEffect()
+                  }}
+                  isSelected={!getProcessor()}
+                  isDisabled={processorPendingReveal || isDisabled}
                >
-                  <ToggleButton
-                    ref={blurLightRef}
-                    variant="bigSquare"
-                    aria-label={tooltipBlur(ProcessorType.BLUR, {
+                  <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, {
                      blurRadius: BlurRadius.LIGHT,
-                    })}
-                    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, {
+                    })
+                  }
+                  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, {
                      blurRadius: BlurRadius.NORMAL,
-                    })}
-                    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>
+                    })
+                  }
+                  isSelected={isSelected(ProcessorType.BLUR, {
+                    blurRadius: BlurRadius.NORMAL,
+                  })}
+                  data-attr="toggle-blur-normal"
+                >
+                  <BlurOnStrong />
+                </ToggleButton>
              </div>
              <div
                className={css({
@@ -440,37 +343,39 @@ 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 (
-                      <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, {
+                      <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, {
                            imagePath,
-                          })}
-                          className={css({
-                            bgSize: 'cover',
-                          })}
-                          style={{
-                            backgroundImage: `url(${thumbnailPath})`,
-                          }}
-                          data-attr={`toggle-virtual-${i}`}
-                        />
-                      </VisualOnlyTooltip>
+                          })
+                        }
+                        isSelected={isSelected(ProcessorType.VIRTUAL, {
+                          imagePath,
+                        })}
+                        className={css({
+                          bgSize: 'cover',
+                        })}
+                        style={{
+                          backgroundImage: `url(${thumbnailPath})`,
+                        }}
+                        data-attr={`toggle-virtual-${i}`}
+                      />
                    )
                  })}
                </div>
@@ -1,7 +1,5 @@
 import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
-import { useEffect, useRef } from 'react'
-import type { SidePanelTriggerKey } from '../types/sidePanelTypes'

 export enum PanelId {
  PARTICIPANTS = 'participants',
@@ -21,41 +19,6 @@ export const useSidePanel = () => {
  const layoutSnap = useSnapshot(layoutStore)
  const activePanelId = layoutSnap.activePanelId
  const activeSubPanelId = layoutSnap.activeSubPanelId
-  const lastInteractionRef = useRef<'keyboard' | 'mouse' | null>(null)
-  const prevPanelIdRef = useRef<PanelId | null>(activePanelId)
-
-  const resolveTrigger = (panelId: PanelId, activeEl: HTMLElement | null) => {
-    if (activeEl?.tagName === 'DIV') {
-      if (panelId === PanelId.TOOLS || panelId === PanelId.EFFECTS) {
-        return layoutStore.sidePanelTriggers.options ?? activeEl
-      }
-    }
-    if (
-      panelId === PanelId.EFFECTS &&
-      activeEl?.closest('[data-attr="camera-menu-popover"]')
-    ) {
-      return layoutStore.sidePanelTriggers.cameraMenu ?? activeEl
-    }
-    const triggerKeyByPanel: Partial<Record<PanelId, SidePanelTriggerKey>> = {
-      [PanelId.PARTICIPANTS]: 'participants',
-      [PanelId.TOOLS]: 'tools',
-      [PanelId.INFO]: 'info',
-      [PanelId.ADMIN]: 'admin',
-      [PanelId.EFFECTS]: 'effects',
-    }
-    const triggerKey = triggerKeyByPanel[panelId]
-    return triggerKey
-      ? (layoutStore.sidePanelTriggers[triggerKey] ?? activeEl)
-      : activeEl
-  }
-
-  const storeLastTrigger = (panelId: PanelId) => {
-    const activeEl = document.activeElement as HTMLElement | null
-    layoutStore.lastSidePanelTriggerRef.current = resolveTrigger(
-      panelId,
-      activeEl
-    )
-  }

  const isParticipantsOpen = activePanelId == PanelId.PARTICIPANTS
  const isEffectsOpen = activePanelId == PanelId.EFFECTS
@@ -69,101 +32,45 @@ export const useSidePanel = () => {
  const isSubPanelOpen = !!activeSubPanelId

  const toggleAdmin = () => {
-    if (!isAdminOpen) storeLastTrigger(PanelId.ADMIN)
    layoutStore.activePanelId = isAdminOpen ? null : PanelId.ADMIN
    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
  }

  const toggleParticipants = () => {
-    if (!isParticipantsOpen) storeLastTrigger(PanelId.PARTICIPANTS)
    layoutStore.activePanelId = isParticipantsOpen ? null : PanelId.PARTICIPANTS
    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
  }

  const toggleChat = () => {
-    if (!isChatOpen) storeLastTrigger(PanelId.CHAT)
    layoutStore.activePanelId = isChatOpen ? null : PanelId.CHAT
    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
  }

  const toggleEffects = () => {
-    if (!isEffectsOpen) storeLastTrigger(PanelId.EFFECTS)
    layoutStore.activePanelId = isEffectsOpen ? null : PanelId.EFFECTS
    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
  }

  const toggleTools = () => {
-    if (!isToolsOpen) storeLastTrigger(PanelId.TOOLS)
    layoutStore.activePanelId = isToolsOpen ? null : PanelId.TOOLS
    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
  }

  const toggleInfo = () => {
-    if (!isInfoOpen) storeLastTrigger(PanelId.INFO)
    layoutStore.activePanelId = isInfoOpen ? null : PanelId.INFO
    if (layoutSnap.activeSubPanelId) layoutStore.activeSubPanelId = null
  }

  const openTranscript = () => {
-    storeLastTrigger(PanelId.TOOLS)
    layoutStore.activeSubPanelId = SubPanelId.TRANSCRIPT
    layoutStore.activePanelId = PanelId.TOOLS
  }

  const openScreenRecording = () => {
-    storeLastTrigger(PanelId.TOOLS)
    layoutStore.activeSubPanelId = SubPanelId.SCREEN_RECORDING
    layoutStore.activePanelId = PanelId.TOOLS
  }

-  const closeSidePanel = () => {
-    if (isSubPanelOpen) {
-      layoutStore.activeSubPanelId = null
-      layoutStore.activePanelId = null
-      return
-    }
-    layoutStore.activePanelId = null
-  }
-
-  useEffect(() => {
-    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 = prevPanelIdRef.current
-
-    if (wasOpen && !activePanelId) {
-      const trigger = layoutStore.lastSidePanelTriggerRef.current
-      if (trigger && document.contains(trigger)) {
-        trigger.focus({ preventScroll: true })
-        if (lastInteractionRef.current === 'keyboard') {
-          trigger.setAttribute('data-restore-focus-visible', '')
-          const handleBlur = () => {
-            if (document.contains(trigger)) {
-              trigger.removeAttribute('data-restore-focus-visible')
-            }
-          }
-          trigger.addEventListener('blur', handleBlur, { once: true })
-        }
-      }
-    }
-
-    prevPanelIdRef.current = activePanelId
-  }, [activePanelId])
-
  return {
    activePanelId,
    activeSubPanelId,
@@ -175,7 +82,6 @@ export const useSidePanel = () => {
    toggleInfo,
    openTranscript,
    openScreenRecording,
-    closeSidePanel,
    isSubPanelOpen,
    isChatOpen,
    isParticipantsOpen,
@@ -1,5 +0,0 @@
-import { layoutStore } from '@/stores/layout'
-
-export const useSidePanelRef = () => {
-  return layoutStore.sidePanelRef
-}
@@ -1,13 +0,0 @@
-import { useCallback } from 'react'
-import type { SidePanelTriggerKey } from '../types/sidePanelTypes'
-import { useSidePanelTriggers } from './useSidePanelTriggers'
-
-export const useSidePanelTriggerRef = (key: SidePanelTriggerKey) => {
-  const { setTrigger } = useSidePanelTriggers()
-  return useCallback(
-    (el: HTMLElement | null) => {
-      setTrigger(key, el)
-    },
-    [key, setTrigger]
-  )
-}
@@ -1,13 +0,0 @@
-import { layoutStore } from '@/stores/layout'
-import type { SidePanelTriggerKey } from '../types/sidePanelTypes'
-
-export const useSidePanelTriggers = () => {
-  return {
-    setTrigger: (key: SidePanelTriggerKey, el: HTMLElement | null) => {
-      layoutStore.sidePanelTriggers[key] = el
-    },
-    getTrigger: (key: SidePanelTriggerKey) => {
-      return layoutStore.sidePanelTriggers[key] ?? null
-    },
-  }
-}
@@ -1,5 +1,5 @@
 import type { ChatMessage, ChatOptions } from '@livekit/components-core'
-import React from 'react'
+import React, { useEffect } from 'react'
 import {
  formatChatMessageLinks,
  useChat,
@@ -15,7 +15,6 @@ import { ChatEntry } from '../components/chat/Entry'
 import { useSidePanel } from '../hooks/useSidePanel'
 import { LocalParticipant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { css } from '@/styled-system/css'
-import { useRestoreFocus } from '@/hooks/useRestoreFocus'

 export interface ChatProps
  extends React.HTMLAttributes<HTMLDivElement>,
@@ -39,16 +38,33 @@ export function Chat({ ...props }: ChatProps) {

  // Keep track of the element that opened the chat so we can restore focus
  // when the chat panel is closed.
-  useRestoreFocus(isChatOpen, {
-    // Avoid layout "jump" during the side panel slide-in animation.
-    // Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
-    onOpened: () => {
+  const prevIsChatOpenRef = React.useRef(false)
+  const chatTriggerRef = React.useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    const wasChatOpen = prevIsChatOpenRef.current
+    const isChatPanelOpen = isChatOpen
+
+    // Chat just opened
+    if (!wasChatOpen && isChatPanelOpen) {
+      chatTriggerRef.current = document.activeElement as HTMLElement | null
+      // Avoid layout "jump" during the side panel slide-in animation.
+      // Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
      requestAnimationFrame(() => {
        inputRef.current?.focus({ preventScroll: true })
      })
-    },
-    preventScroll: true,
-  })
+    }
+    // Chat just closed
+    if (wasChatOpen && !isChatPanelOpen) {
+      const trigger = chatTriggerRef.current
+      if (trigger && document.contains(trigger)) {
+        trigger.focus({ preventScroll: true })
+      }
+      chatTriggerRef.current = null
+    }
+
+    prevIsChatOpenRef.current = isChatPanelOpen
+  }, [isChatOpen])

  // Use useParticipants hook to trigger a re-render when the participant list changes.
  const participants = useParticipants()
@@ -73,7 +73,6 @@ export function MobileControlBar({
          />
          <HandToggle />
          <Button
-            id="room-options-trigger"
            square
            variant="primaryDark"
            aria-label={t('options.buttonLabel')}
@@ -37,7 +37,6 @@ export const LateralMenu = () => {
  return (
    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
      <Button
-        id="controlbar-more-options-trigger"
        square
        variant="secondaryDark"
        aria-label={t('controls.moreOptions')}
@@ -5,8 +5,9 @@ import {
  isWeb,
  log,
 } from '@livekit/components-core'
-import { Participant, RoomEvent, Track } from 'livekit-client'
-import React, { useCallback, useRef, useState, useEffect } from 'react'
+import { RoomEvent, Track } from 'livekit-client'
+import * as React from 'react'
+import { useState } from 'react'
 import {
  ConnectionStateToast,
  FocusLayoutContainer,
@@ -15,9 +16,7 @@ import {
  usePinnedTracks,
  useTracks,
  useCreateLayoutContext,
-  useRoomContext,
 } from '@livekit/components-react'
-import { useTranslation } from 'react-i18next'

 import { ControlBar } from './ControlBar/ControlBar'
 import { styled } from '@/styled-system/jsx'
@@ -38,8 +37,6 @@ import { Subtitles } from '@/features/subtitle/component/Subtitles'
 import { CarouselLayout } from '../components/layout/CarouselLayout'
 import { GridLayout } from '../components/layout/GridLayout'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
-import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
-import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'

 const LayoutWrapper = styled(
  'div',
@@ -92,22 +89,7 @@ export interface VideoConferenceProps
 */
 export function VideoConference({ ...props }: VideoConferenceProps) {
  const lastAutoFocusedScreenShareTrack =
-    useRef<TrackReferenceOrPlaceholder | null>(null)
-  const lastPinnedParticipantIdentityRef = useRef<string | null>(null)
-  const { t } = useTranslation('rooms', { keyPrefix: 'pinAnnouncements' })
-  const { t: tRooms } = useTranslation('rooms')
-  const room = useRoomContext()
-  const announce = useScreenReaderAnnounce()
-
-  const getAnnouncementName = useCallback(
-    (participant?: Participant | null) => {
-      if (!participant) return tRooms('participants.unknown')
-      return participant.isLocal
-        ? tRooms('participants.you')
-        : getParticipantName(participant)
-    },
-    [tRooms]
-  )
+    React.useRef<TrackReferenceOrPlaceholder | null>(null)

  useConnectionObserver()
  useVideoResolutionSubscription()
@@ -133,62 +115,9 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
    (track) => !isEqualTrackRef(track, focusTrack)
  )

-  // handle pin announcements
-
-  useEffect(() => {
-    const participant = focusTrack?.participant
-
-    // 1. unpin
-    if (!participant) {
-      if (!lastPinnedParticipantIdentityRef.current) return
-
-      const lastIdentity = lastPinnedParticipantIdentityRef.current
-      const lastParticipant =
-        room.localParticipant.identity === lastIdentity
-          ? room.localParticipant
-          : room.remoteParticipants.get(lastIdentity)
-      const announcementName = getAnnouncementName(lastParticipant)
-
-      announce(
-        lastParticipant?.isLocal
-          ? t('self.unpin')
-          : t('unpin', {
-              name: announcementName,
-            })
-      )
-
-      lastPinnedParticipantIdentityRef.current = null
-      return
-    }
-
-    // 2. same pin → do nothing
-    if (lastPinnedParticipantIdentityRef.current === participant.identity) {
-      return
-    }
-
-    // 3. new pin
-    const participantName = participant.isLocal
-      ? tRooms('participants.you')
-      : getParticipantName(participant)
-
-    lastPinnedParticipantIdentityRef.current = participant.identity
-
-    announce(
-      participant.isLocal ? t('self.pin') : t('pin', { name: participantName })
-    )
-  }, [
-    announce,
-    focusTrack,
-    getAnnouncementName,
-    room.localParticipant,
-    room.remoteParticipants,
-    t,
-    tRooms,
-  ])
-
  /* eslint-disable react-hooks/exhaustive-deps */
  // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
-  useEffect(() => {
+  React.useEffect(() => {
    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
    if (
      screenShareTracks.some((track) => track.publication.isSubscribed) &&
@@ -1,8 +0,0 @@
-export type SidePanelTriggerKey =
-  | 'participants'
-  | 'tools'
-  | 'info'
-  | 'admin'
-  | 'options'
-  | 'effects'
-  | 'cameraMenu'
@@ -1,24 +0,0 @@
-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
-}
@@ -3,9 +3,7 @@ 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 } from 'wouter'
-import { useMemo } from 'react'
-import { DisconnectReason } from 'livekit-client'
+import { useLocation, useSearchParams } from 'wouter'

 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -22,40 +20,25 @@ const Heading = styled('h1', {
  },
 })

-enum DisconnectReasonKey {
-  DuplicateIdentity = 'duplicateIdentity',
-  ParticipantRemoved = 'participantRemoved',
-}
-
 export const FeedbackRoute = () => {
  const { t } = useTranslation('rooms')
  const [, setLocation] = useLocation()

-  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
+  const [searchParams] = useSearchParams()

  return (
    <Screen layout="centered" footer={false}>
      <Center>
        <VStack>
-          <Heading>{t(`feedback.heading.${reasonKey || 'normal'}`)}</Heading>
-          <HStack>
-            {showBackButton && (
-              <Button variant="secondary" onPress={() => window.history.back()}>
-                {t('feedback.back')}
-              </Button>
+          <Heading>
+            {t(
+              `feedback.heading.${searchParams.get('duplicateIdentity') ? 'duplicateIdentity' : 'normal'}`
            )}
+          </Heading>
+          <HStack>
+            <Button variant="secondary" onPress={() => window.history.back()}>
+              {t('feedback.back')}
+            </Button>
            <Button variant="primary" onPress={() => setLocation('/')}>
              {t('feedback.home')}
            </Button>
@@ -2,7 +2,6 @@ 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 {
@@ -11,7 +10,6 @@ import {
  RiSettings3Line,
  RiSpeakerLine,
  RiVideoOnLine,
-  RiEyeLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
@@ -23,7 +21,6 @@ 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
@@ -109,16 +106,11 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
            </Tab>
            {isAdminOrOwner && (
              <Tab icon highlight id={SettingsDialogExtendedKey.TRANSCRIPTION}>
-                <Icon type="symbols" name="speech_to_text" />
+                <span className="material-symbols">speech_to_text</span>
                {isWideScreen &&
                  t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)}
              </Tab>
            )}
-            <Tab icon highlight id={SettingsDialogExtendedKey.ACCESSIBILITY}>
-              <RiEyeLine />
-              {isWideScreen &&
-                t(`tabs.${SettingsDialogExtendedKey.ACCESSIBILITY}`)}
-            </Tab>
          </TabList>
        </div>
        <div className={tabPanelContainerStyle}>
@@ -132,7 +124,6 @@ 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>
@@ -1,40 +0,0 @@
-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
@@ -18,14 +18,6 @@ export const useTranscriptionLanguage = () => {
        key: RecordingLanguage.ENGLISH,
        label: t('language.options.english'),
      },
-      {
-        key: RecordingLanguage.GERMAN,
-        label: t('language.options.german'),
-      },
-      {
-        key: RecordingLanguage.DUTCH,
-        label: t('language.options.dutch'),
-      },
      {
        key: RecordingLanguage.AUTOMATIC,
        label: t('language.options.auto'),
@@ -5,5 +5,4 @@ export enum SettingsDialogExtendedKey {
  GENERAL = 'general',
  NOTIFICATIONS = 'notifications',
  TRANSCRIPTION = 'transcription',
-  ACCESSIBILITY = 'accessibility',
 }
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useSubtitles } from '../hooks/useSubtitles'
 import { css, cva } from '@/styled-system/css'
 import { styled } from '@/styled-system/jsx'
@@ -13,63 +13,101 @@ export interface TranscriptionSegment {
  id: string
  text: string
  language: string
-  startTime?: number
+  startTime: number
  endTime: number
  final: boolean
  firstReceivedTime: number
  lastReceivedTime: number
 }

-export interface TranscriptionSegmentWithParticipant
-  extends TranscriptionSegment {
-  participant: Participant
-}
-
 export interface TranscriptionRow {
  id: string
  participant: Participant
  segments: TranscriptionSegment[]
-  startTime?: number
+  startTime: number
  lastUpdateTime: number
-  lastReceivedTime: number
 }

 const useTranscriptionState = () => {
-  const [transcriptionSegments, setTranscriptionSegments] = useState<
-    TranscriptionSegmentWithParticipant[]
+  const [transcriptionRows, setTranscriptionRows] = useState<
+    TranscriptionRow[]
  >([])
+  const [lastActiveParticipantIdentity, setLastActiveParticipantIdentity] =
+    useState<string | null>(null)

-  const updateTranscriptionSegments = (
+  const updateTranscriptions = (
    segments: TranscriptionSegment[],
    participant?: Participant
  ) => {
-    console.log(participant, segments)
-
    if (!participant || segments.length === 0) return

-    if (segments.length > 1) {
-      console.warn('Unexpected error more segments')
-      return
-    }
+    setTranscriptionRows((prevRows) => {
+      const updatedRows = [...prevRows]
+      const now = Date.now()

-    const segment = segments[0]
+      const shouldAppendToLastRow =
+        lastActiveParticipantIdentity === participant.identity &&
+        updatedRows.length > 0

-    setTranscriptionSegments((prevSegments) => {
-      const existingSegmentIds = new Set(prevSegments.map((s) => s.id))
-      if (existingSegmentIds.has(segment.id)) return prevSegments
-      return [
-        ...prevSegments,
-        {
-          participant: participant,
-          ...segment,
-        },
-      ]
+      if (shouldAppendToLastRow) {
+        const lastRowIndex = updatedRows.length - 1
+        const lastRow = updatedRows[lastRowIndex]
+
+        const existingSegmentIds = new Set(lastRow.segments.map((s) => s.id))
+        const newSegments = segments.filter(
+          (segment) => !existingSegmentIds.has(segment.id)
+        )
+        const updatedSegments = lastRow.segments.map((existing) => {
+          const update = segments.find((s) => s.id === existing.id)
+          return update && update.final ? update : existing
+        })
+
+        updatedRows[lastRowIndex] = {
+          ...lastRow,
+          segments: [...updatedSegments, ...newSegments],
+          lastUpdateTime: now,
+        }
+      } else {
+        const newRow: TranscriptionRow = {
+          id: `${participant.identity}-${now}`,
+          participant,
+          segments: [...segments],
+          startTime: Math.min(...segments.map((s) => s.startTime)),
+          lastUpdateTime: now,
+        }
+        updatedRows.push(newRow)
+      }
+
+      return updatedRows
+    })
+
+    setLastActiveParticipantIdentity(participant.identity)
+  }
+
+  const clearTranscriptions = () => {
+    setTranscriptionRows([])
+    setLastActiveParticipantIdentity(null)
+  }
+
+  const updateParticipant = (_name: string, participant: Participant) => {
+    setTranscriptionRows((prevRows) => {
+      return prevRows.map((row) => {
+        if (row.participant.identity === participant.identity) {
+          return {
+            ...row,
+            participant,
+          }
+        }
+        return row
+      })
    })
  }

  return {
-    updateTranscriptionSegments,
-    transcriptionSegments,
+    transcriptionRows,
+    updateTranscriptions,
+    clearTranscriptions,
+    updateParticipant,
  }
 }

@@ -154,54 +192,24 @@ const SubtitlesWrapper = styled(
 export const Subtitles = () => {
  const { areSubtitlesOpen } = useSubtitles()
  const room = useRoomContext()
-
-  const { transcriptionSegments, updateTranscriptionSegments } =
+  const { transcriptionRows, updateTranscriptions, updateParticipant } =
    useTranscriptionState()

  useEffect(() => {
    if (!room) return
-    room.on(RoomEvent.TranscriptionReceived, updateTranscriptionSegments)
+    room.on(RoomEvent.TranscriptionReceived, updateTranscriptions)
    return () => {
-      room.off(RoomEvent.TranscriptionReceived, updateTranscriptionSegments)
+      room.off(RoomEvent.TranscriptionReceived, updateTranscriptions)
    }
-  }, [room, updateTranscriptionSegments])
+  }, [room, updateTranscriptions])

-  const transcriptionRows = useMemo(() => {
-    if (transcriptionSegments.length === 0) return []
-
-    const rows: TranscriptionRow[] = []
-    let currentRow: TranscriptionRow | null = null
-
-    for (const segment of transcriptionSegments) {
-      const shouldStartNewRow =
-        !currentRow ||
-        currentRow.participant.identity !== segment.participant.identity
-
-      if (shouldStartNewRow) {
-        currentRow = {
-          id: `${segment.participant.identity}-${segment.firstReceivedTime}`,
-          participant: segment.participant,
-          segments: [segment],
-          startTime: segment.startTime,
-          lastUpdateTime: segment.lastReceivedTime,
-          lastReceivedTime: segment.lastReceivedTime,
-        }
-        rows.push(currentRow)
-      } else if (currentRow) {
-        currentRow.segments.push(segment)
-        currentRow.lastUpdateTime = Math.max(
-          currentRow.lastUpdateTime,
-          segment.lastReceivedTime
-        )
-        currentRow.lastReceivedTime = Math.max(
-          currentRow.lastReceivedTime,
-          segment.lastReceivedTime
-        )
-      }
+  useEffect(() => {
+    if (!room) return
+    room.on(RoomEvent.ParticipantNameChanged, updateParticipant)
+    return () => {
+      room.off(RoomEvent.ParticipantNameChanged, updateParticipant)
    }
-
-    return rows
-  }, [transcriptionSegments])
+  }, [room, updateParticipant])

  return (
    <SubtitlesWrapper areOpen={areSubtitlesOpen}>
@@ -2,14 +2,10 @@ 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()

@@ -24,18 +20,6 @@ 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,
@@ -1,36 +0,0 @@
-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])
-}
@@ -1,24 +0,0 @@
-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])
-}
@@ -1,108 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export type RestoreFocusOptions = {
-  resolveTrigger?: (activeEl: HTMLElement | null) => HTMLElement | null
-  onOpened?: () => void
-  onClosed?: () => void
-  restoreFocusRaf?: boolean
-  preventScroll?: boolean
-}
-
-/**
- * Capture the element that opened a panel/menu (on open transition) and restore focus to it
- * when the panel/menu closes.
- */
-export function useRestoreFocus(
-  isOpen: boolean,
-  options: RestoreFocusOptions = {}
-) {
-  const {
-    resolveTrigger,
-    onOpened,
-    onClosed,
-    restoreFocusRaf = false,
-    preventScroll = true,
-  } = options
-
-  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
-
-    // Just opened
-    if (!wasOpen && isOpen) {
-      const activeEl = document.activeElement as HTMLElement | null
-      triggerRef.current = resolveTrigger ? resolveTrigger(activeEl) : activeEl
-      onOpened?.()
-    }
-
-    // Just closed
-    if (wasOpen && !isOpen) {
-      const trigger = triggerRef.current
-      if (trigger && document.contains(trigger)) {
-        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()
-      }
-      triggerRef.current = null
-      onClosed?.()
-    }
-
-    prevIsOpenRef.current = isOpen
-
-    // Cleanup: remove focus ring if component unmounts before focus changes
-    return () => {
-      cleanupRef.current?.()
-      cleanupRef.current = null
-    }
-  }, [
-    isOpen,
-    onClosed,
-    onOpened,
-    preventScroll,
-    resolveTrigger,
-    restoreFocusRaf,
-  ])
-}
@@ -1,19 +0,0 @@
-import { useCallback } from 'react'
-import {
-  announceToScreenReader,
-  type Politeness,
-  type ScreenReaderChannel,
-} from '@/stores/screenReaderAnnouncer'
-
-export const useScreenReaderAnnounce = () => {
-  return useCallback(
-    (
-      message: string,
-      politeness: Politeness = 'polite',
-      channel: ScreenReaderChannel = 'global'
-    ) => {
-      announceToScreenReader(message, politeness, channel)
-    },
-    []
-  )
-}
@@ -10,7 +10,6 @@ import { FeedbackBanner } from '@/components/FeedbackBanner'
 import { Menu } from '@/primitives/Menu'
 import { MenuList } from '@/primitives/MenuList'
 import { LoginButton } from '@/components/LoginButton'
-import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip'

 import { useLoginHint } from '@/hooks/useLoginHint'

@@ -91,11 +90,6 @@ export const Header = () => {
  const isTermsOfService = useMatchesRoute('termsOfService')
  const isRoom = useMatchesRoute('room')
  const { user, isLoggedIn, logout } = useUser()
-  const userLabel = user?.full_name || user?.email
-  const loggedInTooltip = t('loggedInUserTooltip')
-  const loggedInAriaLabel = userLabel
-    ? `${loggedInTooltip} ${userLabel}`
-    : loggedInTooltip

  return (
    <>
@@ -159,24 +153,23 @@ export const Header = () => {
                )}
              {!!user && (
                <Menu>
-                  <Button size="sm" variant="secondaryText">
-                    <VisualOnlyTooltip
-                      tooltip={loggedInTooltip}
-                      ariaLabel={loggedInAriaLabel}
-                      tooltipPosition="bottom"
+                  <Button
+                    size="sm"
+                    variant="secondaryText"
+                    tooltip={t('loggedInUserTooltip')}
+                    tooltipType="delayed"
+                  >
+                    <span
+                      className={css({
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        maxWidth: '350px',
+                        display: { base: 'none', xsm: 'block' },
+                      })}
                    >
-                      <span
-                        className={css({
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          maxWidth: '350px',
-                          display: { base: 'none', xsm: 'block' },
-                        })}
-                      >
-                        {user?.full_name || user?.email}
-                      </span>
-                    </VisualOnlyTooltip>
+                      {user?.full_name || user?.email}
+                    </span>
                  </Button>
                  <MenuList
                    variant={'light'}
@@ -4,7 +4,6 @@ import { Header } from './Header'
 import { layoutStore } from '@/stores/layout'
 import { useSnapshot } from 'valtio'
 import { Footer } from '@/layout/Footer'
-import { ScreenReaderAnnouncer } from '@/primitives'

 export type Layout = 'fullpage' | 'centered'

@@ -42,7 +41,6 @@ export const Layout = ({ children }: { children: ReactNode }) => {
            flexDirection: 'column',
          })}
        >
-          <ScreenReaderAnnouncer />
          {children}
        </main>
      </div>
@@ -44,15 +44,18 @@
    },
    "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."
+      "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"
    },
    "slide2": {
      "title": "Gruppenanrufe ohne Einschränkungen",
-      "body": "Unbegrenzte Meeting-Dauer mit flüssiger, hochwertiger Kommunikation – unabhängig von der Gruppengröße."
+      "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"
    },
    "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!"
+      "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"
    }
  }
 }
@@ -17,7 +17,7 @@
  },
  "success": {
    "title": "Ihre Aufzeichnung ist bereit!",
-    "body": "Aufzeichnung des Treffens {{room}} vom {{created_at}}.",
+    "body": "Aufzeichnung des Treffens <b>{{room}}</b> vom {{created_at}}.",
    "expiration": "Achtung, diese Aufzeichnung wird nach {{expiration_days}} Tag(en) gelöscht.",
    "button": "Herunterladen",
    "warning": {
@@ -2,8 +2,7 @@
  "feedback": {
    "heading": {
      "normal": "Sie haben das Meeting verlassen",
-      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten",
-      "participantRemoved": "Sie wurden von einem Administrator aus dem Anruf entfernt"
+      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten"
    },
    "home": "Zur Startseite zurückkehren",
    "back": "Dem Meeting erneut beitreten"
@@ -86,7 +85,6 @@
    "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:"
@@ -156,8 +154,7 @@
    "body": "Du bist der einzige Teilnehmer. Dieses Gespräch endet in {{duration}}. Möchtest du das Gespräch fortsetzen?",
    "settings": "Um diese Nachricht nicht mehr zu sehen, gehe zu Einstellungen > Allgemein.",
    "stayButton": "Gespräch fortsetzen",
-    "leaveButton": "Jetzt verlassen",
-    "countdownAnnouncement": "Das Gespräch endet in {{duration}}."
+    "leaveButton": "Jetzt verlassen"
  },
  "controls": {
    "microphone": "Mikrofon",
@@ -194,9 +191,7 @@
    "leave": "Verlassen",
    "participants": {
      "open": "Alle ausblenden",
-      "closed": "Alle anzeigen",
-      "count_one": "{{count}} Teilnehmer",
-      "count_other": "{{count}} Teilnehmer"
+      "closed": "Alle anzeigen"
    },
    "tools": {
      "open": "Weitere Tools ausblenden",
@@ -210,18 +205,7 @@
    "reactions": {
      "button": "Reaktion senden",
      "send": "Reaktion {{emoji}} senden",
-      "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"
-      }
+      "you": "Sie"
    }
  },
  "options": {
@@ -249,34 +233,15 @@
    "clear": "Effekt deaktivieren",
    "blur": {
      "title": "Hintergrundunschärfe",
-      "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"
-      }
+      "light": "Leichte Unschärfe",
+      "normal": "Unschärfe",
+      "apply": "Unschärfe aktivieren",
+      "clear": "Unschärfe deaktivieren"
    },
    "virtual": {
      "title": "Virtueller Hintergrund",
-      "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"
-      }
+      "apply": "Virtuellen Hintergrund aktivieren",
+      "clear": "Virtuellen Hintergrund deaktivieren"
    },
    "faceLandmarks": {
      "title": "Visuelle Effekte",
@@ -291,8 +256,6 @@
    }
  },
  "sidePanel": {
-    "ariaLabel": "Seitenleiste",
-    "backToTools": "Zurück zu den Meeting-Tools",
    "heading": {
      "participants": "Teilnehmer",
      "effects": "Effekte",
@@ -505,7 +468,6 @@
  "participants": {
    "subheading": "Im Raum",
    "you": "Du",
-    "unknown": "Unbekannter Teilnehmer",
    "host": "Host",
    "contributors": "Mitwirkende",
    "collapsable": {
@@ -553,14 +515,6 @@
      "ariaLabel": "Hefte {{name}} an"
    }
  },
-  "pinAnnouncements": {
-    "pin": "Das Video von {{name}} ist angeheftet.",
-    "unpin": "Das Video von {{name}} ist nicht mehr angeheftet.",
-    "self": {
-      "pin": "Dein Video ist angeheftet.",
-      "unpin": "Dein Video ist nicht mehr angeheftet."
-    }
-  },
  "recordingStateToast": {
    "transcript": {
      "started": "Transkription läuft",
@@ -75,8 +75,6 @@
      "options": {
        "french": "Französisch (fr)",
        "english": "Englisch (en)",
-        "dutch": "Niederländisch (nl)",
-        "german": "Deutsch (de)",
        "auto": "Automatisch"
      }
    }
@@ -70,42 +70,19 @@
    },
    "article7": {
      "title": "7. Verpflichtungen und Verantwortlichkeiten von DINUM",
-      "content": "DINUM ist für die allgemeine Verwaltung des Dienstes verantwortlich. Sie stellt den Bediensteten alle erforderlichen Informationen zur Verfügung, um die Nutzung zu erleichtern. Sie bietet technische und funktionale Unterstützung, um den ordnungsgemäßen Betrieb des Dienstes sicherzustellen. Sie informiert die Nutzer auf jede zumutbare Weise über jede Schwierigkeit, die diesen ordnungsgemäßen Betrieb beeinträchtigen könnte.",
      "sections": {
        "section1": {
-          "title": "7.1. Verfügbarkeitsniveau",
+          "title": "7.1. Sicherheit und Plattformzugang",
+          "content": "DINUM verpflichtet sich, Visio zu sichern, insbesondere durch alle notwendigen Maßnahmen zur Gewährleistung der Sicherheit und Vertraulichkeit der bereitgestellten Informationen.",
          "paragraphs": [
-            "Der Dienst ist 24/7 verfügbar, vorbehaltlich Wartungszeiten.",
-            "DINUM verfolgt ein jährliches Verfügbarkeitsziel von 99,5 % (ohne geplante Ausfälle). Bei einem Vorfall oder einer Wartung strebt sie eine Wiederherstellungszeit von 72 Stunden außerhalb der Geschäftszeiten an.",
-            "Im Rahmen der Wartung der Ausführungsumgebung des Dienstes behält sich DINUM das Recht vor, den Betrieb des Dienstes vorübergehend auszusetzen. Sie informiert die Nutzer mindestens 48 Stunden im Voraus. In dringenden Fällen kann diese Aussetzung ohne Vorankündigung erfolgen.",
-            "Diese außergewöhnlichen Stillstände können beispielsweise für Maßnahmen zur Datenverwaltung im Back Office, Produktionsbereitstellungen oder Architekturänderungen erforderlich sein.",
-            "Eine Nichtverfügbarkeit des Dienstes begründet keinerlei Anspruch auf Entschädigung."
+            "DINUM verpflichtet sich, die notwendigen und angemessenen Mittel bereitzustellen, um einen kontinuierlichen Zugang zu Visio zu gewährleisten.",
+            "DINUM behält sich das Recht vor, den Dienst aus Wartungsgründen oder aus anderen als notwendig erachteten Gründen ohne Vorankündigung zu ändern, zu modifizieren oder auszusetzen.",
+            "DINUM behält sich das Recht vor, ein Nutzerkonto des Dienstes zu sperren oder zu löschen, das gegen diese Nutzungsbedingungen verstoßen hat, unbeschadet etwaiger strafrechtlicher und zivilrechtlicher Maßnahmen, die gegen den Nutzer ergriffen werden könnten."
          ]
        },
        "section2": {
-          "title": "7.2. Sicherheit des Dienstes",
-          "paragraphs": [
-            "DINUM ergreift alle erforderlichen Vorsichtsmaßnahmen, um die Sicherheit der Plattform und der im Rahmen des Dienstes eingesetzten Werkzeuge zu gewährleisten, insbesondere in Bezug auf den Zugang zum Dienst, die Verwaltung der Nutzerkonten und die Verarbeitung der erhobenen Daten."
-          ]
-        },
-        "section3": {
-          "title": "7.3. Support-Management",
-          "paragraphs": [
-            "DINUM leistet First-Level-Support für die Nutzer, ausschließlich zu den technischen Teilen des Dienstes.",
-            "Dieser Support ist über unser Online-Kontaktformular erreichbar.",
-            "Die angestrebte Antwortzeit auf Anfragen beträgt zwei Werktage ab Absenden; dieser Zeitraum kann je nach Komplexität und Anzahl der zu bearbeitenden Anfragen variieren."
-          ]
-        },
-        "section4": {
-          "title": "7.4. Kontrolle der Dienstenutzung",
-          "paragraphs": [
-            "DINUM behält sich das Recht vor, ein Agentenkonto zu sperren oder zu löschen, das gegen diese Nutzungsbedingungen verstoßen hat, unbeschadet etwaiger straf- und zivilrechtlicher Maßnahmen gegen den betreffenden Agenten.",
-            "Die Sperrung oder Aufhebung eines oder mehrerer Konten begründet keinen Anspruch auf irgendeine Entschädigung."
-          ]
-        },
-        "section5": {
-          "title": "7.5. Open Source und Lizenzen",
-          "content": "Der Quellcode des Dienstes ist frei und hier verfügbar: https://github.com/suitenumerique/meet. Die von DINUM angebotenen Inhalte stehen unter einer Open License, mit Ausnahme von Logos sowie ikonografischen und fotografischen Darstellungen, die möglicherweise eigenen Lizenzen unterliegen."
+          "title": "7.2. Open Source und Lizenzen",
+          "content": "Der Quellcode von Visio ist frei und hier verfügbar: https://github.com/suitenumerique/meet\nDie von DINUM angebotenen Inhalte stehen unter einer Open License, mit Ausnahme von Logos sowie ikonografischen und fotografischen Darstellungen, die möglicherweise eigenen Lizenzen unterliegen."
        }
      }
    },
@@ -13,7 +13,7 @@
    "heading": "You don't have the permission to view this page"
  },
  "loading": "Loading…",
-  "loggedInUserTooltip": "Logged in as ",
+  "loggedInUserTooltip": "Logged in as…",
  "login": {
    "buttonLabel": "Login",
    "proconnectButtonLabel": "Login with ProConnect",
@@ -44,15 +44,18 @@
    },
    "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."
+      "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"
    },
    "slide2": {
      "title": "Host group calls without limits",
-      "body": "Unlimited time meetings, with smooth and high-quality communication, no matter the group size."
+      "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"
    },
    "slide3": {
      "title": "Transform your meetings with AI",
-      "body": "Get accurate and actionable transcripts to boost your productivity. Feature in beta—try it now!"
+      "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"
    }
  }
 }
@@ -17,7 +17,7 @@
  },
  "success": {
    "title": "Your recording is ready!",
-    "body": "Recording of the meeting {{room}} from {{created_at}}.",
+    "body": "Recording of the meeting <b>{{room}}</b> from {{created_at}}.",
    "expiration": "Attention, this recording will expire after {{expiration_days}} day(s).",
    "button": "Download",
    "warning": {
@@ -2,8 +2,7 @@
  "feedback": {
    "heading": {
      "normal": "You have left the meeting",
-      "duplicateIdentity": "You have joined the meeting from another device",
-      "participantRemoved": "You have been removed from the meeting by an administrator"
+      "duplicateIdentity": "You have joined the meeting from another device"
    },
    "home": "Return to home",
    "back": "Rejoin the meeting"
@@ -16,7 +15,7 @@
      "audio": "Audio settings",
      "video": "Video settings"
    },
-    "effects": "Backgrounds and Effects",
+    "effects": "Effects",
    "videoinput": {
      "choose": "Select camera",
      "permissionsNeeded": "Select camera - permission needed",
@@ -39,7 +38,7 @@
  },
  "join": {
    "effects": {
-      "description": "Apply backgrounds and effects",
+      "description": "Apply effects",
      "title": "Effects",
      "subTitle": "Configure your camera's effects."
    },
@@ -86,7 +85,6 @@
    "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:"
@@ -156,8 +154,7 @@
    "body": "You are the only participant. This call will end in {{duration}}. Would you like to continue the call?",
    "settings": "To stop seeing this message, go to Settings > General.",
    "stayButton": "Continue the call",
-    "leaveButton": "Leave now",
-    "countdownAnnouncement": "Call ends in {{duration}}."
+    "leaveButton": "Leave now"
  },
  "controls": {
    "microphone": "Microphone",
@@ -194,9 +191,7 @@
    "leave": "Leave",
    "participants": {
      "open": "Hide everyone",
-      "closed": "See everyone",
-      "count_one": "{{count}} participant",
-      "count_other": "{{count}} participants"
+      "closed": "See everyone"
    },
    "tools": {
      "open": "Hide more tools",
@@ -210,18 +205,7 @@
    "reactions": {
      "button": "Send reaction",
      "send": "Send reaction {{emoji}}",
-      "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"
-      }
+      "you": "you"
    }
  },
  "options": {
@@ -232,7 +216,7 @@
      "screenRecording": "Screen recording",
      "transcript": "Transcription",
      "username": "Update Your Name",
-      "effects": "Backgrounds and Effects",
+      "effects": "Apply effects",
      "switchCamera": "Switch camera",
      "fullscreen": {
        "enter": "Fullscreen",
@@ -249,34 +233,15 @@
    "clear": "Disable effect",
    "blur": {
      "title": "Background 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"
-      }
+      "light": "Light blur",
+      "normal": "Blur",
+      "apply": "Enable blur",
+      "clear": "Disable blur"
    },
    "virtual": {
      "title": "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"
-      }
+      "apply": "Enable virtual background",
+      "clear": "Disable virtual background"
    },
    "faceLandmarks": {
      "title": "Visual Effects",
@@ -291,11 +256,9 @@
    }
  },
  "sidePanel": {
-    "ariaLabel": "Sidepanel",
-    "backToTools": "Back to meeting tools",
    "heading": {
      "participants": "Participants",
-      "effects": "Backgrounds and Effects",
+      "effects": "Effects",
      "chat": "Messages in the chat",
      "transcript": "Transcribe",
      "screenRecording": "Record",
@@ -305,7 +268,7 @@
    },
    "content": {
      "participants": "participants",
-      "effects": "Backgrounds and Effects",
+      "effects": "effects",
      "chat": "messages",
      "transcript": "transcribe",
      "screenRecording": "record",
@@ -505,7 +468,6 @@
  "participants": {
    "subheading": "In room",
    "you": "You",
-    "unknown": "Unknown participant",
    "host": "Host",
    "contributors": "Contributors",
    "collapsable": {
@@ -553,14 +515,6 @@
      "ariaLabel": "Pin {{name}}"
    }
  },
-  "pinAnnouncements": {
-    "pin": "The video of {{name}} is pinned.",
-    "unpin": "The video of {{name}} is no longer pinned.",
-    "self": {
-      "pin": "Your video is pinned.",
-      "unpin": "Your video is no longer pinned."
-    }
-  },
  "recordingStateToast": {
    "transcript": {
      "started": "Transcribing",
@@ -589,7 +543,7 @@
      "enable": "Pin",
      "disable": "Unpin"
    },
-    "effects": "Apply backgrounds and effects",
+    "effects": "Apply visual effects",
    "muteParticipant": "Mute {{name}}",
    "fullScreen": "Full screen"
  },
@@ -75,8 +75,6 @@
      "options": {
        "french": "French (fr)",
        "english": "English (en)",
-        "dutch": "Dutch (nl)",
-        "german": "German (de)",
        "auto": "Automatic"
      }
    }
@@ -108,18 +106,12 @@
    "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"
  }
 }
@@ -70,42 +70,19 @@
    },
    "article7": {
      "title": "7. DINUM Commitments and Responsibilities",
-      "content": "DINUM is responsible for the overall administration of the service. It provides agents with all necessary information to facilitate its use. It offers technical and functional assistance to ensure the proper operation of the service. It informs users by any reasonable means of any difficulty that may affect this proper operation.",
      "sections": {
        "section1": {
-          "title": "7.1. Service Availability",
+          "title": "7.1. Security and Platform Access",
+          "content": "DINUM is committed to securing Visio, notably by taking all necessary measures to ensure the security and confidentiality of the information provided.",
          "paragraphs": [
-            "The service is available 24/7, except during maintenance windows.",
-            "DINUM targets an annual service availability of 99.5%, excluding planned outages. In case of an incident or maintenance, it aims for a recovery time of 72 hours outside business hours.",
-            "As part of maintaining the service runtime environment, DINUM reserves the right to temporarily suspend the operation of the service. It informs users at least 48 hours in advance. In emergencies, this suspension may occur without notice.",
-            "These exceptional stoppages may be necessary, for example, for back-office data management operations, production deployments, or architecture changes.",
-            "Service unavailability does not give rise to any compensation of any kind."
+            "DINUM commits to providing the necessary and reasonable means to ensure continuous access to Visio.",
+            "DINUM reserves the right to evolve, modify, or suspend the service without notice for maintenance reasons or for any other reason deemed necessary.",
+            "DINUM reserves the right to suspend or delete a user account of the service that has violated these terms of use, without prejudice to any potential criminal and civil liability actions that could be taken against the user."
          ]
        },
        "section2": {
-          "title": "7.2. Service Security",
-          "paragraphs": [
-            "DINUM takes all necessary precautions to preserve the security of the platform and the tools used within the service, particularly regarding access to the service, management of user accounts, and processing of collected data."
-          ]
-        },
-        "section3": {
-          "title": "7.3. Support Management",
-          "paragraphs": [
-            "DINUM provides first-level support to users, exclusively on the technical parts of the service.",
-            "This support can be reached via our online contact form.",
-            "The target response time to requests is two business days from submission; this timeframe may vary depending on the complexity and number of requests to be processed."
-          ]
-        },
-        "section4": {
-          "title": "7.4. Monitoring Service Use",
-          "paragraphs": [
-            "DINUM reserves the right to suspend or delete an agent account that has violated these terms of use, without prejudice to any potential criminal and civil liability actions that could be taken against the agent concerned.",
-            "The suspension or revocation of one or more accounts does not entitle the user to any compensation of any kind."
-          ]
-        },
-        "section5": {
-          "title": "7.5. Open Source and Licenses",
-          "content": "The service source code is free and available here: https://github.com/suitenumerique/meet. The content offered by DINUM is under an Open License, with the exception of logos and iconographic and photographic representations that may be governed by their own licenses."
+          "title": "7.2 Open Source and Licenses",
+          "content": "The source code of Visio is free and available here: https://github.com/suitenumerique/meet\nThe content offered by DINUM is under an Open License, with the exception of logos and iconographic and photographic representations that may be governed by their own licenses."
        }
      }
    },
@@ -13,7 +13,7 @@
    "heading": "Accès interdit"
  },
  "loading": "Chargement…",
-  "loggedInUserTooltip": "Connecté en tant que ",
+  "loggedInUserTooltip": "Connecté en tant que…",
  "login": {
    "buttonLabel": "Se connecter",
    "proconnectButtonLabel": "S'identifier avec ProConnect",
@@ -44,15 +44,18 @@
    },
    "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."
+      "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"
    },
    "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."
+      "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"
    },
    "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 !"
+      "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"
    }
  }
 }
@@ -17,7 +17,7 @@
  },
  "success": {
    "title": "Votre enregistrement est prêt !",
-    "body": "Enregistrement de la réunion {{room}} du {{created_at}}.",
+    "body": "Enregistrement de la réunion <b>{{room}}</b> du {{created_at}}.",
    "expiration": "Attention cet enregistrement expirera au bout de {{expiration_days}} jour(s).",
    "button": "Télécharger",
    "warning": {
@@ -2,8 +2,7 @@
  "feedback": {
    "heading": {
      "normal": "Vous avez quitté la réunion",
-      "duplicateIdentity": "Vous avez rejoint la réunion depuis un autre appareil",
-      "participantRemoved": "Vous avez été exclu de l'appel par un administrateur"
+      "duplicateIdentity": "Vous avez rejoint la réunion depuis un autre appareil"
    },
    "home": "Retourner à l'accueil",
    "back": "Réintégrer la réunion"
@@ -16,7 +15,7 @@
      "audio": "Paramètres audio",
      "video": "Paramètres video"
    },
-    "effects": "Arrière-plans et effets",
+    "effects": "Effets d'arrière-plan",
    "videoinput": {
      "choose": "Choisir la webcam",
      "permissionsNeeded": "Choisir la webcam - autorisations nécessaires",
@@ -40,8 +39,8 @@
  "join": {
    "heading": "Rejoindre la réunion ?",
    "effects": {
-      "description": "Arrière-plans et effets",
-      "title": "Arrière-plans et effets",
+      "description": "Effets d'arrière-plan",
+      "title": "Effets",
      "subTitle": "Paramétrez les effets de votre caméra."
    },
    "joinLabel": "Rejoindre",
@@ -86,7 +85,6 @@
    "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 :"
@@ -156,8 +154,7 @@
    "body": "Vous êtes le seul participant. Cet appel va donc se terminer dans {{duration}}. Voulez-vous poursuivre l'appel ?",
    "settings": "Pour ne plus voir ce message, accèder à Paramètres > Général.",
    "stayButton": "Poursuivre l'appel",
-    "leaveButton": "Quitter maintenant",
-    "countdownAnnouncement": "L'appel se termine dans {{duration}}."
+    "leaveButton": "Quitter maintenant"
  },
  "controls": {
    "microphone": "Microphone",
@@ -194,9 +191,7 @@
    "leave": "Quitter",
    "participants": {
      "open": "Masquer les participants",
-      "closed": "Afficher les participants",
-      "count_one": "{{count}} participant",
-      "count_other": "{{count}} participants"
+      "closed": "Afficher les participants"
    },
    "tools": {
      "open": "Masquer les outils de réunion",
@@ -210,18 +205,7 @@
    "reactions": {
      "button": "Envoyer une réaction",
      "send": "Envoyer la réaction {{emoji}}",
-      "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"
-      }
+      "you": "vous"
    }
  },
  "options": {
@@ -232,7 +216,7 @@
      "screenRecording": "Enregistrement",
      "transcript": "Transcription",
      "username": "Choisir votre nom",
-      "effects": "Arrière-plans et effets",
+      "effects": "Effets d'arrière-plan",
      "switchCamera": "Changer de caméra",
      "fullscreen": {
        "enter": "Plein écran",
@@ -246,37 +230,18 @@
    "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'effet",
+    "clear": "Désactiver l'effect",
    "blur": {
      "title": "Flou d'arrière-plan",
-      "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"
-      }
+      "light": "Flou léger",
+      "normal": "Flou",
+      "apply": "Activer le flou",
+      "clear": "Désactiver le flou"
    },
    "virtual": {
      "title": "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é"
-      }
+      "apply": "Activer l'arrière-plan virtuel",
+      "clear": "Désactiver l'arrière-plan virtuel"
    },
    "faceLandmarks": {
      "title": "Effets visuels",
@@ -291,11 +256,9 @@
    }
  },
  "sidePanel": {
-    "ariaLabel": "Panneau latéral",
-    "backToTools": "Retour aux outils de réunion",
    "heading": {
      "participants": "Participants",
-      "effects": "Arrière-plans et effets",
+      "effects": "Effets",
      "chat": "Messages dans l'appel",
      "transcript": "Transcrire",
      "screenRecording": "Enregistrer",
@@ -505,7 +468,6 @@
  "participants": {
    "subheading": "Dans la réunion",
    "you": "Vous",
-    "unknown": "Participant inconnu",
    "contributors": "Contributeurs",
    "host": "Organisateur de la réunion",
    "collapsable": {
@@ -553,14 +515,6 @@
      "ariaLabel": "Épingler {{name}}"
    }
  },
-  "pinAnnouncements": {
-    "pin": "La vidéo de {{name}} est épinglée.",
-    "unpin": "La vidéo de {{name}} n’est plus épinglée.",
-    "self": {
-      "pin": "Votre vidéo est épinglée.",
-      "unpin": "Votre vidéo n’est plus épinglée."
-    }
-  },
  "recordingStateToast": {
    "transcript": {
      "started": "Transcription en cours",
@@ -589,7 +543,7 @@
      "enable": "Épingler",
      "disable": "Annuler l'épinglage"
    },
-    "effects": "Arrière-plans et effets",
+    "effects": "Effets d'arrière-plan",
    "muteParticipant": "Couper le micro de {{name}}",
    "fullScreen": "Plein écran"
  },
@@ -75,8 +75,6 @@
      "options": {
        "french": "Français (fr)",
        "english": "Anglais (en)",
-        "dutch": "Hollandais (nl)",
-        "german": "Allemand (de)",
        "auto": "Automatique"
      }
    }
@@ -108,18 +106,12 @@
    "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"
  }
 }
@@ -16,7 +16,7 @@
    },
    "article4": {
      "title": "4. Utilisation",
-      "content": "L'utilisation du service est libre et gratuite, pour administrer un salon de visioconférence, il est nécessaire de se connecter par ProConnect."
+      "content": "L'utilisation du service est libre et gratuite, pour administration un salon de visioconférence, il est nécessaire de se connecter par ProConnect."
    },
    "article5": {
      "title": "5. Fonctionnalités",
@@ -70,42 +70,19 @@
    },
    "article7": {
      "title": "7. Engagements et responsabilités de la DINUM",
-      "content": "La DINUM est responsable de l’administration générale du service. Elle transmet aux agents toutes les informations nécessaires pour faciliter son utilisation. Elle propose une assistance technique et fonctionnelle en vue d’assurer le bon fonctionnement du service. Elle informe par tout moyen raisonnable les utilisateurs de toute difficulté de nature à affecter ce bon fonctionnement.",
      "sections": {
        "section1": {
-          "title": "7.1. Niveau de disponibilité",
+          "title": "7.1. Sécurité et accès à la plateforme",
+          "content": "La DINUM s'engage à la sécurisation de Visio, notamment en prenant toutes les mesures nécessaires permettant de garantir la sécurité et la confidentialité des informations fournies.",
          "paragraphs": [
-            "La plage d’ouverture du Service est 24h/24 7j/7, hors période d’indisponibilité pour maintenance.",
-            "La DINUM poursuit un objectif de disponibilité annuelle du service de 99,5%, hors indisponibilités planifiées. En cas d’incident ou de maintenance, elle vise un délai de rétablissement de 72h en heures non ouvrables.",
-            "Dans le cadre d’une maintenance de l’environnement d’exécution du service, La DINUM se réserve le droit de suspendre temporairement le fonctionnement du service. Elle tient informée les utilisateurs au minimum 48h à l’avance. En cas d’urgence, cette suspension peut intervenir sans préavis.",
-            "Ces arrêts exceptionnels peuvent être rendus nécessaires par exemple pour des opérations de gestion des données en back office, des opérations de mise en production ou des changements d’architecture.",
-            "L’indisponibilité du service n’ouvre droit à aucune compensation de quelque nature que ce soit."
+            "La DINUM s'engage à fournir les moyens nécessaires et raisonnables pour assurer un accès continu à Visio.",
+            "La DINUM se réserve le droit de faire évoluer, de modifier ou de suspendre, sans préavis, le service pour des raisons de maintenance ou pour tout autre motif jugé nécessaire.",
+            "La DINUM se réserve le droit de suspendre ou supprimer un compte utilisateur ou utilisatrice du service qui aurait méconnu les présentes modalités d'utilisation, sans préjudice des éventuelles actions en responsabilité pénale et civile qui pourraient être engagées à l'encontre de l'utilisateur ou l'utilisatrice."
          ]
        },
        "section2": {
-          "title": "7.2. Sécurité du service",
-          "paragraphs": [
-            "La DINUM prend toutes les précautions utiles pour préserver la sécurité de la plateforme et des outils mis en œuvre dans le cadre du service, notamment s’agissant de l’accès au service, de la gestion des comptes utilisateurs et du traitement des données collectées."
-          ]
-        },
-        "section3": {
-          "title": "7.3. Gestion du support",
-          "paragraphs": [
-            "La DINUM assure le support de premier niveau auprès des utilisateurs, exclusivement sur les parties techniques du service.",
-            "Ce support est joignable sur notre formulaire de contact en ligne.",
-            "L’objectif de réponse aux sollicitations est de deux jours ouvrés à compter de l’envoi du courriel, ce délai peut varier selon la complexité et le nombre de demandes à traiter."
-          ]
-        },
-        "section4": {
-          "title": "7.4. Contrôle de l’utilisation du service",
-          "paragraphs": [
-            "La DINUM se réserve le droit de suspendre ou supprimer un compte agent qui aurait méconnu les présentes modalités d’utilisation, sans préjudice des éventuelles actions en responsabilité pénale et civile qui pourraient être engagées à l’encontre de l’agent concerné.",
-            "La suspension ou la révocation d’un ou plusieurs comptes ne donne lieu à aucune compensation d’aucune sorte."
-          ]
-        },
-        "section5": {
-          "title": "7.5. Open Source et Licences",
-          "content": "Le code source du service est libre et disponible ici : https://github.com/suitenumerique/meet. Les contenus proposés par la DINUM sont sous Licence Ouverte, à l’exception des logos et des représentations iconographiques et photographiques pouvant être régis par leurs licences propres."
+          "title": "7.2 Open Source et Licences",
+          "content": "Le code source de Visio est libre et disponible ici : https://github.com/suitenumerique/meet\nLes contenus proposés par la DINUM sont sous Licence Ouverte, à l'exception des logos et des représentations iconographiques et photographiques pouvant être régis par leurs licences propres."
        }
      }
    },
--- a/Show More
+++ b/Show More