♿️(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 = ({
-  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'