♿️(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,16 +16,14 @@ 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,
-  ...props
-}: ToggleButtonProps) => {
     const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
 
     return (
       <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
         <RACToggleButton
+          ref={ref}
           {...componentProps}
           className={[buttonRecipe(variantProps), props.className].join(' ')}
         >
@@ -37,3 +35,6 @@ export const ToggleButton = ({
       </TooltipWrapper>
     )
   }
+)
+
+ToggleButton.displayName = 'ToggleButton'