♿️(frontend) focus first background effect button on panel open

improves keyboard navigation by placing focus on first actionable element

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 = ({
+export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
-  tooltip,
+  ({ tooltip, tooltipType, ...props }, ref) => {
-  tooltipType,
+    const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
-  ...props
-}: ToggleButtonProps) => {
-  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
 
-  return (
+    return (
-    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
-      <RACToggleButton
+        <RACToggleButton
-        {...componentProps}
+          ref={ref}
-        className={[buttonRecipe(variantProps), props.className].join(' ')}
+          {...componentProps}
-      >
+          className={[buttonRecipe(variantProps), props.className].join(' ')}
-        <>
+        >
-          {componentProps.children as ReactNode}
+          <>
-          {props.description && <span>{tooltip}</span>}
+            {componentProps.children as ReactNode}
-        </>
+            {props.description && <span>{tooltip}</span>}
-      </RACToggleButton>
+          </>
-    </TooltipWrapper>
+        </RACToggleButton>
-  )
+      </TooltipWrapper>
-}
+    )
+  }
+)
+
+ToggleButton.displayName = 'ToggleButton'