diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx index e59f3089..4750e669 100644 --- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx +++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx @@ -17,6 +17,7 @@ import { HStack } from '@/styled-system/jsx' import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar' import { useRestoreFocus } from '@/hooks/useRestoreFocus' import { useEscapeToClose } from '@/hooks/useEscapeToClose' +import { srOnly } from '@/styles/a11y' type StyledSidePanelProps = { title: string @@ -25,6 +26,7 @@ type StyledSidePanelProps = { onClose: () => void isClosed: boolean closeButtonTooltip: string + escapeHint: string isSubmenu: boolean onBack: () => void backButtonLabel: string @@ -41,6 +43,7 @@ const StyledSidePanel = React.forwardRef( isClosed, isReactionToolbarOpen, closeButtonTooltip, + escapeHint, isSubmenu = false, onBack, backButtonLabel, @@ -85,7 +88,11 @@ const StyledSidePanel = React.forwardRef( }} aria-hidden={isClosed} aria-label={ariaLabel} + aria-describedby="side-panel-escape-hint" > + + {escapeHint} + {isSubmenu && (