From e3a689954b1fbecddb17c04ddb8432f3c923fc03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 9 May 2026 17:22:08 +0200
Subject: [PATCH] fix(ui): disambiguate dashboard quick-add menu items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase-3 e2e suite documented an i18n collision: the dashboard's
quick-entry dropdown trigger says "Add" and both menu items underneath
also rendered the bare verb "Add" because `measurements.addMeasurement`
and `mood.addEntry` both translate to "Add". Screen-reader users heard
two indistinguishable rows; the e2e spec was forced to use
`getByRole("menuitem").first()` as a workaround.

The dropdown trigger already says "Add" — the menu items label what's
being added.

  - Add `dashboard.quickAddMeasurement` ("Measurement" / "Messung")
  - Add `dashboard.quickAddMood` ("Mood entry" / "Stimmungseintrag")
  - Wire the two `<DropdownMenuItem>`s on `/`
  - Mark the leading icons `aria-hidden` so the accessible name is
    just the noun
  - Update `e2e/measurement-flow.spec.ts` to target the menu item by
    name (`/measurement|messung/i`) instead of `.first()`

Dialog titles still use the existing `addMeasurement` / `addEntry`
keys — those work in the larger dialog context where "Add" reads fine.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 e2e/measurement-flow.spec.ts | 14 ++++++--------
 messages/de.json             |  2 ++
 messages/en.json             |  2 ++
 src/app/page.tsx             | 12 ++++++++----
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/e2e/measurement-flow.spec.ts b/e2e/measurement-flow.spec.ts
index 12493d915..1d42626e0 100644
--- a/e2e/measurement-flow.spec.ts
+++ b/e2e/measurement-flow.spec.ts
@@ -101,14 +101,12 @@ test.describe("add measurement flow", () => {
       .first()
       .click();
 
-    // The Radix DropdownMenu mounts its content in a portal; the role
-    // is `menuitem`. Both items currently render the literal "Add" in
-    // EN (measurements.addMeasurement = "Add", mood.addEntry = "Add"),
-    // so we disambiguate by hitting the FIRST one — that's the
-    // measurement entry per the dashboard JSX order. Sub-optimal, but
-    // robust against the i18n collision we don't want to fix in this
-    // phase (would touch dashboard copy).
-    await page.getByRole("menuitem").first().click();
+    // v1.5 phase-5: the menu items now have distinct labels — the
+    // measurement entry says "Measurement" / "Messung" instead of "Add",
+    // so we can target it directly.
+    await page
+      .getByRole("menuitem", { name: /measurement|messung/i })
+      .click();
 
     // Form should be visible inside the dialog. Switch type to WEIGHT
     // (combo-box defaults to BLOOD_PRESSURE).
diff --git a/messages/de.json b/messages/de.json
index faa6af6bf..d5027e0b7 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -216,6 +216,8 @@
     "trendDown": "fallend",
     "trendStable": "stabil",
     "quickEntry": "Schnelleingabe",
+    "quickAddMeasurement": "Messung",
+    "quickAddMood": "Stimmungseintrag",
     "addMeasurement": "Messwert hinzufügen",
     "compliance7d": "Einnahmetreue (7 Tage)",
     "complianceGood": "Gut",
diff --git a/messages/en.json b/messages/en.json
index f542a39f2..76c44a975 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -216,6 +216,8 @@
     "trendDown": "falling",
     "trendStable": "stable",
     "quickEntry": "Quick entry",
+    "quickAddMeasurement": "Measurement",
+    "quickAddMood": "Mood entry",
     "addMeasurement": "Add measurement",
     "compliance7d": "Compliance (7 days)",
     "complianceGood": "Good",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f5c530f22..101f56196 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -373,15 +373,19 @@ export default function DashboardPage() {
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
+            {/* v1.5 phase-5: the menu items used to share the literal label
+                "Add" with the dialog titles, so screen-reader users heard
+                two indistinguishable "Add" rows in the same dropdown. The
+                trigger already says "Add" — these label what's being added. */}
             <DropdownMenuItem
               onClick={() => setQuickEntryDialog("measurement")}
             >
-              <Activity className="mr-2 h-4 w-4" />
-              {t("measurements.addMeasurement")}
+              <Activity className="mr-2 h-4 w-4" aria-hidden="true" />
+              {t("dashboard.quickAddMeasurement")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={() => setQuickEntryDialog("mood")}>
-              <Waves className="mr-2 h-4 w-4" />
-              {t("mood.addEntry")}
+              <Waves className="mr-2 h-4 w-4" aria-hidden="true" />
+              {t("dashboard.quickAddMood")}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>