From 865acf2838145ce8f83299ee964b7be0b737e6d4 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 6 Jan 2026 23:17:16 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20focus=20transcript=20and?=
 =?UTF-8?q?=20record=20buttons=20on=20open?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

move keyboard focus to transcript or recording button when the panel opens.

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 CHANGELOG.md                                  |  1 +
 .../recording/components/ControlsButton.tsx   |  9 ++++
 src/frontend/src/primitives/Button.tsx        | 43 +++++++++----------
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2aafa104..936310f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to
 ### Changed
 
 - 📈(frontend) track new recording's modes
+- ♿️(frontend) improve SR and focus for transcript and recording #810
 
 ### Fixed
 
diff --git a/src/frontend/src/features/recording/components/ControlsButton.tsx b/src/frontend/src/features/recording/components/ControlsButton.tsx
index e7a43db4..6721bb2c 100644
--- a/src/frontend/src/features/recording/components/ControlsButton.tsx
+++ b/src/frontend/src/features/recording/components/ControlsButton.tsx
@@ -42,6 +42,13 @@ export const ControlsButton = ({
 }: ControlsButtonProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: i18nKeyPrefix })
 
+  // Focus management: focus the primary action button when this side panel opens.
+  const primaryActionRef = useRef<HTMLButtonElement | null>(null)
+
+  useEffect(() => {
+    primaryActionRef.current?.focus()
+  }, [])
+
   const room = useRoomContext()
   const isRoomConnected = room.state == ConnectionState.Connected
 
@@ -97,6 +104,7 @@ export const ControlsButton = ({
           fullWidth
           onPress={handle}
           isDisabled={isDisabled}
+          ref={primaryActionRef}
         >
           {t('button.stop')}
         </Button>
@@ -162,6 +170,7 @@ export const ControlsButton = ({
         onPress={handle}
         isDisabled={isDisabled}
         size="compact"
+        ref={primaryActionRef}
       >
         {t('button.start')}
       </Button>
diff --git a/src/frontend/src/primitives/Button.tsx b/src/frontend/src/primitives/Button.tsx
index 9e9cd1a2..c411098b 100644
--- a/src/frontend/src/primitives/Button.tsx
+++ b/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>
+    )
+  }
+)