✨(frontend) focus transcript and record buttons on open

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

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

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
 

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>

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,17 +17,15 @@ export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
     icon?: ReactNode
   }
 
-export const Button = ({
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  tooltip,
+  ({ tooltip, tooltipType = 'instant', ...props }, ref) => {
-  tooltipType = 'instant',
-  ...props
-}: ButtonProps) => {
     const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
     const { className, ...remainingComponentProps } = componentProps
 
     return (
       <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
         <RACButton
+          ref={ref}
           className={[buttonRecipe(variantProps), className].join(' ')}
           {...(remainingComponentProps as RACButtonsProps)}
         >
@@ -39,3 +37,4 @@ export const Button = ({
       </TooltipWrapper>
     )
   }
+)