wip

align formatting with prettier checks to keep ci passing consistently.

Co-authored-by: Cursor <cursoragent@cursor.com>

CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [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
@@ -23,6 +47,8 @@ and this project adheres to
 - ♿️(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
 

README.md

@@ -50,6 +50,9 @@ 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
 
@@ -86,7 +89,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 |
-| [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. |
+| [mosacloud.cloud](https://mosa.cloud/)                        | mosa.cloud    | Demo instance of mosa.cloud, a dutch company providing services around La Suite apps. |
 
 
 ## Contributing

docker/livekit/config/livekit-server.yaml

@@ -3,3 +3,8 @@ redis:
   address: redis:6379
 keys:
   devkey: secret
+
+webhook:
+  api_key: devkey
+  urls:
+      - http://app-dev:8000/api/v1.0/rooms/webhooks-livekit/

docs/examples/compose/compose.yaml

@@ -10,7 +10,7 @@ services:
     - env.d/postgresql
     - env.d/common
     volumes:
-    - ./data/databases/backend:/var/lib/postgresql/data/pgdata
+    - ./data/databases/backend:/var/lib/postgresql/data
 
   redis:
     image: redis:5

docs/examples/compose/keycloak/README.md

@@ -8,7 +8,7 @@
 ### Step 1: Prepare your working environment:
 
 ```bash
-mkdir keycloak/env.d && cd keycloak
+mkdir -p 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.

docs/installation/compose.md

@@ -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](../env.md).
+Meet configuration is achieved through environment variables. We provide a [detailed description of all variables](../../src/helm/meet/README.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 follwoing:
+If you are using ufw, enter the following:
 ```
 ufw allow 80/tcp
 ufw allow 443/tcp
@@ -177,6 +177,15 @@ 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 !
@@ -198,7 +207,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
 

env.d/production.dist/common

@@ -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}"

src/agents/pyproject.toml

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

src/backend/core/external_api/viewsets.py

@@ -28,7 +28,7 @@ from . import authentication, permissions, serializers
 logger = getLogger(__name__)
 
 
-class ApplicationViewSet(viewsets.GenericViewSet):
+class ApplicationViewSet(viewsets.ViewSet):
     """API endpoints for application authentication and token generation."""
 
     @decorators.action(

src/backend/meet/settings.py

@@ -336,6 +336,9 @@ 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
         ),

src/backend/pyproject.toml

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

src/frontend/package-lock.json

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

src/frontend/package.json

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

src/frontend/src/api/useConfig.ts

@@ -17,6 +17,7 @@ export interface ApiConfig {
   feedback: {
     url: string
   }
+  external_home_url?: string
   silence_livekit_debug_logs?: boolean
   is_silent_login_enabled?: boolean
   custom_css_url?: string

src/frontend/src/features/home/routes/Home.tsx

@@ -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, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
@@ -19,6 +19,7 @@ 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 (
@@ -155,9 +156,34 @@ 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>

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

@@ -1,6 +1,6 @@
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
-import { useMemo, useRef, useState, useEffect } from 'react'
+import { useMemo, useRef, useEffect } from 'react'
 import { Text } from '@/primitives'
 import {
   RecordingMode,
@@ -13,6 +13,7 @@ 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', {
@@ -21,8 +22,8 @@ export const RecordingStateToast = () => {
 
   const { openTranscript, openScreenRecording } = useSidePanel()
 
-  const [srMessage, setSrMessage] = useState('')
   const lastKeyRef = useRef('')
+  const announce = useScreenReaderAnnounce()
 
   const hasTranscriptAccess = useHasRecordingAccess(
     RecordingMode.Transcript,
@@ -76,16 +77,9 @@ export const RecordingStateToast = () => {
     if (key && key !== lastKeyRef.current) {
       lastKeyRef.current = key
       const message = t(key)
-      setSrMessage(message)
-
-      // Clear message after 3 seconds to prevent it from being announced again
-      const timer = setTimeout(() => {
-        setSrMessage('')
-      }, 3000)
-
-      return () => clearTimeout(timer)
+      announce(message)
     }
-  }, [key, t])
+  }, [announce, key, t])
 
   if (!key) return null
 
@@ -95,15 +89,6 @@ export const RecordingStateToast = () => {
 
   return (
     <>
-      {/* Screen reader only message to announce state changes once */}
-      <div
-        role="status"
-        aria-live="polite"
-        aria-atomic="true"
-        className="sr-only"
-      >
-        {srMessage}
-      </div>
       {/* Visual banner (without aria-live to avoid duplicate announcements) */}
       <div
         className={css({

src/frontend/src/features/recording/routes/RecordingDownload.tsx

@@ -104,14 +104,12 @@ export const RecordingDownload = () => {
               {t('success.title')}
             </H>
             <Text centered margin="md" wrap={'balance'}>
-              <span
-                dangerouslySetInnerHTML={{
-                  __html: t('success.body', {
-                    room: data.room.name,
-                    created_at: formatDate(data.created_at, 'YYYY-MM-DD HH:mm'),
-                  }),
-                }}
-              />
+              <span>
+                {t('success.body', {
+                  room: data.room.name,
+                  created_at: formatDate(data.created_at, 'YYYY-MM-DD HH:mm'),
+                })}
+              </span>
               <span>
                 {configData?.recording?.expiration_days && (
                   <>

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

@@ -446,16 +446,14 @@ export const Join = ({
                 type="text"
                 onChange={saveUsername}
                 label={t('usernameLabel')}
-                aria-label={t('usernameLabel')}
+                id="input-name"
                 defaultValue={username}
                 validate={(value) => !value && t('errors.usernameEmpty')}
                 wrapperProps={{
                   noMargin: true,
                   fullWidth: true,
                 }}
-                labelProps={{
-                  center: true,
-                }}
+                autoComplete="name"
                 maxLength={50}
               />
             </VStack>

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

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

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

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useEffect, useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
@@ -9,24 +9,16 @@ import { useRoomData } from '../hooks/useRoomData'
 import { formatPinCode } from '../../utils/telephony'
 import { useTelephony } from '../hooks/useTelephony'
 import { useCopyRoomToClipboard } from '../hooks/useCopyRoomToClipboard'
-
-const useFocusOnOpen = ({ ref, key }) => {
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      const panel = ref.current
-      if (panel) {
-        const firstButton = panel.querySelector<HTMLElement>(key)
-        if (firstButton) {
-          firstButton.focus({ preventScroll: true })
-        }
-      }
-    })
-  }, [])
-}
+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 panelRef = useRef()
+  const { isInfoOpen } = useSidePanel()
+  const panelRef = useSidePanelRef()
+  const { getTrigger } = useSidePanelTriggers()
 
   const data = useRoomData()
   const roomUrl = getRouteUrl('room', data?.slug)
@@ -39,7 +31,26 @@ export const Info = () => {
 
   const { isCopied, copyRoomToClipboard } = useCopyRoomToClipboard(data)
 
-  useFocusOnOpen({ ref: panelRef, key: '[data-attr="copy-info-sidepanel"]' })
+  // 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
@@ -49,7 +60,6 @@ export const Info = () => {
       flexGrow={1}
       flexDirection="column"
       alignItems="start"
-      ref={panelRef}
     >
       <VStack alignItems="start">
         <Text

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

@@ -1,21 +1,26 @@
-import { Button, Dialog, H, P } from '@/primitives'
+import { Button, Dialog, H, P, ScreenReaderAnnouncer } 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, useState } from 'react'
+import { useEffect, useRef, 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) {
@@ -35,10 +40,42 @@ export const IsIdleDisconnectModal = () => {
     }
   }, [connectionObserverSnap.isIdleDisconnectModalOpen])
 
-  const minutes = Math.floor(timeRemaining / 1000 / 60)
-  const seconds = (timeRemaining / 1000) % 60
+  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 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}
@@ -52,6 +89,7 @@ export const IsIdleDisconnectModal = () => {
       {({ close }) => {
         return (
           <div>
+            <ScreenReaderAnnouncer channel="idle" />
             <div
               className={css({
                 height: '50px',
@@ -65,6 +103,7 @@ export const IsIdleDisconnectModal = () => {
                 color: 'blue.800',
                 margin: 'auto',
               })}
+              aria-hidden="true"
             >
               {formattedTime}
             </div>

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

@@ -8,6 +8,7 @@ import { Reaction } from '@/features/rooms/livekit/components/controls/Reactions
 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
@@ -146,15 +147,14 @@ export function ReactionPortal({
 export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
   const { announceReactions } = useSnapshot(accessibilityStore)
-  const [announcement, setAnnouncement] = useState<string | null>(null)
   const [lastAnnouncedId, setLastAnnouncedId] = useState<number | null>(null)
+  const announce = useScreenReaderAnnounce()
 
   const latestReaction =
     reactions.length > 0 ? reactions[reactions.length - 1] : undefined
 
   useEffect(() => {
     if (!announceReactions) {
-      setAnnouncement(null)
       return
     }
     if (!latestReaction) return
@@ -166,12 +166,9 @@ export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
       ? t('you')
       : latestReaction.participant?.name?.trim() ||
         t('someone', { defaultValue: 'Someone' })
-    setAnnouncement(t('announce', { name: participantName, emoji: emojiLabel }))
+    announce(t('announce', { name: participantName, emoji: emojiLabel }))
     setLastAnnouncedId(latestReaction.id)
-
-    const timer = setTimeout(() => setAnnouncement(null), 1200)
-    return () => clearTimeout(timer)
-  }, [latestReaction, lastAnnouncedId, announceReactions, t])
+  }, [announce, latestReaction, lastAnnouncedId, announceReactions, t])
 
   return (
     <>
@@ -182,14 +179,6 @@ export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) => {
           participant={instance.participant}
         />
       ))}
-      <div
-        role="status"
-        aria-live="polite"
-        aria-atomic="true"
-        className="sr-only"
-      >
-        {announcement ?? ''}
-      </div>
     </>
   )
 }

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

@@ -152,6 +152,7 @@ const SidePanelContent = () => {
     isInfoOpen,
     isSubPanelOpen,
     activeSubPanelId,
+    closeSidePanel,
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
   const panelRef = useSidePanelRef()
@@ -159,12 +160,7 @@ const SidePanelContent = () => {
   useEscapeKey(
     () => {
       // Close subpanel + panel together for a consistent Escape behavior
-      if (isSubPanelOpen) {
-        layoutStore.activeSubPanelId = null
-        layoutStore.activePanelId = null
-        return
-      }
-      layoutStore.activePanelId = null
+      closeSidePanel()
     },
     {
       isActive: isSidePanelOpen,
@@ -176,10 +172,7 @@ const SidePanelContent = () => {
     <StyledSidePanel
       title={t(`heading.${activeSubPanelId || activePanelId}`)}
       ariaLabel={t('ariaLabel')}
-      onClose={() => {
-        layoutStore.activePanelId = null
-        layoutStore.activeSubPanelId = null
-      }}
+      onClose={closeSidePanel}
       closeButtonTooltip={t('closeButton', {
         content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
@@ -189,12 +182,11 @@ const SidePanelContent = () => {
       onBack={() => (layoutStore.activeSubPanelId = null)}
       panelRef={panelRef}
     >
-      {/* keepAlive preserves focus restoration + state (e.g. scroll/input) across panels;
-          revisit if memory becomes a concern */}
-      <Panel isOpen={isParticipantsOpen} keepAlive={true}>
+      {/* keepAlive stays only for Info to reduce memory footprint */}
+      <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />
       </Panel>
-      <Panel isOpen={isEffectsOpen} keepAlive={true}>
+      <Panel isOpen={isEffectsOpen}>
         <Effects />
       </Panel>
       <Panel isOpen={isChatOpen} keepAlive={true}>
@@ -203,7 +195,7 @@ const SidePanelContent = () => {
       <Panel isOpen={isToolsOpen} keepAlive={true}>
         <Tools />
       </Panel>
-      <Panel isOpen={isAdminOpen} keepAlive={true}>
+      <Panel isOpen={isAdminOpen}>
         <Admin />
       </Panel>
       <Panel isOpen={isInfoOpen}>

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

@@ -16,7 +16,7 @@ import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { TrackSource } from '@livekit/protocol'
 import Source = Track.Source
 import { isSafari } from '@/utils/livekit'
-import { useFocusOnOpen } from '@/hooks/useFocusOnOpen'
+import { AUDIO_INPUT_FOCUS_SELECTOR } from './deviceFocusSelectors'
 
 type AudioDevicesControlProps = Omit<
   UseTrackToggleProps<Source.Microphone>,
@@ -31,7 +31,6 @@ export const AudioDevicesControl = ({
 }: AudioDevicesControlProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
   const [isMenuOpen, setIsMenuOpen] = React.useState(false)
-  const popoverContentRef = React.useRef<HTMLDivElement>(null)
 
   const {
     userChoices: { audioDeviceId, audioOutputDeviceId },
@@ -58,12 +57,6 @@ export const AudioDevicesControl = ({
 
   const canPublishTrack = useCanPublishTrack(TrackSource.MICROPHONE)
 
-  useFocusOnOpen(isMenuOpen, popoverContentRef, {
-    selector:
-      '[data-attr="audio-input-select"] button, [data-attr="audio-input-select"] [role="combobox"]',
-    delayMs: 250,
-  })
-
   return (
     <div
       className={css({
@@ -90,6 +83,10 @@ export const AudioDevicesControl = ({
           withArrow={false}
           isOpen={isMenuOpen}
           onOpenChange={setIsMenuOpen}
+          focusOnOpen={{
+            selector: AUDIO_INPUT_FOCUS_SELECTOR,
+            delayMs: 250,
+          }}
         >
           <Button
             tooltip={selectLabel}
@@ -106,7 +103,6 @@ export const AudioDevicesControl = ({
           </Button>
           {({ close }) => (
             <div
-              ref={popoverContentRef}
               className={css({
                 maxWidth: '36rem',
                 padding: '0.15rem',

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

@@ -10,7 +10,7 @@ import { usePersistentUserChoices } from '../../../hooks/usePersistentUserChoice
 import { useCanPublishTrack } from '../../../hooks/useCanPublishTrack'
 import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice'
 import { useSidePanel } from '../../../hooks/useSidePanel'
-import { useSidePanelTriggers } from '../../../hooks/useSidePanelTriggers'
+import { useSidePanelTriggerRef } from '../../../hooks/useSidePanelTriggerRef'
 import { BackgroundProcessorFactory } from '../../blur'
 import Source = Track.Source
 import * as React from 'react'
@@ -18,12 +18,12 @@ import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { TrackSource } from '@livekit/protocol'
-import { useFocusOnOpen } from '@/hooks/useFocusOnOpen'
+import { VIDEO_INPUT_FOCUS_SELECTOR } from './deviceFocusSelectors'
 
 const EffectsButton = ({ onPress }: { onPress: () => void }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
   const { isEffectsOpen, toggleEffects } = useSidePanel()
-  const { setTrigger } = useSidePanelTriggers()
+  const setEffectsTriggerRef = useSidePanelTriggerRef('effects')
   return (
     <Button
       size="sm"
@@ -31,7 +31,7 @@ const EffectsButton = ({ onPress }: { onPress: () => void }) => {
       tooltip={t('effects')}
       aria-label={t('effects')}
       variant="primaryDark"
-      ref={(el) => setTrigger('effects', el)}
+      ref={setEffectsTriggerRef}
       onPress={() => {
         if (!isEffectsOpen) toggleEffects()
         onPress()
@@ -55,8 +55,7 @@ export const VideoDeviceControl = ({
 }: VideoDeviceControlProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
   const [isMenuOpen, setIsMenuOpen] = React.useState(false)
-  const popoverContentRef = React.useRef<HTMLDivElement>(null)
-  const { setTrigger } = useSidePanelTriggers()
+  const setCameraMenuTriggerRef = useSidePanelTriggerRef('cameraMenu')
 
   const { userChoices, saveVideoInputDeviceId, saveVideoInputEnabled } =
     usePersistentUserChoices()
@@ -106,12 +105,6 @@ export const VideoDeviceControl = ({
   const selectLabel = t(`settings.${SettingsDialogExtendedKey.VIDEO}`)
   const canPublishTrack = useCanPublishTrack(TrackSource.CAMERA)
 
-  useFocusOnOpen(isMenuOpen, popoverContentRef, {
-    selector:
-      '[data-attr="video-input-select"] button, [data-attr="video-input-select"] [role="combobox"]',
-    delayMs: 250,
-  })
-
   return (
     <div
       className={css({
@@ -138,13 +131,17 @@ export const VideoDeviceControl = ({
           withArrow={false}
           isOpen={isMenuOpen}
           onOpenChange={setIsMenuOpen}
+          focusOnOpen={{
+            selector: VIDEO_INPUT_FOCUS_SELECTOR,
+            delayMs: 250,
+          }}
         >
           <Button
             tooltip={selectLabel}
             aria-label={selectLabel}
             groupPosition="right"
             square
-            ref={(el) => setTrigger('cameraMenu', el)}
+            ref={setCameraMenuTriggerRef}
             variant={
               !canPublishTrack || !trackProps.enabled || cannotUseDevice
                 ? 'error2'
@@ -155,7 +152,7 @@ export const VideoDeviceControl = ({
           </Button>
           {({ close }) => (
             <div
-              ref={popoverContentRef}
+              data-attr="camera-menu-popover"
               className={css({
                 maxWidth: '36rem',
                 padding: '0.15rem',

src/frontend/src/features/rooms/livekit/components/controls/Device/deviceFocusSelectors.ts

@@ -0,0 +1,5 @@
+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"]'

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

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

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

@@ -1,19 +1,12 @@
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
 import { Button, Menu } from '@/primitives'
 import { OptionsMenuItems } from './OptionsMenuItems'
-import { useSidePanelTriggers } from '../../../hooks/useSidePanelTriggers'
+import { useSidePanelTriggerRef } from '../../../hooks/useSidePanelTriggerRef'
 
 export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
-  const { setTrigger } = useSidePanelTriggers()
-  const setOptionsTriggerRef = useCallback(
-    (el: HTMLElement | null) => {
-      setTrigger('options', el)
-    },
-    [setTrigger]
-  )
+  const setOptionsTriggerRef = useSidePanelTriggerRef('options')
 
   return (
     <Menu variant="dark">

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

@@ -11,7 +11,10 @@ export const SettingsMenuItem = () => {
   return (
     <MenuItem
       className={menuRecipe({ icon: true, variant: 'dark' }).item}
-      onAction={() => openSettingsDialog()}
+      onAction={() => {
+        // Let MenuTrigger close first to avoid stacked overlays (menu + dialog).
+        window.setTimeout(() => openSettingsDialog(), 0)
+      }}
     >
       <RiSettings3Line size={20} />
       {t('settings')}

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

@@ -1,4 +1,3 @@
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
@@ -7,7 +6,7 @@ import { css } from '@/styled-system/css'
 import { useParticipants } from '@livekit/components-react'
 import { useSidePanel } from '../../../hooks/useSidePanel'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useSidePanelTriggers } from '../../../hooks/useSidePanelTriggers'
+import { useSidePanelTriggerRef } from '../../../hooks/useSidePanelTriggerRef'
 
 export const ParticipantsToggle = ({
   onPress,
@@ -26,15 +25,9 @@ export const ParticipantsToggle = ({
     numParticipants && numParticipants > 0 ? numParticipants : 1
 
   const { isParticipantsOpen, toggleParticipants } = useSidePanel()
-  const { setTrigger } = useSidePanelTriggers()
+  const setParticipantsTriggerRef = useSidePanelTriggerRef('participants')
 
   const tooltipLabel = isParticipantsOpen ? 'open' : 'closed'
-  const setParticipantsTriggerRef = useCallback(
-    (el: HTMLElement | null) => {
-      setTrigger('participants', el)
-    },
-    [setTrigger]
-  )
 
   return (
     <div

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

@@ -1,11 +1,10 @@
-import { useCallback } from 'react'
 import { ToggleButton } from '@/primitives'
 import { RiShapesLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useSidePanel } from '../../hooks/useSidePanel'
 import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useSidePanelTriggers } from '../../hooks/useSidePanelTriggers'
+import { useSidePanelTriggerRef } from '../../hooks/useSidePanelTriggerRef'
 
 export const ToolsToggle = ({
   variant = 'primaryTextDark',
@@ -15,14 +14,8 @@ export const ToolsToggle = ({
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.tools' })
 
   const { isToolsOpen, toggleTools } = useSidePanel()
-  const { setTrigger } = useSidePanelTriggers()
   const tooltipLabel = isToolsOpen ? 'open' : 'closed'
-  const setToolsTriggerRef = useCallback(
-    (el: HTMLElement | null) => {
-      setTrigger('tools', el)
-    },
-    [setTrigger]
-  )
+  const setToolsTriggerRef = useSidePanelTriggerRef('tools')
 
   return (
     <div

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

@@ -25,6 +25,9 @@ export const Effects = () => {
       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
     },

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

@@ -18,6 +18,7 @@ import { Loader } from '@/primitives/Loader'
 import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
 import { FunnyEffects } from './FunnyEffects'
 import { useHasFunnyEffectsAccess } from '../../hooks/useHasFunnyEffectsAccess'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 
 enum BlurRadius {
   NONE = 0,
@@ -56,7 +57,7 @@ export const EffectsConfiguration = ({
   const [processorPending, setProcessorPending] = useState(false)
   const processorPendingReveal = useSyncAfterDelay(processorPending)
   const hasFunnyEffectsAccess = useHasFunnyEffectsAccess()
-  const [effectStatusMessage, setEffectStatusMessage] = useState('')
+  const announce = useScreenReaderAnnounce()
   const effectAnnouncementTimeout = useRef<ReturnType<
     typeof setTimeout
   > | null>(null)
@@ -104,12 +105,9 @@ export const EffectsConfiguration = ({
       clearTimeout(effectAnnouncementTimeout.current)
     }
 
-    // Clear the region first so screen readers drop queued announcements.
-    setEffectStatusMessage('')
-
     effectAnnouncementTimeout.current = setTimeout(() => {
       if (currentId !== effectAnnouncementId.current) return
-      setEffectStatusMessage(message)
+      announce(message)
     }, 80)
   }
 
@@ -423,9 +421,6 @@ export const EffectsConfiguration = ({
                     <BlurOnStrong />
                   </ToggleButton>
                 </div>
-                <div aria-live="polite" className="sr-only">
-                  {effectStatusMessage}
-                </div>
               </div>
               <div
                 className={css({

src/frontend/src/features/rooms/livekit/contexts/SidePanelContext.tsx

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

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

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

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

@@ -1,6 +1,7 @@
-import { ref, useSnapshot } from 'valtio'
+import { useSnapshot } from 'valtio'
 import { layoutStore } from '@/stores/layout'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
+import type { SidePanelTriggerKey } from '../types/sidePanelTypes'
 
 export enum PanelId {
   PARTICIPANTS = 'participants',
@@ -20,6 +21,41 @@ 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
@@ -33,61 +69,100 @@ 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 = (wip) => {
+  const toggleInfo = () => {
+    if (!isInfoOpen) storeLastTrigger(PanelId.INFO)
     layoutStore.activePanelId = isInfoOpen ? null : PanelId.INFO
-
-    if (!isInfoOpen) {
-      layoutStore.genericRef = ref(wip)
-    }
-
     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(() => {
-    if (!layoutSnap.activePanelId) {
-      console.log('$$prout closing')
-      const trigger = layoutSnap?.genericRef?.current
-      console.log(trigger)
-      if (trigger) {
+    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 })
-        trigger.setAttribute('data-restore-focus-visible', '')
+        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 })
+        }
       }
     }
-  }, [layoutSnap.activePanelId, layoutSnap?.genericRef])
+
+    prevPanelIdRef.current = activePanelId
+  }, [activePanelId])
 
   return {
     activePanelId,
@@ -100,6 +175,7 @@ export const useSidePanel = () => {
     toggleInfo,
     openTranscript,
     openScreenRecording,
+    closeSidePanel,
     isSubPanelOpen,
     isChatOpen,
     isParticipantsOpen,

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

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

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

@@ -0,0 +1,13 @@
+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]
+  )
+}

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

@@ -1,15 +1,13 @@
-import { useContext } from 'react'
-import { SidePanelContext } from '../contexts/sidePanelContextValue'
+import { layoutStore } from '@/stores/layout'
+import type { SidePanelTriggerKey } from '../types/sidePanelTypes'
 
 export const useSidePanelTriggers = () => {
-  const context = useContext(SidePanelContext)
-  if (!context) {
-    throw new Error(
-      'useSidePanelTriggers must be used within SidePanelProvider'
-    )
-  }
   return {
-    setTrigger: context.setTrigger,
-    getTrigger: context.getTrigger,
+    setTrigger: (key: SidePanelTriggerKey, el: HTMLElement | null) => {
+      layoutStore.sidePanelTriggers[key] = el
+    },
+    getTrigger: (key: SidePanelTriggerKey) => {
+      return layoutStore.sidePanelTriggers[key] ?? null
+    },
   }
 }

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

@@ -5,9 +5,8 @@ import {
   isWeb,
   log,
 } from '@livekit/components-core'
-import { RoomEvent, Track } from 'livekit-client'
-import * as React from 'react'
-import { useState } from 'react'
+import { Participant, RoomEvent, Track } from 'livekit-client'
+import React, { useCallback, useRef, useState, useEffect } from 'react'
 import {
   ConnectionStateToast,
   FocusLayoutContainer,
@@ -16,7 +15,9 @@ 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'
@@ -26,7 +27,6 @@ import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { useSidePanel } from '../hooks/useSidePanel'
-import { SidePanelProvider } from '../contexts/SidePanelContext'
 import { RecordingProvider } from '@/features/recording'
 import { ScreenShareErrorModal } from '../components/ScreenShareErrorModal'
 import { useConnectionObserver } from '../hooks/useConnectionObserver'
@@ -38,6 +38,8 @@ 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',
@@ -90,7 +92,22 @@ export interface VideoConferenceProps
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
   const lastAutoFocusedScreenShareTrack =
-    React.useRef<TrackReferenceOrPlaceholder | null>(null)
+    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]
+  )
 
   useConnectionObserver()
   useVideoResolutionSubscription()
@@ -116,9 +133,62 @@ 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.
-  React.useEffect(() => {
+  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) &&
@@ -189,77 +259,75 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
           value={layoutContext}
           // onPinChange={handleFocusStateChange}
         >
-          <SidePanelProvider>
-            <ScreenShareErrorModal
-              isOpen={isShareErrorVisible}
-              onClose={() => setIsShareErrorVisible(false)}
-            />
-            <IsIdleDisconnectModal />
-            <div
-              // todo - extract these magic values into constant
-              style={{
-                position: 'absolute',
-                inset: isSidePanelOpen
-                  ? `var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px`
-                  : `var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))`,
-                transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
-                maxHeight: '100%',
-              }}
-            >
-              <LayoutWrapper areSubtitlesOpen={areSubtitlesOpen}>
-                <div
-                  style={{
-                    display: 'flex',
-                    position: 'relative',
-                    width: '100%',
-                  }}
-                >
-                  {!focusTrack ? (
-                    <div
-                      className="lk-grid-layout-wrapper"
-                      style={{ height: 'auto' }}
-                    >
-                      <GridLayout tracks={tracks} style={{ padding: 0 }}>
+          <ScreenShareErrorModal
+            isOpen={isShareErrorVisible}
+            onClose={() => setIsShareErrorVisible(false)}
+          />
+          <IsIdleDisconnectModal />
+          <div
+            // todo - extract these magic values into constant
+            style={{
+              position: 'absolute',
+              inset: isSidePanelOpen
+                ? `var(--lk-grid-gap) calc(358px + 3rem) calc(80px + var(--lk-grid-gap)) 16px`
+                : `var(--lk-grid-gap) var(--lk-grid-gap) calc(80px + var(--lk-grid-gap))`,
+              transition: 'inset .5s cubic-bezier(0.4,0,0.2,1) 5ms',
+              maxHeight: '100%',
+            }}
+          >
+            <LayoutWrapper areSubtitlesOpen={areSubtitlesOpen}>
+              <div
+                style={{
+                  display: 'flex',
+                  position: 'relative',
+                  width: '100%',
+                }}
+              >
+                {!focusTrack ? (
+                  <div
+                    className="lk-grid-layout-wrapper"
+                    style={{ height: 'auto' }}
+                  >
+                    <GridLayout tracks={tracks} style={{ padding: 0 }}>
+                      <ParticipantTile />
+                    </GridLayout>
+                  </div>
+                ) : (
+                  <div
+                    className="lk-focus-layout-wrapper"
+                    style={{ height: 'auto' }}
+                  >
+                    <FocusLayoutContainer style={{ padding: 0 }}>
+                      <CarouselLayout
+                        tracks={carouselTracks}
+                        style={{
+                          minWidth: '200px',
+                        }}
+                      >
                         <ParticipantTile />
-                      </GridLayout>
-                    </div>
-                  ) : (
-                    <div
-                      className="lk-focus-layout-wrapper"
-                      style={{ height: 'auto' }}
-                    >
-                      <FocusLayoutContainer style={{ padding: 0 }}>
-                        <CarouselLayout
-                          tracks={carouselTracks}
-                          style={{
-                            minWidth: '200px',
-                          }}
-                        >
-                          <ParticipantTile />
-                        </CarouselLayout>
-                        {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                      </FocusLayoutContainer>
-                    </div>
-                  )}
-                </div>
-              </LayoutWrapper>
-              <Subtitles />
-              <MainNotificationToast />
-            </div>
-            <ControlBar
-              onDeviceError={(e) => {
-                console.error(e)
-                if (
-                  e.source == Track.Source.ScreenShare &&
-                  e.error.toString() ==
-                    'NotAllowedError: Permission denied by system'
-                ) {
-                  setIsShareErrorVisible(true)
-                }
-              }}
-            />
-            <SidePanel />
-          </SidePanelProvider>
+                      </CarouselLayout>
+                      {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                    </FocusLayoutContainer>
+                  </div>
+                )}
+              </div>
+            </LayoutWrapper>
+            <Subtitles />
+            <MainNotificationToast />
+          </div>
+          <ControlBar
+            onDeviceError={(e) => {
+              console.error(e)
+              if (
+                e.source == Track.Source.ScreenShare &&
+                e.error.toString() ==
+                  'NotAllowedError: Permission denied by system'
+              ) {
+                setIsShareErrorVisible(true)
+              }
+            }}
+          />
+          <SidePanel />
         </LayoutContextProvider>
       )}
       <RoomAudioRenderer />

src/frontend/src/features/rooms/livekit/types/sidePanelTypes.ts

@@ -0,0 +1,8 @@
+export type SidePanelTriggerKey =
+  | 'participants'
+  | 'tools'
+  | 'info'
+  | 'admin'
+  | 'options'
+  | 'effects'
+  | 'cameraMenu'

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

@@ -19,7 +19,7 @@ import { GeneralTab } from './tabs/GeneralTab'
 import { AudioTab } from './tabs/AudioTab'
 import { VideoTab } from './tabs/VideoTab'
 import { TranscriptionTab } from './tabs/TranscriptionTab'
-import { useRef } from 'react'
+import { useLayoutEffect, 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'
@@ -61,8 +61,20 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   const { t } = useTranslation('settings')
 
   const dialogEl = useRef<HTMLDivElement>(null)
-  const isWideScreen = useMediaQuery('(min-width: 800px)') // fixme - hardcoded 50rem in pixel
 
+  useLayoutEffect(() => {
+    if (!props.isOpen) return
+    console.warn('[a11y] useLayoutEffect fired, dialogEl:', dialogEl.current)
+    console.warn('[a11y] tabs found:', dialogEl.current?.querySelectorAll('[role="tab"]').length)
+    const selected = dialogEl.current?.querySelector<HTMLElement>(
+      '[role="tab"][aria-selected="true"]',
+    )
+    console.warn('[a11y] selected tab:', selected?.textContent)
+    selected?.focus({ preventScroll: true })
+    console.warn('[a11y] activeElement after focus:', document.activeElement?.tagName, document.activeElement?.getAttribute('role'))
+  }, [props.isOpen])
+
+  const isWideScreen = useMediaQuery('(min-width: 800px)') // fixme - hardcoded 50rem in pixel
   const isAdminOrOwner = useIsAdminOrOwner()
 
   return (

src/frontend/src/features/subtitle/component/Subtitles.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useSubtitles } from '../hooks/useSubtitles'
 import { css, cva } from '@/styled-system/css'
 import { styled } from '@/styled-system/jsx'
@@ -13,101 +13,63 @@ 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 [transcriptionRows, setTranscriptionRows] = useState<
-    TranscriptionRow[]
+  const [transcriptionSegments, setTranscriptionSegments] = useState<
+    TranscriptionSegmentWithParticipant[]
   >([])
-  const [lastActiveParticipantIdentity, setLastActiveParticipantIdentity] =
-    useState<string | null>(null)
 
-  const updateTranscriptions = (
+  const updateTranscriptionSegments = (
     segments: TranscriptionSegment[],
     participant?: Participant
   ) => {
+    console.log(participant, segments)
+
     if (!participant || segments.length === 0) return
 
-    setTranscriptionRows((prevRows) => {
-      const updatedRows = [...prevRows]
-      const now = Date.now()
+    if (segments.length > 1) {
+      console.warn('Unexpected error more segments')
+      return
+    }
 
-      const shouldAppendToLastRow =
-        lastActiveParticipantIdentity === participant.identity &&
-        updatedRows.length > 0
+    const segment = segments[0]
 
-      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
-      })
+    setTranscriptionSegments((prevSegments) => {
+      const existingSegmentIds = new Set(prevSegments.map((s) => s.id))
+      if (existingSegmentIds.has(segment.id)) return prevSegments
+      return [
+        ...prevSegments,
+        {
+          participant: participant,
+          ...segment,
+        },
+      ]
     })
   }
 
   return {
-    transcriptionRows,
-    updateTranscriptions,
-    clearTranscriptions,
-    updateParticipant,
+    updateTranscriptionSegments,
+    transcriptionSegments,
   }
 }
 
@@ -192,24 +154,54 @@ const SubtitlesWrapper = styled(
 export const Subtitles = () => {
   const { areSubtitlesOpen } = useSubtitles()
   const room = useRoomContext()
-  const { transcriptionRows, updateTranscriptions, updateParticipant } =
+
+  const { transcriptionSegments, updateTranscriptionSegments } =
     useTranscriptionState()
 
   useEffect(() => {
     if (!room) return
-    room.on(RoomEvent.TranscriptionReceived, updateTranscriptions)
+    room.on(RoomEvent.TranscriptionReceived, updateTranscriptionSegments)
     return () => {
-      room.off(RoomEvent.TranscriptionReceived, updateTranscriptions)
+      room.off(RoomEvent.TranscriptionReceived, updateTranscriptionSegments)
     }
-  }, [room, updateTranscriptions])
+  }, [room, updateTranscriptionSegments])
 
-  useEffect(() => {
-    if (!room) return
-    room.on(RoomEvent.ParticipantNameChanged, updateParticipant)
-    return () => {
-      room.off(RoomEvent.ParticipantNameChanged, updateParticipant)
+  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
+        )
+      }
     }
-  }, [room, updateParticipant])
+
+    return rows
+  }, [transcriptionSegments])
 
   return (
     <SubtitlesWrapper areOpen={areSubtitlesOpen}>

src/frontend/src/hooks/useScreenReaderAnnounce.ts

@@ -0,0 +1,19 @@
+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)
+    },
+    []
+  )
+}

src/frontend/src/layout/Header.tsx

@@ -10,6 +10,7 @@ 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'
 
@@ -90,6 +91,11 @@ 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 (
     <>
@@ -153,23 +159,24 @@ export const Header = () => {
                 )}
               {!!user && (
                 <Menu>
-                  <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' },
-                      })}
+                  <Button size="sm" variant="secondaryText">
+                    <VisualOnlyTooltip
+                      tooltip={loggedInTooltip}
+                      ariaLabel={loggedInAriaLabel}
+                      tooltipPosition="bottom"
                     >
-                      {user?.full_name || user?.email}
-                    </span>
+                      <span
+                        className={css({
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          maxWidth: '350px',
+                          display: { base: 'none', xsm: 'block' },
+                        })}
+                      >
+                        {user?.full_name || user?.email}
+                      </span>
+                    </VisualOnlyTooltip>
                   </Button>
                   <MenuList
                     variant={'light'}

src/frontend/src/layout/Layout.tsx

@@ -4,6 +4,7 @@ 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'
 
@@ -41,6 +42,7 @@ export const Layout = ({ children }: { children: ReactNode }) => {
             flexDirection: 'column',
           })}
         >
+          <ScreenReaderAnnouncer />
           {children}
         </main>
       </div>

src/frontend/src/locales/de/recording.json

@@ -17,7 +17,7 @@
   },
   "success": {
     "title": "Ihre Aufzeichnung ist bereit!",
-    "body": "Aufzeichnung des Treffens <b>{{room}}</b> vom {{created_at}}.",
+    "body": "Aufzeichnung des Treffens {{room}} vom {{created_at}}.",
     "expiration": "Achtung, diese Aufzeichnung wird nach {{expiration_days}} Tag(en) gelöscht.",
     "button": "Herunterladen",
     "warning": {

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

@@ -156,7 +156,8 @@
     "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"
+    "leaveButton": "Jetzt verlassen",
+    "countdownAnnouncement": "Das Gespräch endet in {{duration}}."
   },
   "controls": {
     "microphone": "Mikrofon",
@@ -504,6 +505,7 @@
   "participants": {
     "subheading": "Im Raum",
     "you": "Du",
+    "unknown": "Unbekannter Teilnehmer",
     "host": "Host",
     "contributors": "Mitwirkende",
     "collapsable": {
@@ -551,6 +553,14 @@
       "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",

src/frontend/src/locales/en/global.json

@@ -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",

src/frontend/src/locales/en/recording.json

@@ -17,7 +17,7 @@
   },
   "success": {
     "title": "Your recording is ready!",
-    "body": "Recording of the meeting <b>{{room}}</b> from {{created_at}}.",
+    "body": "Recording of the meeting {{room}} from {{created_at}}.",
     "expiration": "Attention, this recording will expire after {{expiration_days}} day(s).",
     "button": "Download",
     "warning": {

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

@@ -156,7 +156,8 @@
     "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"
+    "leaveButton": "Leave now",
+    "countdownAnnouncement": "Call ends in {{duration}}."
   },
   "controls": {
     "microphone": "Microphone",
@@ -504,6 +505,7 @@
   "participants": {
     "subheading": "In room",
     "you": "You",
+    "unknown": "Unknown participant",
     "host": "Host",
     "contributors": "Contributors",
     "collapsable": {
@@ -551,6 +553,14 @@
       "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",

src/frontend/src/locales/fr/global.json

@@ -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",

src/frontend/src/locales/fr/recording.json

@@ -17,7 +17,7 @@
   },
   "success": {
     "title": "Votre enregistrement est prêt !",
-    "body": "Enregistrement de la réunion <b>{{room}}</b> du {{created_at}}.",
+    "body": "Enregistrement de la réunion {{room}} du {{created_at}}.",
     "expiration": "Attention cet enregistrement expirera au bout de {{expiration_days}} jour(s).",
     "button": "Télécharger",
     "warning": {

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

@@ -156,7 +156,8 @@
     "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"
+    "leaveButton": "Quitter maintenant",
+    "countdownAnnouncement": "L'appel se termine dans {{duration}}."
   },
   "controls": {
     "microphone": "Microphone",
@@ -504,6 +505,7 @@
   "participants": {
     "subheading": "Dans la réunion",
     "you": "Vous",
+    "unknown": "Participant inconnu",
     "contributors": "Contributeurs",
     "host": "Organisateur de la réunion",
     "collapsable": {
@@ -551,6 +553,14 @@
       "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",

src/frontend/src/locales/nl/global.json

@@ -13,7 +13,7 @@
     "heading": "U hebt geen toestemming om deze pagina te bekijken"
   },
   "loading": "Laden ...",
-  "loggedInUserTooltip": "Ingelogd als ...",
+  "loggedInUserTooltip": "Ingelogd als ",
   "login": {
     "buttonLabel": "Log in",
     "proconnectButtonLabel": "Log in met Proconnect",

src/frontend/src/locales/nl/recording.json

@@ -17,7 +17,7 @@
   },
   "success": {
     "title": "Je opname is klaar!",
-    "body": "Opname van de vergadering <b>{{room}}</b> op {{created_at}}.",
+    "body": "Opname van de vergadering {{room}} op {{created_at}}.",
     "expiration": "Let op, deze opname verloopt na {{expiration_days}} dag(en).",
     "button": "Downloaden",
     "warning": {

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

@@ -156,7 +156,8 @@
     "body": "Je bent de enige deelnemer. Dit gesprek wordt over {{duration}} beëindigd. Wil je het gesprek voortzetten?",
     "settings": "Om dit bericht niet meer te zien, ga naar Instellingen > Algemeen.",
     "stayButton": "Gesprek voortzetten",
-    "leaveButton": "Nu verlaten"
+    "leaveButton": "Nu verlaten",
+    "countdownAnnouncement": "Het gesprek eindigt over {{duration}}."
   },
   "controls": {
     "microphone": "Microfoon",
@@ -504,6 +505,7 @@
   "participants": {
     "subheading": "In de ruimte",
     "you": "U",
+    "unknown": "Onbekende deelnemer",
     "host": "Host",
     "contributors": "Deelnemers",
     "collapsable": {
@@ -551,6 +553,14 @@
       "ariaLabel": "Maak {{name}} vast"
     }
   },
+  "pinAnnouncements": {
+    "pin": "De video van {{name}} is vastgezet.",
+    "unpin": "De video van {{name}} is niet meer vastgezet.",
+    "self": {
+      "pin": "Uw video is vastgezet.",
+      "unpin": "Uw video is niet meer vastgezet."
+    }
+  },
   "recordingStateToast": {
     "transcript": {
       "started": "Transcriptie bezig",

src/frontend/src/primitives/Dialog.tsx

@@ -46,6 +46,7 @@ const StyledRACDialog = styled(RACDialog, {
     width: 'full',
     height: 'full',
     pointerEvents: 'none',
+    outline: 'none', // focus moves to tab, avoid outline on container
   },
 })
 

src/frontend/src/primitives/Field.tsx

@@ -138,7 +138,9 @@ export const Field = <T extends object>({
   const LabelAndDescription = (
     <>
       <StyledLabel {...props.labelProps}>{label}</StyledLabel>
-      <FieldDescription slot="description">{description}</FieldDescription>
+      {description ? (
+        <FieldDescription slot="description">{description}</FieldDescription>
+      ) : null}
     </>
   )
   const RACFieldErrors = (

src/frontend/src/primitives/Popover.tsx

@@ -1,4 +1,5 @@
-import { ReactNode } from 'react'
+import type { RefObject } from 'react'
+import { ReactNode, useEffect, useRef, useState } from 'react'
 import {
   DialogProps,
   DialogTrigger,
@@ -60,6 +61,40 @@ const StyledOverlayArrow = styled(OverlayArrow, {
   },
 })
 
+type FocusOnOpenOptions = {
+  selector: string
+  delayMs?: number
+  preventScroll?: boolean
+}
+
+type FocusOnCloseOptions = {
+  ref?: RefObject<HTMLElement>
+  selector?: string
+  delayMs?: number
+  preventScroll?: boolean
+}
+
+const scheduleFocus = (
+  target: HTMLElement,
+  {
+    delayMs = 0,
+    preventScroll = true,
+  }: { delayMs?: number; preventScroll?: boolean }
+) => {
+  const timer = setTimeout(() => {
+    requestAnimationFrame(() => {
+      target.focus({ preventScroll })
+    })
+  }, delayMs)
+  return () => clearTimeout(timer)
+}
+
+const resolveFocusTarget = (options: FocusOnCloseOptions) => {
+  if (options.ref?.current) return options.ref.current
+  if (!options.selector) return null
+  return document.querySelector<HTMLElement>(options.selector)
+}
+
 /**
  * a Popover is a tuple of a trigger component (most usually a Button) that toggles some content in a tooltip around the trigger
  *
@@ -73,6 +108,8 @@ export const Popover = ({
   isOpen,
   defaultOpen,
   onOpenChange,
+  focusOnOpen,
+  focusOnClose,
   ...dialogProps
 }: {
   children: [
@@ -86,13 +123,48 @@ export const Popover = ({
   isOpen?: boolean
   defaultOpen?: boolean
   onOpenChange?: (isOpen: boolean) => void
+  focusOnOpen?: FocusOnOpenOptions
+  focusOnClose?: FocusOnCloseOptions
 } & Omit<DialogProps, 'children'>) => {
   const [trigger, popoverContent] = children
+  const popoverContentRef = useRef<HTMLDivElement>(null)
+  const isControlled = isOpen !== undefined
+  const [internalOpen, setInternalOpen] = useState(!!defaultOpen)
+  const effectiveOpen = isControlled ? isOpen : internalOpen
+  const prevOpenRef = useRef(effectiveOpen)
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(nextOpen)
+    }
+    onOpenChange?.(nextOpen)
+  }
+
+  useEffect(() => {
+    const wasOpen = prevOpenRef.current
+    if (wasOpen || !effectiveOpen || !focusOnOpen) return
+    const first = popoverContentRef.current?.querySelector<HTMLElement>(
+      focusOnOpen.selector
+    )
+    if (!first) return
+    return scheduleFocus(first, focusOnOpen)
+  }, [effectiveOpen, focusOnOpen])
+
+  useEffect(() => {
+    const wasOpen = prevOpenRef.current
+    let cleanup: (() => void) | undefined
+    if (wasOpen && !effectiveOpen && focusOnClose) {
+      const target = resolveFocusTarget(focusOnClose)
+      if (target) cleanup = scheduleFocus(target, focusOnClose)
+    }
+    prevOpenRef.current = effectiveOpen
+    return cleanup
+  }, [effectiveOpen, focusOnClose])
   return (
     <DialogTrigger
-      isOpen={isOpen}
+      isOpen={effectiveOpen}
       defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
+      onOpenChange={handleOpenChange}
     >
       {trigger}
       <StyledPopover>
@@ -105,7 +177,12 @@ export const Popover = ({
         )}
         <Dialog {...dialogProps}>
           {({ close }) => (
-            <Box size="sm" type="popover" variant={variant}>
+            <Box
+              size="sm"
+              type="popover"
+              variant={variant}
+              ref={popoverContentRef}
+            >
               {typeof popoverContent === 'function'
                 ? popoverContent({ close })
                 : popoverContent}

src/frontend/src/primitives/ScreenReaderAnnouncer.tsx

@@ -0,0 +1,29 @@
+import { useSnapshot } from 'valtio'
+import {
+  screenReaderAnnouncerStore,
+  type ScreenReaderChannel,
+} from '@/stores/screenReaderAnnouncer'
+
+export const ScreenReaderAnnouncer = ({
+  channel = 'global',
+}: {
+  channel?: ScreenReaderChannel
+}) => {
+  const { announcements } = useSnapshot(screenReaderAnnouncerStore)
+  const announcement = announcements[channel]
+
+  if (!announcement) return null
+
+  return (
+    <div
+      role="status"
+      aria-live={announcement.politeness}
+      aria-atomic="true"
+      className="sr-only"
+      data-announce-id={announcement.id}
+      data-announce-channel={channel}
+    >
+      {announcement.message}
+    </div>
+  )
+}

src/frontend/src/primitives/VisualOnlyTooltip.tsx

@@ -1,10 +1,18 @@
-import { type ReactNode, useRef, useState } from 'react'
+import {
+  type ReactElement,
+  cloneElement,
+  isValidElement,
+  useRef,
+  useState,
+} from 'react'
 import { createPortal } from 'react-dom'
 import { css } from '@/styled-system/css'
 
 export type VisualOnlyTooltipProps = {
-  children: ReactNode
+  children: ReactElement
   tooltip: string
+  ariaLabel?: string
+  tooltipPosition?: 'top' | 'bottom'
 }
 
 /**
@@ -20,32 +28,50 @@ export type VisualOnlyTooltipProps = {
 export const VisualOnlyTooltip = ({
   children,
   tooltip,
+  ariaLabel,
+  tooltipPosition = 'top',
 }: VisualOnlyTooltipProps) => {
-  const wrapperRef = useRef<HTMLDivElement>(null)
   const [isVisible, setIsVisible] = useState(false)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const [position, setPosition] = useState<{
+    top: number
+    left: number
+  } | null>(null)
 
-  const getPosition = () => {
-    if (!wrapperRef.current) return null
+  const isBottom = tooltipPosition === 'bottom'
+
+  const showTooltip = () => {
+    if (!wrapperRef.current) return
     const rect = wrapperRef.current.getBoundingClientRect()
-    return {
-      top: rect.top - 8,
+    setPosition({
+      top: isBottom ? rect.bottom + 8 : rect.top - 8,
       left: rect.left + rect.width / 2,
-    }
+    })
+    setIsVisible(true)
+  }
+
+  const hideTooltip = () => {
+    setIsVisible(false)
+    setPosition(null)
   }
 
-  const position = getPosition()
   const tooltipData = isVisible && position ? { isVisible, position } : null
+  const wrappedChild = isValidElement(children)
+    ? cloneElement(children, {
+        ...(ariaLabel ? { 'aria-label': ariaLabel } : {}),
+      })
+    : children
 
   return (
     <>
       <div
         ref={wrapperRef}
-        onMouseEnter={() => setIsVisible(true)}
-        onMouseLeave={() => setIsVisible(false)}
-        onFocus={() => setIsVisible(true)}
-        onBlur={() => setIsVisible(false)}
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+        onFocus={showTooltip}
+        onBlur={hideTooltip}
       >
-        {children}
+        {wrappedChild}
       </div>
       {tooltipData &&
         createPortal(
@@ -66,17 +92,26 @@ export const VisualOnlyTooltip = ({
               '&::after': {
                 content: '""',
                 position: 'absolute',
-                top: '100%',
                 left: '50%',
                 transform: 'translateX(-50%)',
                 border: '4px solid transparent',
-                borderTopColor: 'primaryDark.100',
+                ...(isBottom
+                  ? {
+                      bottom: '100%',
+                      borderBottomColor: 'primaryDark.100',
+                    }
+                  : {
+                      top: '100%',
+                      borderTopColor: 'primaryDark.100',
+                    }),
               },
             })}
             style={{
               top: `${tooltipData.position.top}px`,
               left: `${tooltipData.position.left}px`,
-              transform: 'translate(-50%, -100%)',
+              transform: isBottom
+                ? 'translate(-50%, 0)'
+                : 'translate(-50%, -100%)',
             }}
           >
             {tooltip}

src/frontend/src/primitives/index.ts

@@ -24,6 +24,7 @@ export { Menu } from './Menu'
 export { MenuList } from './MenuList'
 export { P } from './P'
 export { Popover } from './Popover'
+export { ScreenReaderAnnouncer } from './ScreenReaderAnnouncer'
 export { Text } from './Text'
 export { ToggleButton } from './ToggleButton'
 export { Ul } from './Ul'

src/frontend/src/stores/layout.ts

@@ -1,8 +1,11 @@
-import { proxy } from 'valtio'
+import { createRef } from 'react'
+import { proxy, ref } from 'valtio'
 import {
   PanelId,
   SubPanelId,
 } from '@/features/rooms/livekit/hooks/useSidePanel'
+import type { SidePanelTriggerKey } from '@/features/rooms/livekit/types/sidePanelTypes'
+import type { MutableRefObject, RefObject } from 'react'
 
 type State = {
   showHeader: boolean
@@ -10,14 +13,32 @@ type State = {
   showSubtitles: boolean
   activePanelId: PanelId | null
   activeSubPanelId: SubPanelId | null
-  genericRef: HTMLElement | null
+  sidePanelRef: RefObject<HTMLElement>
+  sidePanelTriggers: Record<SidePanelTriggerKey, HTMLElement | null>
+  lastSidePanelTriggerRef: MutableRefObject<HTMLElement | null>
 }
 
+const sidePanelRef = ref(createRef<HTMLElement>())
+const lastSidePanelTriggerRef = ref({
+  current: null,
+} as MutableRefObject<HTMLElement | null>)
+const sidePanelTriggers = ref<Record<SidePanelTriggerKey, HTMLElement | null>>({
+  participants: null,
+  tools: null,
+  info: null,
+  admin: null,
+  options: null,
+  effects: null,
+  cameraMenu: null,
+})
+
 export const layoutStore = proxy<State>({
   showHeader: false,
   showFooter: false,
   showSubtitles: false,
   activePanelId: null,
   activeSubPanelId: null,
-  genericRef: null,
+  sidePanelRef,
+  sidePanelTriggers,
+  lastSidePanelTriggerRef,
 })

src/frontend/src/stores/screenReaderAnnouncer.ts

@@ -0,0 +1,86 @@
+import { proxy } from 'valtio'
+
+export type Politeness = 'polite' | 'assertive'
+export type ScreenReaderChannel = 'global' | 'idle'
+
+type ScreenReaderAnnouncement = {
+  message: string
+  politeness: Politeness
+  id: number
+}
+
+type ScreenReaderAnnouncerState = {
+  announcements: Record<ScreenReaderChannel, ScreenReaderAnnouncement>
+}
+
+export const screenReaderAnnouncerStore = proxy<ScreenReaderAnnouncerState>({
+  announcements: {
+    global: {
+      message: '',
+      politeness: 'polite',
+      id: 0,
+    },
+    idle: {
+      message: '',
+      politeness: 'polite',
+      id: 0,
+    },
+  },
+})
+
+const channels: ScreenReaderChannel[] = ['global', 'idle']
+const announcementTokens: Record<ScreenReaderChannel, number> = {
+  global: 0,
+  idle: 0,
+}
+const announcementTimers: Record<
+  ScreenReaderChannel,
+  ReturnType<typeof setTimeout> | null
+> = {
+  global: null,
+  idle: null,
+}
+const lastAnnouncementTimes: Record<ScreenReaderChannel, number> = {
+  global: 0,
+  idle: 0,
+}
+const MIN_ANNOUNCEMENT_INTERVAL = 300 // Minimum 300ms between announcements
+
+export const announceToScreenReader = (
+  message: string,
+  politeness: Politeness = 'polite',
+  channel: ScreenReaderChannel = 'global'
+) => {
+  if (!channels.includes(channel)) return
+
+  const now = Date.now()
+  const timeSinceLastAnnouncement = now - lastAnnouncementTimes[channel]
+
+  announcementTokens[channel] += 1
+  const currentToken = announcementTokens[channel]
+
+  if (announcementTimers[channel]) {
+    clearTimeout(announcementTimers[channel]!)
+  }
+
+  const delay = Math.max(
+    150, // Minimum delay for clear + set sequence
+    MIN_ANNOUNCEMENT_INTERVAL - timeSinceLastAnnouncement
+  )
+
+  screenReaderAnnouncerStore.announcements[channel] = {
+    message: '',
+    politeness,
+    id: currentToken,
+  }
+
+  announcementTimers[channel] = setTimeout(() => {
+    if (currentToken !== announcementTokens[channel]) return
+    screenReaderAnnouncerStore.announcements[channel] = {
+      message,
+      politeness,
+      id: currentToken,
+    }
+    lastAnnouncementTimes[channel] = Date.now()
+  }, delay)
+}

src/frontend/src/styles/index.css

@@ -22,6 +22,18 @@ body,
   outline: 2px solid transparent;
 }
 
+/* Suppress focus ring on dialog/tabpanel containers - focus moves to tab */
+[role='dialog']:focus,
+[role='dialog'][data-focus-visible],
+[role='tabpanel'][data-focus-visible],
+[role='tablist'][data-focus-visible],
+[role='dialog']
+  [data-rac][data-focus-visible]:not([role='tab']):not(button):not(a):not(
+    input
+  ):not(select):not(textarea) {
+  outline: none !important;
+}
+
 [data-rac][data-focus-visible]:not(label, .react-aria-Select),
 [data-rac][data-restore-focus-visible]:not(label, .react-aria-Select),
 :is(a, button, input[type='text'], select, textarea):not(
@@ -56,6 +68,10 @@ body:has(.lk-video-conference) #crisp-chatbox > * > div[role='button'] {
   display: none !important;
 }
 
+html:has(.lk-video-conference) {
+  scrollbar-gutter: auto !important;
+}
+
 @keyframes slide-full {
   from {
     transform: translateY(100%);

src/mail/package-lock.json

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

src/mail/package.json

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

src/sdk/package-lock.json

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

src/sdk/package.json

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

src/summary/pyproject.toml

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