From c3451a4c06e64bbf869e4e37075c33db9392e148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Sun, 10 May 2026 03:01:45 +0200 Subject: [PATCH] fix(a11y): 44px tap targets + focus-visible on rec-feedback, chart range tabs, export switch (H1/H2/H6/H7) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit WCAG 2.5.5 minimum hit-area is 44×44 CSS px and the Wave-C polish set that as the project floor. Several v1.4.16 surfaces missed it: - Recommendation thumbs (h-7 = 28 px) — `` up + down both bumped to `min-h-11 min-w-11` with focus-visible ring. - Recommendation chevron expand toggle (~24 px, no focus state) — `` rec-expand-toggle bumped to `min-h-11 min-w-11` with focus-visible ring. - Chart range tabs (7d/30d/90d/All) — `min-h-9 px-2.5` ≈ 36×28 px on Pixel 5; bumped to `min-h-11 px-3` across HealthChart, MoodChart, MedicationComplianceChart, ComplianceCharts, ComplianceLineChart. - Medication CSV "include intake history" raw `` (16×16, system-blue on iOS Safari) — replaced with shadcn `` inside a `min-h-11` label so the row is properly tappable and visually consistent with every other settings toggle. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/charts/compliance-charts.tsx | 6 +++--- src/components/charts/compliance-line-chart.tsx | 2 +- src/components/charts/health-chart.tsx | 2 +- .../charts/medication-compliance-chart.tsx | 2 +- src/components/charts/mood-chart.tsx | 2 +- src/components/insights/recommendation-card.tsx | 2 +- src/components/insights/recommendation-feedback.tsx | 4 ++-- src/components/settings/export-section.tsx | 13 ++++++++----- 8 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/components/charts/compliance-charts.tsx b/src/components/charts/compliance-charts.tsx index 9f7255afa..2af43b6bb 100644 --- a/src/components/charts/compliance-charts.tsx +++ b/src/components/charts/compliance-charts.tsx @@ -103,7 +103,7 @@ export function ComplianceCharts({ medications }: ComplianceChartsProps) { type="button" variant={rangePoints === 30 ? "default" : "ghost"} size="sm" - className="min-h-9 px-2.5 text-xs" + className="min-h-11 px-3 text-xs" onClick={() => setRangePoints(30)} title={t("charts.points30Title")} > @@ -113,7 +113,7 @@ export function ComplianceCharts({ medications }: ComplianceChartsProps) { type="button" variant={rangePoints === 90 ? "default" : "ghost"} size="sm" - className="min-h-9 px-2.5 text-xs" + className="min-h-11 px-3 text-xs" onClick={() => setRangePoints(90)} title={t("charts.points90Title")} > @@ -123,7 +123,7 @@ export function ComplianceCharts({ medications }: ComplianceChartsProps) { type="button" variant={rangePoints === 0 ? "default" : "ghost"} size="sm" - className="min-h-9 px-2.5 text-xs" + className="min-h-11 px-3 text-xs" onClick={() => setRangePoints(0)} title={t("charts.pointsAllTitle")} > diff --git a/src/components/charts/compliance-line-chart.tsx b/src/components/charts/compliance-line-chart.tsx index e9863de84..e1c6ff500 100644 --- a/src/components/charts/compliance-line-chart.tsx +++ b/src/components/charts/compliance-line-chart.tsx @@ -73,7 +73,7 @@ export function ComplianceLineChart({ key={r.label} variant={activeRangePoints === r.points ? "default" : "ghost"} size="sm" - className="min-h-9 px-2.5 text-xs" + className="min-h-11 px-3 text-xs" onClick={() => setActiveRangePoints(r.points)} title={r.title} > diff --git a/src/components/charts/health-chart.tsx b/src/components/charts/health-chart.tsx index 2e57c021e..dfbb5229c 100644 --- a/src/components/charts/health-chart.tsx +++ b/src/components/charts/health-chart.tsx @@ -879,7 +879,7 @@ export function HealthChart({ key={r.labelKey} variant={rangePoints === r.points ? "default" : "ghost"} size="sm" - className="min-h-9 px-2.5 text-xs" + className="min-h-11 px-3 text-xs" onClick={() => setRangePoints(r.points)} title={t(r.titleKey)} data-slot="chart-range-tab" diff --git a/src/components/charts/medication-compliance-chart.tsx b/src/components/charts/medication-compliance-chart.tsx index 4aa48f8f2..6e89e742f 100644 --- a/src/components/charts/medication-compliance-chart.tsx +++ b/src/components/charts/medication-compliance-chart.tsx @@ -257,7 +257,7 @@ export function MedicationComplianceChart({ key={r} variant={days === r ? "default" : "ghost"} size="sm" - className="min-h-9 px-2.5 text-xs" + className="min-h-11 px-3 text-xs" onClick={() => setDays(r)} > {r}T diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx index 292f03165..f04e69fdd 100644 --- a/src/components/charts/mood-chart.tsx +++ b/src/components/charts/mood-chart.tsx @@ -550,7 +550,7 @@ export function MoodChart({ key={r.labelKey} variant={rangePoints === r.points ? "default" : "ghost"} size="sm" - className="min-h-9 px-2.5 text-xs" + className="min-h-11 px-3 text-xs" onClick={() => setRangePoints(r.points)} title={t(r.titleKey)} data-slot="chart-range-tab" diff --git a/src/components/insights/recommendation-card.tsx b/src/components/insights/recommendation-card.tsx index b63aaa042..373bf4810 100644 --- a/src/components/insights/recommendation-card.tsx +++ b/src/components/insights/recommendation-card.tsx @@ -369,7 +369,7 @@ export function RecommendationCard({ type="button" onClick={() => setExpanded((v) => !v)} aria-expanded={expanded} - className="text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors" + className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 inline-flex min-h-11 min-w-11 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none" title={ expanded ? t("insights.recommendation.rationaleCollapse") diff --git a/src/components/insights/recommendation-feedback.tsx b/src/components/insights/recommendation-feedback.tsx index 438eedeb4..4a827c5e5 100644 --- a/src/components/insights/recommendation-feedback.tsx +++ b/src/components/insights/recommendation-feedback.tsx @@ -265,7 +265,7 @@ export function RecommendationFeedback({ title={t("insights.recommendation.feedbackHelpful")} disabled={disabled} onClick={() => submit(true)} - className="text-muted-foreground hover:text-dracula-green disabled:hover:text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-60" + className="text-muted-foreground hover:text-dracula-green disabled:hover:text-muted-foreground focus-visible:ring-ring/50 inline-flex min-h-11 min-w-11 items-center justify-center rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:opacity-60" > {submittingUp ? (