♿️(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

@@ -6,15 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
 ## [1.0.1] - 2025-12-17
 
-### Changed
+### 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
-
-## [Unreleased]

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/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/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/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;
 }