fix: react-doctor dialog/a11y/labels → 68/100 with 973 warnings

src/components/admin/CommandPalette.tsx

@@ -190,28 +190,24 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
   const [query, setQuery] = useState("");
   const [selected, setSelected] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const router = useRouter();
 
-  // Lock body scroll while open; focus the input on next frame.
+  // Native <dialog> handles focus trapping, ESC, and the backdrop.
   useEffect(() => {
-    document.body.style.overflow = "hidden";
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (!dialog.open) dialog.showModal();
     const raf = requestAnimationFrame(() => inputRef.current?.focus());
+    const onCancel = (e: Event) => {
+      e.preventDefault();
+      onClose();
+    };
+    dialog.addEventListener("cancel", onCancel);
     return () => {
       cancelAnimationFrame(raf);
-      document.body.style.overflow = "";
+      dialog.removeEventListener("cancel", onCancel);
     };
-  }, []);
-
-  // Global Escape while open (covers the case where focus is not on input).
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-      }
-    }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
   }, [onClose]);
 
   // Filtering
@@ -248,24 +244,12 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
   };
 
   return (
-    <div
-      role="dialog"
-      aria-modal="true"
+    <dialog
+      ref={dialogRef}
       aria-label="Command palette"
-      tabIndex={-1}
-      onClick={onClose}
-      onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
+      className="m-0 p-0 w-full h-full max-w-none max-h-full bg-transparent"
       style={{
-        position: "fixed",
-        inset: 0,
-        zIndex: 60,
-        backgroundColor: "rgba(26, 24, 20, 0.4)",
-        backdropFilter: "blur(4px)",
-        WebkitBackdropFilter: "blur(4px)",
-        display: "flex",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        paddingTop: "15vh",
+        backgroundColor: "transparent",
         animation: "cp-fade-in 180ms ease-out",
       }}
     >
@@ -285,11 +269,24 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
       `}</style>
 
       <div
-        onClick={(e) => e.stopPropagation()}
         style={{
-          width: "100%",
-          maxWidth: "36rem",
-          margin: "0 1rem",
+          position: "fixed",
+          inset: 0,
+          zIndex: 60,
+          backgroundColor: "rgba(26, 24, 20, 0.4)",
+          backdropFilter: "blur(4px)",
+          WebkitBackdropFilter: "blur(4px)",
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          paddingTop: "15vh",
+        }}
+      >
+        <div
+          style={{
+            width: "100%",
+            maxWidth: "36rem",
+            margin: "0 1rem",
           backgroundColor: "var(--admin-card-bg)",
           border: "1px solid var(--admin-border)",
           borderRadius: "var(--admin-radius-lg)",
@@ -458,6 +455,7 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
           ↑↓ to navigate &nbsp;·&nbsp; ↵ to select &nbsp;·&nbsp; esc to close
         </div>
       </div>
-    </div>
+      </div>
+    </dialog>
   );
 }