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

src/app/cart/CartClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import Link from "next/link";
 import { useCart } from "@/context/CartContext";
 import StorefrontHeader from "@/components/storefront/StorefrontHeader";
@@ -88,6 +88,23 @@ export default function CartClient() {
     window.location.href = "/checkout";
   }, [cart.length, stopBrandMismatch, hasStopPickupItems, selectedStop, incompatibleItems, setSelectedStop, handleOpenStopPicker]);
 
+  const stopPickerDialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    if (!showStopPicker) return;
+    const dialog = stopPickerDialogRef.current;
+    if (!dialog) return;
+    if (!dialog.open) dialog.showModal();
+    const onCancel = (e: Event) => {
+      e.preventDefault();
+      setShowStopPicker(false);
+    };
+    dialog.addEventListener("cancel", onCancel);
+    return () => {
+      dialog.removeEventListener("cancel", onCancel);
+    };
+  }, [showStopPicker]);
+
   return (
     <div className="min-h-screen relative">
       {/* Background */}
@@ -208,11 +225,10 @@ export default function CartClient() {
 
             {/* Stop picker modal */}
             {showStopPicker && (
-              <div 
-                className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 pointer-events-none" 
-                role="dialog" 
-                aria-modal="true" 
+              <dialog
+                ref={stopPickerDialogRef}
                 aria-labelledby="stop-picker-title"
+                className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
               >
                 <div className="w-full max-w-sm rounded-2xl glass-strong p-6 shadow-2xl pointer-events-auto border border-white/10">
                   <h3 id="stop-picker-title" className="text-xl font-semibold text-white">Choose Pickup Stop</h3>
@@ -245,7 +261,7 @@ export default function CartClient() {
                     Cancel
                   </button>
                 </div>
-              </div>
+              </dialog>
             )}
 
             {/* Cart items */}