♿️(frontend) restore focus to trigger button when panel closes

improves keyboard navigation and accessibility consistency

Signed-off-by: Cyril <c.gromoff@gmail.com>

CHANGELOG.md

@@ -1,4 +1,3 @@
-
 # Changelog
 
 All notable changes to this project will be documented in this file.
@@ -9,4 +8,14 @@ and this project adheres to
 
 ## [Unreleased]
 
--  
+## [1.0.1] - 2025-12-17
+
+### Changes
+
+- ♿(frontend) improve accessibility:
+ - ♿️(frontend) Improve SR and focus for transcript and recording #810
+- ♿️(frontend) hover controls, focus, SR #803
+- ♿️(frontend) change ptt keybinding from space to v #813
+- ♿(frontend) indicate external link opens in new window on feedback #816 
+- ♿(frontend) fix heading level in modal to maintain semantic hierarchy #815
+- ♿️(frontend) Improve focus management when opening and closing chat #807

bin/prepare-release.sh

@@ -0,0 +1,160 @@
+#!/bin/bash
+
+set -e  # Exit on error
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# Function to print colored output
+print_info() {
+    echo -e "${GREEN}[INFO]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+
+# Function to update npm package version
+update_npm_version() {
+    local component=$1
+    print_info "Updating $component version..."
+    cd "src/$component"
+    npm version "$VERSION" --no-git-tag-version
+    cd -
+}
+
+# Function to update Python project version in pyproject.toml
+update_python_version() {
+    local component=$1
+    print_info "Updating $component version..."
+    cd "src/$component"
+
+    if [ ! -f "pyproject.toml" ]; then
+        print_error "pyproject.toml not found in src/$component!"
+        exit 1
+    fi
+
+    if grep -q '^version = "' pyproject.toml; then
+        sed -i.bak "s/^version = \".*\"/version = \"$VERSION\"/" pyproject.toml
+        rm pyproject.toml.bak
+        print_info "Updated pyproject.toml version to $VERSION"
+    else
+        print_error "Could not find version line in pyproject.toml"
+        exit 1
+    fi
+
+    cd -
+}
+
+# Check if we're in a git repository
+if ! git rev-parse --git-dir > /dev/null 2>&1; then
+    print_error "Not a git repository. Please run this script from the root of your project."
+    exit 1
+fi
+
+# Check if working directory is clean
+if ! git diff-index --quiet HEAD --; then
+    print_error "Working directory is not clean. Please commit or stash your changes first."
+    exit 1
+fi
+
+# Ask user for release version number
+echo ""
+read -p "Enter release version number (e.g., 1.2.3): " VERSION
+
+# Validate version format (basic semver check)
+if ! [[ $VERSION =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+    print_error "Invalid version format. Please use semantic versioning (e.g., 1.2.3)"
+    exit 1
+fi
+
+print_info "Release version: $VERSION"
+
+# Check if branch already exists
+BRANCH_NAME="release/$VERSION"
+if git show-ref --verify --quiet "refs/heads/$BRANCH_NAME"; then
+    print_error "Branch $BRANCH_NAME already exists!"
+    exit 1
+fi
+
+# Create and checkout new branch
+print_info "Creating branch: $BRANCH_NAME"
+git checkout -b "$BRANCH_NAME"
+
+# Update frontend
+update_npm_version "frontend"
+
+# Update SDK
+update_npm_version "sdk"
+
+# Update mail
+update_npm_version "mail"
+
+# Update backend pyproject.toml
+update_python_version "backend"
+
+# Update summary pyproject.toml
+update_python_version "summary"
+
+# Update agents pyproject.toml
+update_python_version "agents"
+
+# Update CHANGELOG
+print_info "Updating CHANGELOG..."
+
+if [ ! -f "CHANGELOG.md" ]; then
+    print_error "CHANGELOG.md not found in project root!"
+    exit 1
+fi
+
+# Get current date in YYYY-MM-DD format
+CURRENT_DATE=$(date +%Y-%m-%d)
+
+# Replace [Unreleased] with [version number] - YYYY-MM-DD
+if grep -q '\[Unreleased\]' CHANGELOG.md; then
+    sed -i.bak "s/\[Unreleased\]/[$VERSION] - $CURRENT_DATE/" CHANGELOG.md
+
+    # Add new [Unreleased] section after the header
+    # This adds it after the line containing "Semantic Versioning"
+    sed -i.bak "/Semantic Versioning/a\\
+\\
+## [Unreleased]
+" CHANGELOG.md
+
+    rm CHANGELOG.md.bak
+    print_info "Updated CHANGELOG.md"
+else
+    print_warning "Could not find [Unreleased] section in CHANGELOG.md"
+fi
+
+
+
+# Summary
+echo ""
+print_info "Release preparation complete!"
+echo ""
+echo "Summary:"
+echo "  - Branch created: $BRANCH_NAME"
+echo "  - Version updated to: $VERSION"
+echo "  - Files modified:"
+echo "      - src/frontend/package.json"
+echo "      - src/sdk/package.json"
+echo "      - src/mail/package.json"
+echo "      - src/backend/pyproject.toml"
+echo "      - src/summary/pyproject.toml"
+echo "      - src/agents/pyproject.toml"
+echo "      - CHANGELOG.md"
+echo ""
+print_warning "Next steps:"
+echo "  1. Review the changes: git status"
+echo "  2. Commit the changes: git add . && git commit -m 'Release $VERSION'"
+echo "  3. Push the branch: git push origin $BRANCH_NAME"
+echo ""

src/agents/pyproject.toml

@@ -1,7 +1,7 @@
 
 [project]
 name = "agents"
-version = "1.0.0"
+version = "1.0.1"
 requires-python = ">=3.12"
 dependencies = [
     "livekit-agents==1.2.18",

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "1.0.0"
+version = "1.0.1"
 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.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "dependencies": {
         "@livekit/components-react": "2.9.13",
         "@livekit/components-styles": "1.1.6",

src/frontend/package.json

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

src/frontend/src/components/Avatar.tsx

@@ -68,6 +68,7 @@ export const Avatar = ({
       {...props}
     >
       <span
+        aria-hidden="true"
         className={css({
           marginTop: '-0.3rem',
         })}

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

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useSnapshot } from 'valtio'
 import { useRoomContext } from '@livekit/components-react'
 import { Spinner } from '@/primitives/Spinner'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Text } from '@/primitives'
 import { RoomEvent } from 'livekit-client'
 import { decodeNotificationDataReceived } from '@/features/notifications/utils'
@@ -31,6 +31,9 @@ export const RecordingStateToast = () => {
   const { openTranscript, openScreenRecording } = useSidePanel()
   const [isAlertOpen, setIsAlertOpen] = useState(false)
 
+  const [srMessage, setSrMessage] = useState('')
+  const lastKeyRef = useRef('')
+
   const recordingSnap = useSnapshot(recordingStore)
 
   const hasTranscriptAccess = useHasRecordingAccess(
@@ -128,6 +131,23 @@ export const RecordingStateToast = () => {
     }
   }, [recordingSnap])
 
+  // Update screen reader message only when the key actually changes
+  // This prevents duplicate announcements caused by re-renders
+  useEffect(() => {
+    if (key && key !== lastKeyRef.current) {
+      lastKeyRef.current = key
+      const message = t(key)
+      setSrMessage(message)
+
+      // Clear message after 3 seconds to prevent it from being announced again
+      const timer = setTimeout(() => {
+        setSrMessage('')
+      }, 3000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [key, t])
+
   if (!key)
     return isAdminOrOwner ? (
       <LimitReachedAlertDialog
@@ -144,67 +164,81 @@ export const RecordingStateToast = () => {
   const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess
 
   return (
-    <div
-      className={css({
-        display: 'flex',
-        position: 'fixed',
-        top: '10px',
-        left: '10px',
-        paddingY: '0.25rem',
-        paddingX: '0.75rem 0.75rem',
-        backgroundColor: 'danger.700',
-        borderColor: 'white',
-        border: '1px solid',
-        color: 'white',
-        borderRadius: '4px',
-        gap: '0.5rem',
-      })}
-    >
-      {isStarted ? (
-        <RiRecordCircleLine
-          size={20}
-          className={css({
-            animation: 'pulse_background 1s infinite',
-          })}
-        />
-      ) : (
-        <Spinner size={20} variant="dark" />
-      )}
+    <>
+      {/* Screen reader only message to announce state changes once */}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {srMessage}
+      </div>
 
-      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
-        <Text
-          variant={'sm'}
-          className={css({
-            fontWeight: '500 !important',
-          })}
-        >
-          {t(key)}
-        </Text>
-      )}
-      {hasScreenRecordingAccessAndActive && (
-        <RACButton
-          onPress={openScreenRecording}
-          className={css({
-            textStyle: 'sm !important',
-            fontWeight: '500 !important',
-            cursor: 'pointer',
-          })}
-        >
-          {t(key)}
-        </RACButton>
-      )}
-      {hasTranscriptAccessAndActive && (
-        <RACButton
-          onPress={openTranscript}
-          className={css({
-            textStyle: 'sm !important',
-            fontWeight: '500 !important',
-            cursor: 'pointer',
-          })}
-        >
-          {t(key)}
-        </RACButton>
-      )}
-    </div>
+      {/* Visual banner (without aria-live to avoid duplicate announcements) */}
+      <div
+        className={css({
+          display: 'flex',
+          position: 'fixed',
+          top: '10px',
+          left: '10px',
+          paddingY: '0.25rem',
+          paddingX: '0.75rem 0.75rem',
+          backgroundColor: 'danger.700',
+          borderColor: 'white',
+          border: '1px solid',
+          color: 'white',
+          borderRadius: '4px',
+          gap: '0.5rem',
+        })}
+      >
+        {isStarted ? (
+          <RiRecordCircleLine
+            size={20}
+            className={css({
+              animation: 'pulse_background 1s infinite',
+            })}
+          />
+        ) : (
+          <Spinner size={20} variant="dark" />
+        )}
+
+        {!hasScreenRecordingAccessAndActive &&
+          !hasTranscriptAccessAndActive && (
+            <Text
+              variant={'sm'}
+              className={css({
+                fontWeight: '500 !important',
+              })}
+            >
+              {t(key)}
+            </Text>
+          )}
+        {hasScreenRecordingAccessAndActive && (
+          <RACButton
+            onPress={openScreenRecording}
+            className={css({
+              textStyle: 'sm !important',
+              fontWeight: '500 !important',
+              cursor: 'pointer',
+            })}
+          >
+            {t(key)}
+          </RACButton>
+        )}
+        {hasTranscriptAccessAndActive && (
+          <RACButton
+            onPress={openTranscript}
+            className={css({
+              textStyle: 'sm !important',
+              fontWeight: '500 !important',
+              cursor: 'pointer',
+            })}
+          >
+            {t(key)}
+          </RACButton>
+        )}
+      </div>
+    </>
   )
 }

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

@@ -9,7 +9,7 @@ import {
   useStartRecording,
   useStopRecording,
 } from '@/features/recording'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { ConnectionState, RoomEvent } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
@@ -64,6 +64,17 @@ export const ScreenRecordingSidePanel = () => {
   const isRoomConnected = room.state == ConnectionState.Connected
   const isRecordingTransitioning = useIsRecordingTransitioning()
 
+  // Focus management: focus the primary action button when this side panel opens.
+  const primaryActionRef = useRef<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      if (primaryActionRef.current) {
+        primaryActionRef.current.focus({ preventScroll: true })
+      }
+    })
+  }, [])
+
   useEffect(() => {
     const handleRecordingStatusChanged = () => {
       setIsLoading(false)
@@ -153,6 +164,7 @@ export const ScreenRecordingSidePanel = () => {
             {t('stop.body')}
           </Text>
           <Button
+            ref={primaryActionRef}
             isDisabled={isDisabled}
             onPress={() => handleScreenRecording()}
             data-attr="stop-screen-recording"
@@ -219,6 +231,7 @@ export const ScreenRecordingSidePanel = () => {
                 )}
               </Text>
               <Button
+                ref={primaryActionRef}
                 isDisabled={isDisabled}
                 onPress={() => handleScreenRecording()}
                 data-attr="start-screen-recording"

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

@@ -11,7 +11,7 @@ import {
   useStopRecording,
   useHasFeatureWithoutAdminRights,
 } from '../index'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { ConnectionState, RoomEvent } from 'livekit-client'
 import { useTranslation } from 'react-i18next'
 import { RecordingStatus, recordingStore } from '@/stores/recording'
@@ -77,6 +77,17 @@ export const TranscriptSidePanel = () => {
   const room = useRoomContext()
   const isRoomConnected = room.state == ConnectionState.Connected
 
+  // Focus management: focus the primary action button when this side panel opens.
+  const primaryActionRef = useRef<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    if (primaryActionRef.current) {
+      requestAnimationFrame(() => {
+        primaryActionRef.current?.focus({ preventScroll: true })
+      })
+    }
+  }, [])
+
   useEffect(() => {
     const handleRecordingStatusChanged = () => {
       setIsLoading(false)
@@ -227,6 +238,7 @@ export const TranscriptSidePanel = () => {
                 {t('stop.body')}
               </Text>
               <Button
+                ref={primaryActionRef}
                 isDisabled={isDisabled}
                 onPress={() => handleTranscript()}
                 data-attr="stop-transcript"
@@ -296,6 +308,7 @@ export const TranscriptSidePanel = () => {
                     )}
                   </Text>
                   <Button
+                    ref={primaryActionRef}
                     isDisabled={isDisabled}
                     onPress={() => handleTranscript()}
                     data-attr="start-transcript"

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

@@ -67,7 +67,7 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
           gap={0}
           style={{ maxWidth: '100%', overflow: 'hidden' }}
         >
-          <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
+          <Heading slot="title" level={2} className={text({ variant: 'h2' })}>
             {t('heading')}
           </Heading>
           <Div position="absolute" top="5" right="5">

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

@@ -0,0 +1,32 @@
+import React, { ReactNode } from 'react'
+import { css } from '@/styled-system/css'
+
+export interface KeyboardShortcutHintProps {
+  children: ReactNode
+}
+
+/**
+ * Small reusable bubble used to display and announce keyboard shortcuts,
+ * typically when an element receives keyboard focus.
+ */
+export const KeyboardShortcutHint: React.FC<KeyboardShortcutHintProps> = ({
+  children,
+}) => {
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        top: '0.75rem',
+        right: '0.75rem',
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        color: 'white',
+        borderRadius: 'calc(var(--lk-border-radius) / 2)',
+        paddingInline: '0.5rem',
+        paddingBlock: '0.1rem',
+        fontSize: '0.875rem',
+      })}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -35,6 +35,7 @@ export const ParticipantName = ({
       style={{
         paddingBottom: '0.1rem',
       }}
+      aria-hidden="true"
     >
       {displayedName}
     </Text>

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

@@ -29,6 +29,9 @@ import { ParticipantPlaceholder } from './ParticipantPlaceholder'
 import { ParticipantTileFocus } from './ParticipantTileFocus'
 import { FullScreenShareWarning } from './FullScreenShareWarning'
 import { ParticipantName } from './ParticipantName'
+import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
+import { useTranslation } from 'react-i18next'
+import { KeyboardShortcutHint } from './KeyboardShortcutHint'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -102,9 +105,31 @@ export const ParticipantTile: (
   })
 
   const isScreenShare = trackReference.source != Track.Source.Camera
+  const [hasKeyboardFocus, setHasKeyboardFocus] = React.useState(false)
+
+  const participantName = getParticipantName(trackReference.participant)
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+
+  const interactiveProps = {
+    ...elementProps,
+    // Ensure the tile is focusable to expose contextual controls to keyboard users.
+    tabIndex: 0,
+    'aria-label': t('containerLabel', { name: participantName }),
+    onFocus: (event: React.FocusEvent<HTMLDivElement>) => {
+      elementProps.onFocus?.(event)
+      setHasKeyboardFocus(true)
+    },
+    onBlur: (event: React.FocusEvent<HTMLDivElement>) => {
+      elementProps.onBlur?.(event)
+      const nextTarget = event.relatedTarget as Node | null
+      if (!event.currentTarget.contains(nextTarget)) {
+        setHasKeyboardFocus(false)
+      }
+    },
+  }
 
   return (
-    <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
+    <div ref={ref} style={{ position: 'relative' }} {...interactiveProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
         <ParticipantContextIfNeeded participant={trackReference.participant}>
           <FullScreenShareWarning trackReference={trackReference} />
@@ -195,10 +220,16 @@ export const ParticipantTile: (
             </>
           )}
           {!disableMetadata && (
-            <ParticipantTileFocus trackRef={trackReference} />
+            <ParticipantTileFocus
+              trackRef={trackReference}
+              hasKeyboardFocus={hasKeyboardFocus}
+            />
           )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
+      {hasKeyboardFocus && (
+        <KeyboardShortcutHint>{t('toolbarHint')}</KeyboardShortcutHint>
+      )}
     </div>
   )
 })

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

@@ -131,8 +131,10 @@ const MOUSE_IDLE_TIME = 3000
 
 export const ParticipantTileFocus = ({
   trackRef,
+  hasKeyboardFocus,
 }: {
   trackRef: TrackReferenceOrPlaceholder
+  hasKeyboardFocus: boolean
 }) => {
   const [hovered, setHovered] = useState(false)
   const [opacity, setOpacity] = useState(0)
@@ -140,8 +142,10 @@ export const ParticipantTileFocus = ({
   const idleTimerRef = useRef<number | null>(null)
   const [isIdleRef, setIsIdleRef] = useState(false)
 
+  const isVisible = hasKeyboardFocus || (hovered && !isIdleRef)
+
   useEffect(() => {
-    if (hovered && !isIdleRef) {
+    if (isVisible) {
       // Wait for next frame to ensure element is mounted
       requestAnimationFrame(() => {
         setOpacity(0.6)
@@ -149,7 +153,7 @@ export const ParticipantTileFocus = ({
     } else {
       setOpacity(0)
     }
-  }, [hovered, isIdleRef])
+  }, [isVisible])
 
   const handleMouseMove = () => {
     if (idleTimerRef.current) {
@@ -180,11 +184,12 @@ export const ParticipantTileFocus = ({
         width: '100%',
         height: '100%',
       })}
+      aria-hidden={!isVisible}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       onMouseMove={handleMouseMove}
     >
-      {hovered && (
+      {isVisible && (
         <div
           className={css({
             backgroundColor: 'primaryDark.50',

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

@@ -164,7 +164,7 @@ export const SidePanel = () => {
       <Panel isOpen={isChatOpen} keepAlive={true}>
         <Chat />
       </Panel>
-      <Panel isOpen={isToolsOpen}>
+      <Panel isOpen={isToolsOpen} keepAlive={true}>
         <Tools />
       </Panel>
       <Panel isOpen={isAdminOpen}>

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

@@ -2,7 +2,7 @@ import { A, Div, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { Button as RACButton } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useRef } from 'react'
 import { RiFileTextFill, RiLiveFill } from '@remixicon/react'
 import { SubPanelId, useSidePanel } from '../hooks/useSidePanel'
 import {
@@ -114,10 +114,49 @@ const ToolButton = ({
 
 export const Tools = () => {
   const { data } = useConfig()
-  const { openTranscript, openScreenRecording, activeSubPanelId } =
+  const { openTranscript, openScreenRecording, activeSubPanelId, isToolsOpen } =
     useSidePanel()
   const { t } = useTranslation('rooms', { keyPrefix: 'moreTools' })
 
+  // Restore focus to the element that opened the Tools panel
+  // following the same pattern as Chat.
+  const toolsTriggerRef = useRef<HTMLElement | null>(null)
+  const prevIsToolsOpenRef = useRef(false)
+
+  useEffect(() => {
+    const wasOpen = prevIsToolsOpenRef.current
+    const isOpen = isToolsOpen
+
+    // Tools just opened
+    if (!wasOpen && isOpen) {
+      const activeEl = document.activeElement as HTMLElement | null
+
+      // If the active element is a MenuItem (DIV) that will be unmounted when the menu closes,
+      // find the "Plus d'options" button that opened the menu
+      if (activeEl?.tagName === 'DIV') {
+        toolsTriggerRef.current = document.querySelector<HTMLButtonElement>(
+          'button[aria-label="Plus d\'options"]'
+        )
+      } else {
+        // For direct button clicks (e.g. "Plus d'outils"), use the active element as is
+        toolsTriggerRef.current = activeEl
+      }
+    }
+
+    // Tools just closed
+    if (wasOpen && !isOpen) {
+      const trigger = toolsTriggerRef.current
+      if (trigger && document.contains(trigger)) {
+        requestAnimationFrame(() => {
+          trigger.focus({ preventScroll: true })
+        })
+      }
+      toolsTriggerRef.current = null
+    }
+
+    prevIsToolsOpenRef.current = isOpen
+  }, [isToolsOpen])
+
   const isTranscriptEnabled = useIsRecordingModeEnabled(
     RecordingMode.Transcript
   )

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

@@ -93,7 +93,7 @@ export const ToggleDevice = <T extends ToggleSource>({
     isDisabled: cannotUseDevice,
   })
   useLongPress({
-    keyCode: kind === 'audioinput' ? 'Space' : undefined,
+    keyCode: kind === 'audioinput' ? 'KeyV' : undefined,
     onKeyDown,
     onKeyUp,
     isDisabled: cannotUseDevice,

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

@@ -1,5 +1,5 @@
 import type { ChatMessage, ChatOptions } from '@livekit/components-core'
-import * as React from 'react'
+import React, { useEffect } from 'react'
 import {
   formatChatMessageLinks,
   useChat,
@@ -36,6 +36,36 @@ 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.
+  const prevIsChatOpenRef = React.useRef(false)
+  const chatTriggerRef = React.useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    const wasChatOpen = prevIsChatOpenRef.current
+    const isChatPanelOpen = isChatOpen
+
+    // Chat just opened
+    if (!wasChatOpen && isChatPanelOpen) {
+      chatTriggerRef.current = document.activeElement as HTMLElement | null
+      // Avoid layout "jump" during the side panel slide-in animation.
+      // Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
+      requestAnimationFrame(() => {
+        inputRef.current?.focus({ preventScroll: true })
+      })
+    }
+    // Chat just closed
+    if (wasChatOpen && !isChatPanelOpen) {
+      const trigger = chatTriggerRef.current
+      if (trigger && document.contains(trigger)) {
+        trigger.focus({ preventScroll: true })
+      }
+      chatTriggerRef.current = null
+    }
+
+    prevIsChatOpenRef.current = isChatPanelOpen
+  }, [isChatOpen])
+
   // Use useParticipants hook to trigger a re-render when the participant list changes.
   const participants = useParticipants()
 
@@ -45,7 +75,7 @@ export function Chat({ ...props }: ChatProps) {
   async function handleSubmit(text: string) {
     if (!send || !text) return
     await send(text)
-    inputRef?.current?.focus()
+    inputRef?.current?.focus({ preventScroll: true })
   }
 
   // TEMPORARY: This is a brittle workaround that relies on message count tracking

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx

@@ -11,6 +11,7 @@ import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
 import { MoreOptions } from './MoreOptions'
 import { useRef } from 'react'
+import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 
@@ -19,6 +20,18 @@ export function DesktopControlBar({
 }: Readonly<ControlBarAuxProps>) {
   const browserSupportsScreenSharing = supportsScreenSharing()
   const desktopControlBarEl = useRef<HTMLDivElement>(null)
+
+  useRegisterKeyboardShortcut({
+    shortcut: { key: 'F2' },
+    handler: () => {
+      const root = desktopControlBarEl.current
+      if (!root) return
+      const firstButton = root.querySelector<HTMLButtonElement>(
+        'button, [role="button"], [tabindex="0"]'
+      )
+      firstButton?.focus()
+    },
+  })
   return (
     <div
       ref={desktopControlBarEl}

src/frontend/src/locales/de/global.json

@@ -7,7 +7,7 @@
   },
   "feedback": {
     "context": "Produkt in Entwicklung — Ihr Feedback ist wichtig!",
-    "cta": "Teilen Sie uns Ihre Meinung mit"
+    "cta": "Teilen Sie uns Ihre Meinung mit - neues Fenster"
   },
   "forbidden": {
     "heading": "Zugriff verweigert"

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

@@ -512,6 +512,8 @@
     }
   },
   "participantTileFocus": {
+    "containerLabel": "Optionen für {{name}}",
+    "toolbarHint": "F2: zur Symbolleiste unten.",
     "pin": {
       "enable": "Anheften",
       "disable": "Lösen"

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

@@ -7,7 +7,7 @@
   },
   "feedback": {
     "context": "Product under development — your input matters!",
-    "cta": "Share your feedback"
+    "cta": "Share your feedback - new tab"
   },
   "forbidden": {
     "heading": "You don't have the permission to view this page"

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

@@ -512,6 +512,8 @@
     }
   },
   "participantTileFocus": {
+    "containerLabel": "Options for {{name}}",
+    "toolbarHint": "F2: go to the bottom toolbar.",
     "pin": {
       "enable": "Pin",
       "disable": "Unpin"

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

@@ -7,7 +7,7 @@
   },
   "feedback": {
     "context": "Produit en cours de développement — votre avis compte !",
-    "cta": "Partagez votre avis"
+    "cta": "Partagez votre avis - nouvelle fenêtre"
   },
   "forbidden": {
     "heading": "Accès interdit"

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

@@ -512,6 +512,8 @@
     }
   },
   "participantTileFocus": {
+    "containerLabel": "Options pour {{name}}",
+    "toolbarHint": "F2 : raccourci barre d'outils en bas.",
     "pin": {
       "enable": "Épingler",
       "disable": "Annuler l'épinglage"

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

@@ -7,7 +7,7 @@
   },
   "feedback": {
     "context": "Product in ontwikkeling - uw input is belangrijk!",
-    "cta": "Deel uw feedback"
+    "cta": "Deel uw feedback - nieuw tabblad"
   },
   "forbidden": {
     "heading": "U hebt geen toestemming om deze pagina te bekijken"

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

@@ -512,6 +512,8 @@
     }
   },
   "participantTileFocus": {
+    "containerLabel": "Opties voor {{name}}",
+    "toolbarHint": "F2: naar de werkbalk onderaan.",
     "pin": {
       "enable": "Pinnen",
       "disable": "Losmaken"

src/frontend/src/primitives/Button.tsx

@@ -5,7 +5,7 @@ import {
 import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
-import { ReactNode } from 'react'
+import { ReactNode, forwardRef } from 'react'
 import { Loader } from './Loader'
 
 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
@@ -17,25 +17,24 @@ export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
     icon?: ReactNode
   }
 
-export const Button = ({
-  tooltip,
-  tooltipType = 'instant',
-  ...props
-}: ButtonProps) => {
-  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
-  const { className, ...remainingComponentProps } = componentProps
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ tooltip, tooltipType = 'instant', ...props }, ref) => {
+    const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+    const { className, ...remainingComponentProps } = componentProps
 
-  return (
-    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <RACButton
-        className={[buttonRecipe(variantProps), className].join(' ')}
-        {...(remainingComponentProps as RACButtonsProps)}
-      >
-        {!props.loading && props.icon}
-        {props.loading && <Loader />}
-        {componentProps.children as ReactNode}
-        {props.description && <span>{tooltip}</span>}
-      </RACButton>
-    </TooltipWrapper>
-  )
-}
+    return (
+      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+        <RACButton
+          ref={ref}
+          className={[buttonRecipe(variantProps), className].join(' ')}
+          {...(remainingComponentProps as RACButtonsProps)}
+        >
+          {!props.loading && props.icon}
+          {props.loading && <Loader />}
+          {componentProps.children as ReactNode}
+          {props.description && <span>{tooltip}</span>}
+        </RACButton>
+      </TooltipWrapper>
+    )
+  }
+)

src/frontend/src/styles/index.css

@@ -6,6 +6,18 @@ body,
   height: 100%;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 * {
   outline: 2px solid transparent;
 }

src/mail/package-lock.json

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

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "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.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sdk",
-      "version": "1.0.0",
+      "version": "1.0.1",
       "license": "ISC",
       "workspaces": [
         "./library",

src/sdk/package.json

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

src/summary/pyproject.toml

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