From 7251cec05e596fcbce41265c63e5ec28e6810d0c Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Mon, 15 Jun 2026 16:47:04 -0700
Subject: [PATCH] fix: name map buy modal dialog

---
 frontend/src/components/modals/ConfirmBuyModal.jsx | 11 +++++++++--
 frontend/tests/location-map-manager.spec.ts        |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/modals/ConfirmBuyModal.jsx b/frontend/src/components/modals/ConfirmBuyModal.jsx
index a626b4a..60b3e44 100644
--- a/frontend/src/components/modals/ConfirmBuyModal.jsx
+++ b/frontend/src/components/modals/ConfirmBuyModal.jsx
@@ -20,6 +20,7 @@ export default function ConfirmBuyModal({
   const [quantity, setQuantity] = useState(item.quantity);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const maxQuantity = item.quantity;
+  const titleId = "confirm-buy-modal-title";
 
   useEffect(() => {
     setQuantity(item.quantity);
@@ -93,10 +94,16 @@ export default function ConfirmBuyModal({
         }
       }}
     >
-      <div className="confirm-buy-modal" onClick={(event) => event.stopPropagation()}>
+      <div
+        className="confirm-buy-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        onClick={(event) => event.stopPropagation()}
+      >
         <div className="confirm-buy-header">
           {item.zone && <div className="confirm-buy-zone">{item.zone}</div>}
-          <h2 className="confirm-buy-item-name">{item.item_name}</h2>
+          <h2 id={titleId} className="confirm-buy-item-name">{item.item_name}</h2>
         </div>
 
         <div className="confirm-buy-image-section">
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index e4a0637..d396d1a 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -3557,6 +3557,7 @@ test("viewer can buy selected zone items from the map", async ({ page }) => {
 
   await page.getByRole("button", { name: "Mark french bread bought" }).click();
   await expect(page.locator(".confirm-buy-modal")).toBeVisible();
+  await expect(page.getByRole("dialog", { name: "french bread" })).toBeVisible();
   await expect(page.locator(".confirm-buy-item-name")).toHaveText("french bread");
   await expect(page.getByRole("img", { name: "No item photo" })).toHaveText("\uD83D\uDCE6");
   const nextItemButton = page.getByRole("button", { name: "Next item" });