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