Refactor Badge and ExpandablePanel components for improved accessibility and performance

Author: fgatti675

packages/ui/src/components/Badge.tsx

@@ -23,13 +23,13 @@ const getColor = (color: BadgeColor) => {
     }
 }
 
-export const Badge: React.FC<BadgeProps> = ({
-                                                color = "primary",
-                                                invisible = false,
-                                                children
-                                            }) => {
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({
+                                                                     color = "primary",
+                                                                     invisible = false,
+                                                                     children
+                                                                 }, ref) => {
     return (
-        <div className="relative inline-block w-fit">
+        <div ref={ref} className="relative inline-block w-fit">
             {children}
             <span
                 className={`absolute top-0.5 right-0.5 transform translate-x-1/2 -translate-y-1/2 rounded-full
@@ -39,4 +39,6 @@ export const Badge: React.FC<BadgeProps> = ({
             />
         </div>
     );
-}
+});
+
+Badge.displayName = "Badge";

packages/ui/src/components/ExpandablePanel.tsx

@@ -91,20 +91,25 @@ export function ExpandablePanel({
                     setOpen(updatedOpen);
                 }}>
 
-                <Collapsible.Trigger
-                    className={cls(
-                        "rounded-t flex items-center justify-between w-full min-h-[52px]",
-                        "hover:bg-surface-accent-200 hover:bg-opacity-40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40",
-                        invisible ? "border-b px-2" : "p-4",
-                        open ? "py-6" : "py-4",
-                        "transition-all duration-200",
-                        invisible && defaultBorderMixin,
-                        asField && fieldBackgroundMixin,
-                        titleClassName
-                    )}
-                >
-                    {title}
-                    <KeyboardArrowDownIcon className={cls("transition", open ? "rotate-180" : "")}/>
+                <Collapsible.Trigger asChild>
+                    <div
+                        className={cls(
+                            "rounded-t flex items-center justify-between w-full min-h-[52px]",
+                            "hover:bg-surface-accent-200 hover:bg-opacity-40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40",
+                            invisible ? "border-b px-2" : "p-4",
+                            open ? "py-6" : "py-4",
+                            "transition-all duration-200",
+                            invisible && defaultBorderMixin,
+                            asField && fieldBackgroundMixin,
+                            titleClassName,
+                            "cursor-pointer"
+                        )}
+                        role="button"
+                        tabIndex={0}
+                    >
+                        {title}
+                        <KeyboardArrowDownIcon className={cls("transition", open ? "rotate-180" : "")}/>
+                    </div>
                 </Collapsible.Trigger>
 
                 <Collapsible.Content