♿️(frontend) focus side panel container on open

Focus aside on side panel open so screen readers announce the aria-label

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to
 
 - 🩹(backend) identify externally provisioned users to PostHog
 - 🐛(backend) fix info panel crash for unregistered rooms
+- ♿️(frontend) focus side panel container on open #1452
 
 ## [1.23.0] - 2026-07-08
 

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

@@ -6,8 +6,8 @@ import { Button, Div } from '@/primitives'
 import { RiArrowLeftLine, RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
-import { useSidePanel } from '../hooks/useSidePanel'
+import { PanelId, useSidePanel } from '../hooks/useSidePanel'
-import { ReactNode } from 'react'
+import React, { ReactNode, useCallback, useRef } from 'react'
 import { Chat } from '../prefabs/Chat'
 import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
@@ -15,6 +15,7 @@ import { Tools } from './Tools'
 import { Info } from './Info'
 import { HStack } from '@/styled-system/jsx'
 import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
 
 type StyledSidePanelProps = {
   title: string
@@ -29,7 +30,9 @@ type StyledSidePanelProps = {
   isReactionToolbarOpen?: boolean
 }
 
-const StyledSidePanel = ({
+const StyledSidePanel = React.forwardRef<HTMLElement, StyledSidePanelProps>(
+  (
+    {
       title,
       ariaLabel,
       children,
@@ -40,8 +43,12 @@ const StyledSidePanel = ({
       isSubmenu = false,
       onBack,
       backButtonLabel,
-}: StyledSidePanelProps) => (
+    },
+    ref
+  ) => (
     <aside
+      ref={ref}
+      tabIndex={-1}
       className={css({
         borderWidth: '1px',
         borderStyle: 'solid',
@@ -63,6 +70,9 @@ const StyledSidePanel = ({
         top: 0,
         width: 'var(--sizes-room-side-panel)',
         transition: '.5s cubic-bezier(.4,0,.2,1) 5ms',
+        '&:focus': {
+          outline: 'none',
+        },
       })}
       style={{
         transform: isClosed
@@ -125,6 +135,9 @@ const StyledSidePanel = ({
       {children}
     </aside>
   )
+)
+
+StyledSidePanel.displayName = 'StyledSidePanel'
 
 type PanelProps = {
   isOpen: boolean
@@ -162,8 +175,24 @@ export const SidePanel = () => {
 
   const { isOpen: isReactionToolbarOpen } = useReactionsToolbar()
 
+  const asideRef = useRef<HTMLElement>(null)
+
+  const panelManagesFocus = activePanelId === PanelId.CHAT
+
+  const focusAside = useCallback(() => {
+    requestAnimationFrame(() => {
+      asideRef.current?.focus({ preventScroll: true })
+    })
+  }, [])
+
+  useRestoreFocus(isSidePanelOpen && !panelManagesFocus, {
+    onOpened: focusAside,
+    preventScroll: true,
+  })
+
   return (
     <StyledSidePanel
+      ref={asideRef}
       title={title}
       ariaLabel={t('ariaLabel', { title })}
       onClose={() => {