Add responsive game filters and hybrid toolbox drawer

website/src/components/CompactDropdown.jsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 export function CompactDropdown({
   className = "",
   menuClassName = "",
+  menuProps = {},
   label,
   openOnHover = false,
   closeOnMouseLeave = false,
@@ -13,6 +14,7 @@ export function CompactDropdown({
 }) {
   const [open, setOpen] = useState(false);
   const rootRef = useRef(null);
+  const triggerRef = useRef(null);
   const internalPointerDownRef = useRef(false);
 
   useEffect(() => {
@@ -23,7 +25,10 @@ export function CompactDropdown({
     }
 
     function handleKeyDown(event) {
-      if (event.key === "Escape") setOpen(false);
+      if (event.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
     }
 
     document.addEventListener("pointerdown", handlePointerDown);
@@ -60,11 +65,10 @@ export function CompactDropdown({
         if (!event.currentTarget.contains(event.relatedTarget)) close();
       }}
       onMouseDown={preventMouseDown ? (event) => event.preventDefault() : undefined}
-      aria-label={label}
     >
-      {renderTrigger({ open, toggle, close })}
+      {renderTrigger({ open, toggle, close, triggerRef })}
       {open && (
-        <div className={`${menuClassName} is-open`.trim()} aria-label={label}>
+        <div {...menuProps} className={`${menuClassName} ${menuProps.className || ""} is-open`.trim()} aria-label={menuProps["aria-label"] || (menuProps["aria-labelledby"] ? undefined : label)}>
           {children({ close })}
         </div>
       )}