From 7036ff3e0c199f5305e122b337940298eb40486b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 4 Jun 2026 04:08:36 +0200
Subject: [PATCH] fix(insights): make the narrative period toggle accessible

Replace the incomplete tablist/tab markup on the week/month toggle with
plain buttons carrying aria-pressed, give them a 44px minimum tap target,
and add a focus-visible ring. The visual treatment is unchanged.
---
 .../insights/period-narrative-card.tsx        | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/insights/period-narrative-card.tsx b/src/components/insights/period-narrative-card.tsx
index 933dba69d..ea4ac0a11 100644
--- a/src/components/insights/period-narrative-card.tsx
+++ b/src/components/insights/period-narrative-card.tsx
@@ -163,26 +163,28 @@ export function PeriodNarrativeCard({
       </div>
 
       {/* Week / month toggle. Calm segmented control, no chart. */}
-      <div className="flex gap-1 self-start" role="tablist">
-        {(["week", "month"] as const).map((p) => (
-          <button
-            key={p}
-            type="button"
-            role="tab"
-            aria-selected={period === p}
-            onClick={() => setPeriod(p)}
-            className={cn(
-              "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-              period === p
-                ? "bg-muted text-foreground"
-                : "text-muted-foreground hover:text-foreground",
-            )}
-          >
-            {p === "week"
-              ? t("insights.narrativeWeek")
-              : t("insights.narrativeMonth")}
-          </button>
-        ))}
+      <div className="flex gap-1 self-start">
+        {(["week", "month"] as const).map((p) => {
+          const active = period === p;
+          return (
+            <button
+              key={p}
+              type="button"
+              aria-pressed={active}
+              onClick={() => setPeriod(p)}
+              className={cn(
+                "focus-visible:ring-ring inline-flex min-h-11 items-center rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none",
+                active
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {p === "week"
+                ? t("insights.narrativeWeek")
+                : t("insights.narrativeMonth")}
+            </button>
+          );
+        })}
       </div>
 
       {preparing ? (