From 930fa8112450ee8b53fca9e7caa7db28b2324d3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Wed, 8 Jul 2026 23:51:22 +0200
Subject: [PATCH] fix(a11y): switch names, contrast floors, and chart-toggle
 pressed state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Admin SettingsToggle: name the Radix switch via aria-label so it no longer
  announces as a bare 'switch, on/off' (one shared component, six call sites).
- Replace the phantom text-destructive-foreground / text-warning-foreground
  utilities with the vetted destructive pattern (bg-destructive text-white
  dark:bg-destructive/60) and a readable foreground on the warning wash — no
  more dead classes riding on cascade order.
- Drop the sub-AA opacity tiers: lab sparkline + titration marker off
  muted/70, state icons (query-error, chart empty/error, med sort) off
  muted/60 to the full token so they clear the light-theme floor.
- Chart range toggles expose aria-pressed (lab, custom-metric, health, mood,
  compliance) so the active window is conveyed to assistive tech.
---
 src/components/admin/_shared.tsx                       | 5 +++++
 src/components/charts/chart-empty-state.tsx            | 2 +-
 src/components/charts/chart-error-state.tsx            | 2 +-
 src/components/charts/compliance-line-chart.tsx        | 1 +
 src/components/charts/health-chart.tsx                 | 1 +
 src/components/charts/mood-chart.tsx                   | 1 +
 src/components/custom-metrics/custom-metric-chart.tsx  | 1 +
 src/components/labs/lab-biomarker-chart.tsx            | 1 +
 src/components/labs/lab-trend-sparkline.tsx            | 2 +-
 src/components/medications/dose-history-ledger.tsx     | 2 +-
 src/components/medications/intake-history-editable.tsx | 4 ++--
 src/components/medications/medication-table.tsx        | 2 +-
 src/components/medications/titration-timeline.tsx      | 2 +-
 src/components/settings/integrations/withings-card.tsx | 2 +-
 src/components/settings/sharing-section.tsx            | 2 +-
 src/components/ui/query-error-card.tsx                 | 2 +-
 16 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/admin/_shared.tsx b/src/components/admin/_shared.tsx
index b9c8ff1aa..38d907201 100644
--- a/src/components/admin/_shared.tsx
+++ b/src/components/admin/_shared.tsx
@@ -192,6 +192,11 @@ export function SettingsToggle({
         </div>
       </div>
       <Switch
+        // The visible label is a sibling `<p>` with no association to the
+        // Radix switch button, so a screen reader would announce a bare
+        // "switch, on/off". Name it explicitly — one fix covers every admin
+        // toggle that mounts this shared component.
+        aria-label={label}
         checked={checked}
         onCheckedChange={onCheckedChange}
         disabled={disabled}
diff --git a/src/components/charts/chart-empty-state.tsx b/src/components/charts/chart-empty-state.tsx
index fe71164ad..790521df9 100644
--- a/src/components/charts/chart-empty-state.tsx
+++ b/src/components/charts/chart-empty-state.tsx
@@ -56,7 +56,7 @@ export function ChartEmptyState({
       style={height === undefined ? undefined : { height }}
     >
       <LineChartIcon
-        className="text-muted-foreground/60 h-8 w-8"
+        className="text-muted-foreground h-8 w-8"
         aria-hidden="true"
       />
       <p className="text-sm font-medium">{title}</p>
diff --git a/src/components/charts/chart-error-state.tsx b/src/components/charts/chart-error-state.tsx
index 293d93452..7a7c8bea3 100644
--- a/src/components/charts/chart-error-state.tsx
+++ b/src/components/charts/chart-error-state.tsx
@@ -73,7 +73,7 @@ export function ChartErrorState({
       style={height === undefined ? undefined : { height }}
     >
       <AlertTriangle
-        className="text-muted-foreground/60 h-8 w-8"
+        className="text-muted-foreground h-8 w-8"
         aria-hidden="true"
       />
       <p className="text-sm font-medium">{title}</p>
diff --git a/src/components/charts/compliance-line-chart.tsx b/src/components/charts/compliance-line-chart.tsx
index 9932c2c89..5a1fc8dbe 100644
--- a/src/components/charts/compliance-line-chart.tsx
+++ b/src/components/charts/compliance-line-chart.tsx
@@ -90,6 +90,7 @@ export function ComplianceLineChart({
             <Button
               key={r.label}
               variant={activeRangePoints === r.points ? "default" : "ghost"}
+              aria-pressed={activeRangePoints === r.points}
               size="sm"
               className="min-h-11 px-3 text-xs"
               onClick={() => setActiveRangePoints(r.points)}
diff --git a/src/components/charts/health-chart.tsx b/src/components/charts/health-chart.tsx
index a6541e8ac..ac0acb7b0 100644
--- a/src/components/charts/health-chart.tsx
+++ b/src/components/charts/health-chart.tsx
@@ -1666,6 +1666,7 @@ export function HealthChart({
               <Button
                 key={r.labelKey}
                 variant={rangePoints === r.points ? "default" : "ghost"}
+                aria-pressed={rangePoints === r.points}
                 size="sm"
                 className="min-h-11 px-2 text-xs sm:px-3"
                 onClick={() => {
diff --git a/src/components/charts/mood-chart.tsx b/src/components/charts/mood-chart.tsx
index cfaac77ae..7e7d8fcc2 100644
--- a/src/components/charts/mood-chart.tsx
+++ b/src/components/charts/mood-chart.tsx
@@ -1050,6 +1050,7 @@ export function MoodChart({
               <Button
                 key={r.labelKey}
                 variant={rangePoints === r.points ? "default" : "ghost"}
+                aria-pressed={rangePoints === r.points}
                 size="sm"
                 className="min-h-11 px-2 text-xs sm:px-3"
                 onClick={() => setRangePoints(r.points)}
diff --git a/src/components/custom-metrics/custom-metric-chart.tsx b/src/components/custom-metrics/custom-metric-chart.tsx
index f669b3fb6..9e98a35ff 100644
--- a/src/components/custom-metrics/custom-metric-chart.tsx
+++ b/src/components/custom-metrics/custom-metric-chart.tsx
@@ -106,6 +106,7 @@ export function CustomMetricChart({
             key={r.key}
             size="sm"
             variant={range === r.key ? "secondary" : "ghost"}
+            aria-pressed={range === r.key}
             className="h-7 px-2 text-xs"
             onClick={() => setRange(r.key)}
           >
diff --git a/src/components/labs/lab-biomarker-chart.tsx b/src/components/labs/lab-biomarker-chart.tsx
index 9ac10a989..1a7cae6d1 100644
--- a/src/components/labs/lab-biomarker-chart.tsx
+++ b/src/components/labs/lab-biomarker-chart.tsx
@@ -115,6 +115,7 @@ export function LabBiomarkerChart({
             key={r.key}
             size="sm"
             variant={range === r.key ? "secondary" : "ghost"}
+            aria-pressed={range === r.key}
             className="h-7 px-2 text-xs"
             onClick={() => setRange(r.key)}
           >
diff --git a/src/components/labs/lab-trend-sparkline.tsx b/src/components/labs/lab-trend-sparkline.tsx
index 1395e1dc9..4633dc400 100644
--- a/src/components/labs/lab-trend-sparkline.tsx
+++ b/src/components/labs/lab-trend-sparkline.tsx
@@ -54,7 +54,7 @@ export function LabTrendSparkline({
       width={width}
       height={height}
       viewBox={`0 0 ${width} ${height}`}
-      className="text-muted-foreground/70 overflow-visible"
+      className="text-muted-foreground overflow-visible"
       aria-hidden
       role="presentation"
     >
diff --git a/src/components/medications/dose-history-ledger.tsx b/src/components/medications/dose-history-ledger.tsx
index 09e95806b..8abc25879 100644
--- a/src/components/medications/dose-history-ledger.tsx
+++ b/src/components/medications/dose-history-ledger.tsx
@@ -927,7 +927,7 @@ function DeleteRowConfirm({
               e.preventDefault();
               onConfirm();
             }}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            className="bg-destructive dark:bg-destructive/60 text-white hover:bg-destructive/90"
           >
             {t("medications.detail.intake.deleteRow.confirmAction")}
           </AlertDialogAction>
diff --git a/src/components/medications/intake-history-editable.tsx b/src/components/medications/intake-history-editable.tsx
index 0e162e955..f0f88ad6b 100644
--- a/src/components/medications/intake-history-editable.tsx
+++ b/src/components/medications/intake-history-editable.tsx
@@ -228,7 +228,7 @@ export function IntakeHistoryEditable({
               }}
               disabled={bulkBusy}
               aria-busy={bulkBusy || undefined}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className="bg-destructive dark:bg-destructive/60 text-white hover:bg-destructive/90"
             >
               {t("medications.detail.intake.bulkDelete.confirmAction")}
             </AlertDialogAction>
@@ -262,7 +262,7 @@ export function IntakeHistoryEditable({
               }}
               disabled={rowDeleteBusy}
               aria-busy={rowDeleteBusy || undefined}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              className="bg-destructive dark:bg-destructive/60 text-white hover:bg-destructive/90"
             >
               {t("medications.detail.intake.deleteRow.confirmAction")}
             </AlertDialogAction>
diff --git a/src/components/medications/medication-table.tsx b/src/components/medications/medication-table.tsx
index 646255b41..73e9553f9 100644
--- a/src/components/medications/medication-table.tsx
+++ b/src/components/medications/medication-table.tsx
@@ -327,7 +327,7 @@ export function MedicationTable({
                       )
                     ) : (
                       <ChevronsUpDown
-                        className="text-muted-foreground/60 size-3.5"
+                        className="text-muted-foreground size-3.5"
                         aria-hidden="true"
                       />
                     )}
diff --git a/src/components/medications/titration-timeline.tsx b/src/components/medications/titration-timeline.tsx
index 9aac97a20..3fafd3024 100644
--- a/src/components/medications/titration-timeline.tsx
+++ b/src/components/medications/titration-timeline.tsx
@@ -183,7 +183,7 @@ export function TitrationTimeline({
                         ? "border-primary bg-primary/15 text-primary"
                         : step.isPast
                           ? "border-border bg-muted text-muted-foreground"
-                          : "border-border/60 text-muted-foreground/70 border-dashed",
+                          : "border-border text-muted-foreground border-dashed",
                     )}
                     aria-hidden="true"
                   >
diff --git a/src/components/settings/integrations/withings-card.tsx b/src/components/settings/integrations/withings-card.tsx
index d05f96008..cf4c8d704 100644
--- a/src/components/settings/integrations/withings-card.tsx
+++ b/src/components/settings/integrations/withings-card.tsx
@@ -228,7 +228,7 @@ export function WithingsCard({
           <a
             href="/api/withings/connect"
             data-testid="withings-reconnect-banner"
-            className="border-warning/30 bg-warning/10 text-warning-foreground hover:bg-warning/20 block rounded-md border px-3 py-2 text-sm transition-colors"
+            className="border-warning/30 bg-warning/10 text-foreground hover:bg-warning/20 block rounded-md border px-3 py-2 text-sm transition-colors"
           >
             <span className="font-medium">
               {t("settings.integrations.withings.reconnect.banner.title")}
diff --git a/src/components/settings/sharing-section.tsx b/src/components/settings/sharing-section.tsx
index 80efc0cd8..44528fd06 100644
--- a/src/components/settings/sharing-section.tsx
+++ b/src/components/settings/sharing-section.tsx
@@ -204,7 +204,7 @@ function ShareLinksCard() {
                         {t("common.cancel")}
                       </AlertDialogCancel>
                       <AlertDialogAction
-                        className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                        className="bg-destructive dark:bg-destructive/60 text-white hover:bg-destructive/90"
                         onClick={() => revokeMutation.mutate(link.id)}
                       >
                         {t("settings.sharing.revoke")}
diff --git a/src/components/ui/query-error-card.tsx b/src/components/ui/query-error-card.tsx
index 98edbd8a3..facb42628 100644
--- a/src/components/ui/query-error-card.tsx
+++ b/src/components/ui/query-error-card.tsx
@@ -40,7 +40,7 @@ export function QueryErrorCard({
         className="flex flex-col items-center justify-center gap-3 px-6 py-10 text-center"
       >
         <AlertTriangle
-          className="text-muted-foreground/60 h-8 w-8"
+          className="text-muted-foreground h-8 w-8"
           aria-hidden="true"
         />
         <p className="text-sm font-medium">{title ?? t("common.loadFailed")}</p>