fix: react-doctor prefer-tag-over-role 18→0 (native dialog, label dropzones, ul lists)

src/components/route-trace/StickerPreviewModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import Image from "next/image";
 import { LotDetail } from "@/actions/route-trace/lots";
 
@@ -82,18 +82,65 @@ export default function StickerPreviewModal({ lot, onClose }: { lot: LotDetail;
   const previewH = LABEL_H * scale;
   const qrSize = stickerSize === "4x3" ? 130 : 110;
   const qrPreviewSize = qrSize * scale * 0.55; // scaled down for preview
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    dialogRef.current?.showModal();
+    return () => {
+      dialogRef.current?.close();
+    };
+  }, []);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleCancel = (e: Event) => {
+      e.preventDefault();
+      onClose();
+    };
+    dialog.addEventListener("cancel", handleCancel);
+    return () => dialog.removeEventListener("cancel", handleCancel);
+  }, [onClose]);
+
+  const handleBackdropClick = (e: React.MouseEvent) => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const rect = dialog.getBoundingClientRect();
+    if (
+      e.clientX < rect.left ||
+      e.clientX > rect.right ||
+      e.clientY < rect.top ||
+      e.clientY > rect.bottom
+    ) {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    function onPointerDown(e: PointerEvent) {
+      const dialog = dialogRef.current;
+      if (!dialog || !dialog.open) return;
+      const rect = dialog.getBoundingClientRect();
+      if (
+        e.clientX < rect.left ||
+        e.clientX > rect.right ||
+        e.clientY < rect.top ||
+        e.clientY > rect.bottom
+      ) {
+        onClose();
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [onClose]);
 
   return (
-    <div
-      role="dialog"
-      aria-modal="true"
+    <dialog
+      ref={dialogRef}
       aria-label="Print sticker"
-      tabIndex={-1}
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
-      onClick={onClose}
-      onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
+      className="bg-transparent backdrop:bg-black/40 p-4 border-0 max-w-none max-h-none"
     >
-      <div className="w-full max-w-lg rounded-2xl bg-white shadow-xl" onClick={(e) => e.stopPropagation()}>
+      <div className="w-full max-w-lg rounded-2xl bg-white shadow-xl mx-auto my-auto">
         <div className="flex items-center justify-between border-b border-stone-100 px-6 py-4">
           <div>
             <h3 className="text-base font-semibold text-stone-900 flex items-center gap-2">{Icons.printer("h-5 w-5")} Print Sticker</h3>
@@ -311,6 +358,6 @@ export default function StickerPreviewModal({ lot, onClose }: { lot: LotDetail;
           </button>
         </div>
       </div>
-    </div>
+    </dialog>
   );
 }