fixup! ♻️(frontend) use react aria for side panel a11y

leverage FocusScope for tab containment, escape and focus restore

.github/workflows/docker-hub.yml

@@ -152,7 +152,7 @@ jobs:
         uses: numerique-gouv/action-trivy-cache@main
         continue-on-error: true
         with:
-          docker-build-args: '-f src/summary/Dockerfile --target summary-production'
+          docker-build-args: '-f src/summary/Dockerfile --target production'
           docker-image-name: '${{ env.DOCKER_CONTAINER_REGISTRY_HOSTNAME }}/${{ env.DOCKER_CONTAINER_REGISTRY_NAMESPACE }}/meet-summary:${{ github.sha }}'
           docker-context: './src/summary'
       -
@@ -161,7 +161,7 @@ jobs:
         with:
           context: ./src/summary
           file: ./src/summary/Dockerfile
-          target: summary-production
+          target: production
           build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
@@ -191,7 +191,7 @@ jobs:
         uses: numerique-gouv/action-trivy-cache@main
         continue-on-error: true
         with:
-          docker-build-args: '-f src/agents/Dockerfile --target agents-production'
+          docker-build-args: '-f src/agents/Dockerfile --target production'
           docker-image-name: '${{ env.DOCKER_CONTAINER_REGISTRY_HOSTNAME }}/${{ env.DOCKER_CONTAINER_REGISTRY_NAMESPACE }}/meet-agents:${{ github.sha }}'
           docker-context: './src/agents'
       -
@@ -200,7 +200,7 @@ jobs:
         with:
           context: ./src/agents
           file: ./src/agents/Dockerfile
-          target: agents-production
+          target: production
           build-args: DOCKER_USER=${{ env.DOCKER_USER }}:-1000
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}

CHANGELOG.md

@@ -8,6 +8,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- ♻️(frontend) Use React Aria FocusScope for side panel accessibility
+
 ## [1.7.0] - 2026-02-19
 
 ### Added

Makefile

@@ -40,9 +40,9 @@ DOCKER_GID          = $(shell id -g)
 DOCKER_USER         = $(DOCKER_UID):$(DOCKER_GID)
 COMPOSE             = DOCKER_USER=$(DOCKER_USER) docker compose
 COMPOSE_EXEC        = $(COMPOSE) exec
-COMPOSE_EXEC_APP    = $(COMPOSE_EXEC) app-development
+COMPOSE_EXEC_APP    = $(COMPOSE_EXEC) app-dev
 COMPOSE_RUN         = $(COMPOSE) run --rm
-COMPOSE_RUN_APP     = $(COMPOSE_RUN) app-development
+COMPOSE_RUN_APP     = $(COMPOSE_RUN) app-dev
 COMPOSE_RUN_CROWDIN = $(COMPOSE_RUN) crowdin crowdin
 WAIT_DB             = @$(COMPOSE_RUN) dockerize -wait tcp://$(DB_HOST):$(DB_PORT) -timeout 60s
 
@@ -94,8 +94,8 @@ build: ## build the project containers
 	@$(MAKE) build-frontend
 .PHONY: build
 
-build-backend: ## build the app-development container
-	@$(COMPOSE) build app-development
+build-backend: ## build the app-dev container
+	@$(COMPOSE) build app-dev
 .PHONY: build-backend
 
 
@@ -107,12 +107,12 @@ down: ## stop and remove containers, networks, images, and volumes
 	@$(COMPOSE) down
 .PHONY: down
 
-logs: ## display app-development logs (follow mode)
-	@$(COMPOSE) logs -f app-development
+logs: ## display app-dev logs (follow mode)
+	@$(COMPOSE) logs -f app-dev
 .PHONY: logs
 
 run-backend: ## start only the backend application and all needed services
-	@$(COMPOSE) up --force-recreate -d celery-development
+	@$(COMPOSE) up --force-recreate -d celery-dev
 	@echo "Wait for postgresql to be up..."
 	@$(WAIT_DB)
 .PHONY: run-backend
@@ -227,14 +227,14 @@ back-i18n-generate: ## create the .pot files used for i18n
 	@$(MANAGE) makemessages -a --keep-pot
 .PHONY: back-i18n-generate
 
-shell: ## open a Django Python shell
+shell: ## connect to database shell
 	@$(MANAGE) shell #_plus
-.PHONY: shell
+.PHONY: dbshell
 
 # -- Database
 
 dbshell: ## connect to database shell
-	docker compose exec app-development python manage.py dbshell
+	docker compose exec app-dev python manage.py dbshell
 .PHONY: dbshell
 
 resetdb: FLUSH_ARGS ?=
@@ -348,16 +348,16 @@ build-k8s-cluster: ## build the kubernetes cluster using kind
 
 install-external-secrets: ## install the kubernetes secrets from Vaultwarden
 	./bin/install-external-secrets.sh
-.PHONY: install-external-secrets
+.PHONY: build-k8s-cluster
 
 start-tilt: ## start the kubernetes cluster using kind
 	tilt up -f ./bin/Tiltfile
-.PHONY: start-tilt
+.PHONY: build-k8s-cluster
 
 start-tilt-keycloak: ## start the kubernetes cluster using kind, without Pro Connect for authentication, use keycloak
 	DEV_ENV=dev-keycloak tilt up -f ./bin/Tiltfile
-.PHONY: start-tilt-keycloak
+.PHONY: build-k8s-cluster
 
 start-tilt-dinum: ## start the kubernetes cluster using kind, without Pro Connect for authentication, but with DINUM styles
 	DEV_ENV=dev-dinum tilt up -f ./bin/Tiltfile
-.PHONY: start-tilt-dinum
+.PHONY: build-k8s-cluster

bin/Tiltfile

@@ -59,7 +59,7 @@ docker_build(
     context='../src/summary',
     dockerfile='../src/summary/Dockerfile',
     only=['.'],
-    target = 'summary-production',
+    target = 'production',
     live_update=[
         sync('../src/summary', '/app'),
     ]
@@ -71,7 +71,7 @@ docker_build(
     context='../src/agents',
     dockerfile='../src/agents/Dockerfile',
    only=['.'],
-    target = 'agents-production',
+    target = 'production',
     live_update=[
         sync('../src/agents', '/app'),
     ]

bin/_config.sh

@@ -89,5 +89,5 @@ function _dc_exec() {
 #
 # ARGS : django's manage.py command arguments
 function _django_manage() {
-    _dc_run "app-development" python manage.py "$@"
+    _dc_run "app-dev" python manage.py "$@"
 }

bin/pytest

@@ -4,5 +4,5 @@ source "$(dirname "${BASH_SOURCE[0]}")/_config.sh"
 
 _dc_run \
     -e DJANGO_CONFIGURATION=Test \
-    app-development \
+    app-dev \
     pytest "$@"

bin/update-openapi-schema

@@ -4,7 +4,7 @@ source "$(dirname "${BASH_SOURCE[0]}")/_config.sh"
 
 _dc_run \
     -e DJANGO_CONFIGURATION=Test \
-    app-development \
+    app-dev \
     python manage.py spectacular \
     --api-version 'v1.0' \
     --urlconf 'meet.api_urls' \

compose.yml

@@ -55,13 +55,13 @@ services:
     entrypoint: >
       sh -c "
       /usr/bin/mc alias set meet http://minio:9000 meet password &&
-      /usr/bin/mc admin config set meet notify_webhook:meet-webhook endpoint='http://app-development:8000/api/v1.0/recordings/storage-hook/' auth_token='Bearer password' &&
+      /usr/bin/mc admin config set meet notify_webhook:meet-webhook endpoint='http://app-dev:8000/api/v1.0/recordings/storage-hook/' auth_token='Bearer password' &&
       /usr/bin/mc admin service restart meet --wait --json &&
       sleep 15 &&
       /usr/bin/mc event add meet/meet-media-storage arn:minio:sqs::meet-webhook:webhook --event put &&
       exit 0;"
 
-  app-development:
+  app-dev:
     build:
       context: .
       target: backend-development
@@ -94,7 +94,7 @@ services:
       - resource-server
       - default
   
-  celery-development:
+  celery-dev:
     user: ${DOCKER_USER:-1000}
     image: meet:backend-development
     command: ["celery", "-A", "meet.celery_app", "worker", "-l", "DEBUG"]
@@ -107,9 +107,9 @@ services:
       - ./src/backend:/app
       - ./data/static:/data/static
     depends_on:
-      - app-development
+      - app-dev
 
-  app-production:
+  app:
     build:
       context: .
       target: backend-production
@@ -128,7 +128,7 @@ services:
       - livekit
       - minio
 
-  celery-production:
+  celery:
     user: ${DOCKER_USER:-1000}
     image: meet:backend-production
     command: ["celery", "-A", "meet.celery_app", "worker", "-l", "INFO"]
@@ -138,7 +138,7 @@ services:
       - env.d/development/common
       - env.d/development/postgresql
     depends_on:
-      - app-production
+      - app
 
   nginx:
     image: nginx:1.25
@@ -161,7 +161,7 @@ services:
       args:
         VITE_API_BASE_URL: "http://localhost:8071"
         VITE_APP_TITLE: "LaSuite Meet"
-    image: meet:frontend-production
+    image: meet:frontend-development
     ports:
       - "3000:8080"
 
@@ -249,10 +249,10 @@ services:
     ports:
       - "6379:6379"
 
-  app-summary-development:
+  app-summary-dev:
     build:
       context: src/summary
-      target: summary-development
+      target: development
       args:
         DOCKER_USER: ${DOCKER_USER:-1000}
     user: ${DOCKER_USER:-1000}
@@ -270,7 +270,7 @@ services:
     build:
       context: ./src/summary
       dockerfile: Dockerfile
-      target: summary-production
+      target: production
     command: celery -A summary.core.celery_worker worker --pool=solo --loglevel=debug -Q transcribe-queue
     env_file:
       - env.d/development/summary
@@ -278,7 +278,7 @@ services:
       - ./src/summary:/app
     depends_on:
       - redis-summary
-      - app-summary-development
+      - app-summary-dev
       - minio
     develop:
       watch:
@@ -290,7 +290,7 @@ services:
     build:
       context: ./src/summary
       dockerfile: Dockerfile
-      target: summary-production
+      target: production
     command: celery -A summary.core.celery_worker worker --pool=solo --loglevel=debug -Q summarize-queue
     env_file:
       - env.d/development/summary
@@ -298,7 +298,7 @@ services:
       - ./src/summary:/app
     depends_on:
       - redis-summary
-      - app-summary-development
+      - app-summary-dev
       - minio
     develop:
       watch:

docker/livekit/config/livekit-server.yaml

@@ -7,4 +7,4 @@ keys:
 webhook:
   api_key: devkey
   urls:
-      - http://app-development:8000/api/v1.0/rooms/webhooks-livekit/
+      - http://app-dev:8000/api/v1.0/rooms/webhooks-livekit/

env.d/development/common.dist

@@ -61,7 +61,7 @@ ALLOW_UNREGISTERED_ROOMS=False
 RECORDING_ENABLE=True
 RECORDING_STORAGE_EVENT_ENABLE=True
 RECORDING_STORAGE_EVENT_TOKEN=password
-SUMMARY_SERVICE_ENDPOINT=http://app-summary-development:8000/api/v1/tasks/
+SUMMARY_SERVICE_ENDPOINT=http://app-summary-dev:8000/api/v1/tasks/
 SUMMARY_SERVICE_API_TOKEN=password
 RECORDING_DOWNLOAD_BASE_URL=http://localhost:3000/recording
 

env.d/development/summary.dist

@@ -1,4 +1,4 @@
-APP_NAME="meet-app-summary-development"
+APP_NAME="meet-app-summary-dev"
 APP_API_TOKEN="password"
 
 AWS_STORAGE_BUCKET_NAME="http://meet-media-storage"

src/agents/Dockerfile

@@ -15,7 +15,7 @@ COPY pyproject.toml .
 RUN mkdir /install && \
   pip install --prefix=/install .
 
-FROM base AS agents-production
+FROM base AS production
 
 WORKDIR /app
 

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

@@ -7,7 +7,7 @@ import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
 import { useSidePanel } from '../hooks/useSidePanel'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useRef } from 'react'
 import { Chat } from '../prefabs/Chat'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
@@ -15,9 +15,11 @@ import { Tools } from './Tools'
 import { Info } from './Info'
 import { HStack } from '@/styled-system/jsx'
 
+const SIDE_PANEL_HEADING_ID = 'side-panel-heading'
+const SIDE_PANEL_CLOSE_ID = 'side-panel-close'
+
 type StyledSidePanelProps = {
   title: string
-  ariaLabel: string
   children: ReactNode
   onClose: () => void
   isClosed: boolean
@@ -29,7 +31,6 @@ type StyledSidePanelProps = {
 
 const StyledSidePanel = ({
   title,
-  ariaLabel,
   children,
   onClose,
   isClosed,
@@ -38,7 +39,14 @@ const StyledSidePanel = ({
   onBack,
   backButtonLabel,
 }: StyledSidePanelProps) => (
+  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- role="dialog" makes this interactive
   <aside
+    role="dialog"
+    aria-labelledby={!isClosed ? SIDE_PANEL_HEADING_ID : undefined}
+    aria-hidden={isClosed || undefined}
+    onKeyDown={(e) => {
+      if (e.key === 'Escape') onClose()
+    }}
     className={css({
       borderWidth: '1px',
       borderStyle: 'solid',
@@ -63,57 +71,57 @@ const StyledSidePanel = ({
     style={{
       transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
     }}
-    aria-hidden={isClosed}
-    aria-label={ariaLabel}
   >
     <HStack alignItems="center">
-      {isSubmenu && (
-        <Button
-          variant="secondaryText"
-          size="sm"
-          square
-          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
-          aria-label={backButtonLabel}
-          onPress={onBack}
+        {isSubmenu && (
+          <Button
+            variant="secondaryText"
+            size="sm"
+            square
+            className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
+            aria-label={backButtonLabel}
+            onPress={onBack}
+          >
+            <RiArrowLeftLine size={20} aria-hidden="true" />
+          </Button>
+        )}
+        <Heading
+          id={SIDE_PANEL_HEADING_ID}
+          slot="title"
+          level={1}
+          className={text({ variant: 'h2' })}
+          style={{
+            paddingLeft: isSubmenu ? 0 : '1.5rem',
+            paddingTop: '1rem',
+            display: isClosed ? 'none' : 'flex',
+            justifyContent: 'start',
+            alignItems: 'center',
+          }}
         >
-          <RiArrowLeftLine size={20} aria-hidden="true" />
-        </Button>
-      )}
-      <Heading
-        slot="title"
-        level={1}
-        className={text({ variant: 'h2' })}
+          {title}
+        </Heading>
+      </HStack>
+      <Div
+        position="absolute"
+        top="5"
+        right="5"
         style={{
-          paddingLeft: isSubmenu ? 0 : '1.5rem',
-          paddingTop: '1rem',
-          display: isClosed ? 'none' : 'flex',
-          justifyContent: 'start',
-          alignItems: 'center',
+          display: isClosed ? 'none' : undefined,
         }}
       >
-        {title}
-      </Heading>
-    </HStack>
-    <Div
-      position="absolute"
-      top="5"
-      right="5"
-      style={{
-        display: isClosed ? 'none' : undefined,
-      }}
-    >
-      <Button
-        invisible
-        variant="tertiaryText"
-        size="xs"
-        onPress={onClose}
-        aria-label={closeButtonTooltip}
-        tooltip={closeButtonTooltip}
-      >
-        <RiCloseLine />
-      </Button>
-    </Div>
-    {children}
+        <Button
+          id={SIDE_PANEL_CLOSE_ID}
+          invisible
+          variant="tertiaryText"
+          size="xs"
+          onPress={onClose}
+          aria-label={closeButtonTooltip}
+          tooltip={closeButtonTooltip}
+        >
+          <RiCloseLine />
+        </Button>
+      </Div>
+      {children}
   </aside>
 )
 
@@ -135,6 +143,7 @@ const Panel = ({ isOpen, keepAlive = false, children }: PanelProps) => (
     {keepAlive || isOpen ? children : null}
   </div>
 )
+
 export const SidePanel = () => {
   const {
     activePanelId,
@@ -150,14 +159,51 @@ export const SidePanel = () => {
   } = useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'sidePanel' })
 
+  const triggerRef = useRef<HTMLElement | null>(null)
+
+  // The aside stays mounted (CSS slide + keepAlive), so we manually handle
+  // auto-focus on open and restore focus on close (via handleClose).
+ 
+  useEffect(() => {
+    if (!isSidePanelOpen) return
+    const active = document.activeElement as HTMLElement
+    // Menu items render as DIVs that unmount when the menu closes — resolve to the menu trigger
+    triggerRef.current =
+      active?.tagName === 'DIV'
+        ? (document.querySelector<HTMLElement>('#room-options-trigger') ??
+          active)
+        : active
+    requestAnimationFrame(() => {
+      const closeBtn = document.getElementById(SIDE_PANEL_CLOSE_ID)
+      // Skip if a child panel already moved focus inside (e.g. Chat input)
+      if (closeBtn?.closest('aside')?.contains(document.activeElement)) return
+      closeBtn?.focus({ preventScroll: true })
+    })
+  }, [isSidePanelOpen])
+
+  const handleClose = () => {
+    const trigger = triggerRef.current
+    triggerRef.current = null
+    layoutStore.activePanelId = null
+    layoutStore.activeSubPanelId = null
+    // Double RAF: first lets React re-render, second lets FocusScope release containment
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (trigger?.isConnected) {
+          trigger.focus({ preventScroll: true })
+        } else {
+          document
+            .querySelector<HTMLElement>('#room-options-trigger')
+            ?.focus({ preventScroll: true })
+        }
+      })
+    })
+  }
+
   return (
     <StyledSidePanel
       title={t(`heading.${activeSubPanelId || activePanelId}`)}
-      ariaLabel={t('ariaLabel')}
-      onClose={() => {
-        layoutStore.activePanelId = null
-        layoutStore.activeSubPanelId = null
-      }}
+      onClose={handleClose}
       closeButtonTooltip={t('closeButton', {
         content: t(`content.${activeSubPanelId || activePanelId}`),
       })}

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

@@ -4,7 +4,6 @@ import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { ReactNode } from 'react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
-import { useRestoreFocus } from '@/hooks/useRestoreFocus'
 import {
   useIsRecordingModeEnabled,
   RecordingMode,
@@ -95,26 +94,10 @@ const ToolButton = ({
 
 export const Tools = () => {
   const { data } = useConfig()
-  const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
+  const { openTranscript, openScreenRecording, activeSubPanelId } =
     useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
 
-  // Restore focus to the element that opened the Tools panel
-  // following the same pattern as Chat.
-  useRestoreFocus(isToolsOpen, {
-    // If the active element is a MenuItem (DIV) that will be unmounted when the menu closes,
-    // find the "more options" button ("Plus d'options") that opened the menu
-    resolveTrigger: (activeEl) => {
-      if (activeEl?.tagName === 'DIV') {
-        return document.querySelector<HTMLElement>('#room-options-trigger')
-      }
-      // For direct button clicks (e.g. "Plus d'outils"), use the active element as is
-      return activeEl
-    },
-    restoreFocusRaf: true,
-    preventScroll: true,
-  })
-
   const isTranscriptEnabled = useIsRecordingModeEnabled(
     RecordingMode.Transcript
   )

src/frontend/src/features/rooms/livekit/components/chat/Input.tsx

@@ -80,10 +80,12 @@ export const ChatInput = ({
       <TextArea
         ref={inputRef}
         onKeyDown={(e) => {
-          e.stopPropagation()
+          if (e.key !== 'Escape') e.stopPropagation()
           submitOnEnter(e)
         }}
-        onKeyUp={(e) => e.stopPropagation()}
+        onKeyUp={(e) => {
+          if (e.key !== 'Escape') e.stopPropagation()
+        }}
         placeholder={t('textArea.placeholder')}
         value={text}
         onChange={(e) => {

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

@@ -15,7 +15,6 @@ import { ChatEntry } from '../components/chat/Entry'
 import { useSidePanel } from '../hooks/useSidePanel'
 import { LocalParticipant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { css } from '@/styled-system/css'
-import { useRestoreFocus } from '@/hooks/useRestoreFocus'
 
 export interface ChatProps
   extends React.HTMLAttributes<HTMLDivElement>, ChatOptions {}
@@ -36,18 +35,12 @@ export function Chat({ ...props }: ChatProps) {
   const { isChatOpen } = useSidePanel()
   const chatSnap = useSnapshot(chatStore)
 
-  // Keep track of the element that opened the chat so we can restore focus
-  // when the chat panel is closed.
-  useRestoreFocus(isChatOpen, {
-    // Avoid layout "jump" during the side panel slide-in animation.
-    // Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
-    onOpened: () => {
-      requestAnimationFrame(() => {
-        inputRef.current?.focus({ preventScroll: true })
-      })
-    },
-    preventScroll: true,
-  })
+  React.useEffect(() => {
+    if (!isChatOpen) return
+    requestAnimationFrame(() => {
+      inputRef.current?.focus({ preventScroll: true })
+    })
+  }, [isChatOpen])
 
   // Use useParticipants hook to trigger a re-render when the participant list changes.
   const participants = useParticipants()

src/summary/Dockerfile

@@ -16,7 +16,7 @@ COPY pyproject.toml .
 
 RUN pip3 install --no-cache-dir .
 
-FROM base AS summary-development
+FROM base AS development
 WORKDIR /app
 
 COPY . .
@@ -24,7 +24,7 @@ RUN pip3 install --no-cache-dir -e ".[dev]" || pip3 install --no-cache-dir -e .
 
 CMD ["uvicorn", "summary.main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
 
-FROM base AS summary-production
+FROM base AS production
 
 WORKDIR /app