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

src/components/route-trace/FsmaReportModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { formatDate } from "@/lib/format-date";
 
 // One-color outline icons
@@ -234,6 +234,23 @@ export default function FsmaReportModal({ brandId }: { brandId: string }) {
     setOpen(false);
   }
 
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (!dialog.open) dialog.showModal();
+    const onCancel = (e: Event) => {
+      e.preventDefault();
+      setOpen(false);
+    };
+    dialog.addEventListener("cancel", onCancel);
+    return () => {
+      dialog.removeEventListener("cancel", onCancel);
+    };
+  }, [open]);
+
   const filteredLots = data?.lots.filter((lot) => {
     const matchesSearch =
       !search ||
@@ -255,26 +272,26 @@ export default function FsmaReportModal({ brandId }: { brandId: string }) {
       </button>
 
       {open && (
-        <div
-          role="dialog"
-          aria-modal="true"
+        <dialog
+          ref={dialogRef}
           aria-label="FSMA report"
-          tabIndex={-1}
-          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/30"
-          onClick={(e) => e.target === e.currentTarget && setOpen(false)}
-          onKeyDown={(e) => { if (e.key === "Escape") setOpen(false); }}
-          style={{ backdropFilter: "blur(4px)" }}
+          className="m-0 p-0 max-w-none max-h-none w-full h-full bg-transparent"
+          style={{ backgroundColor: "transparent" }}
         >
           <div
-            className="absolute inset-0"
-            style={{
-              background: "linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%)",
-              backdropFilter: "blur(60px) saturate(180%)",
-            }}
-          />
+            className="fixed inset-0 z-50 flex items-center justify-center p-4"
+            style={{ backdropFilter: "blur(4px)" }}
+          >
+            <div
+              className="absolute inset-0"
+              style={{
+                background: "linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%)",
+                backdropFilter: "blur(60px) saturate(180%)",
+              }}
+            />
 
-          {/* Modal card */}
-          <div
+            {/* Modal card */}
+            <div
             className="relative w-full max-w-5xl rounded-2xl max-h-[90vh] flex flex-col"
             style={{
               background: "rgba(255, 255, 255, 0.92)",
@@ -612,7 +629,8 @@ export default function FsmaReportModal({ brandId }: { brandId: string }) {
               </div>
             </div>
           </div>
-        </div>
+          </div>
+        </dialog>
       )}
     </>
   );