From bbc7fa8012c74bae4a3b1ffa054d0cfa55e9497f Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 17 Dec 2025 09:28:11 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20focus=20first=20?=
 =?UTF-8?q?background=20effect=20button=20on=20panel=20open?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

improves keyboard navigation by placing focus on first actionable element
---
 src/frontend/src/primitives/ToggleButton.tsx | 43 ++++++++++----------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/primitives/ToggleButton.tsx b/src/frontend/src/primitives/ToggleButton.tsx
index ab844acb..8ce14e9e 100644
--- a/src/frontend/src/primitives/ToggleButton.tsx
+++ b/src/frontend/src/primitives/ToggleButton.tsx
@@ -1,10 +1,10 @@
+import { forwardRef, ReactNode } from 'react'
 import {
   ToggleButton as RACToggleButton,
   ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { type ButtonRecipeProps, buttonRecipe } from './buttonRecipe'
 import { TooltipWrapper, TooltipWrapperProps } from './TooltipWrapper'
-import { ReactNode } from 'react'
 
 export type ToggleButtonProps = RACToggleButtonProps &
   ButtonRecipeProps &
@@ -16,24 +16,25 @@ export type ToggleButtonProps = RACToggleButtonProps &
 /**
  * React aria ToggleButton with our button styles, that can take a tooltip if needed
  */
-export const ToggleButton = ({
-  tooltip,
-  tooltipType,
-  ...props
-}: ToggleButtonProps) => {
-  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
+  ({ tooltip, tooltipType, ...props }, ref) => {
+    const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
 
-  return (
-    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <RACToggleButton
-        {...componentProps}
-        className={[buttonRecipe(variantProps), props.className].join(' ')}
-      >
-        <>
-          {componentProps.children as ReactNode}
-          {props.description && <span>{tooltip}</span>}
-        </>
-      </RACToggleButton>
-    </TooltipWrapper>
-  )
-}
+    return (
+      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+        <RACToggleButton
+          ref={ref}
+          {...componentProps}
+          className={[buttonRecipe(variantProps), props.className].join(' ')}
+        >
+          <>
+            {componentProps.children as ReactNode}
+            {props.description && <span>{tooltip}</span>}
+          </>
+        </RACToggleButton>
+      </TooltipWrapper>
+    )
+  }
+)
+
+ToggleButton.displayName = 'ToggleButton'