fix(a11y): switch names, contrast floors, and chart-toggle pressed state

- 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.
This commit is contained in:
Marc-André Bombeck committed 2026-07-08 23:51:22 +02:00
1 parent 9f4c7e48fe
commit 930fa81124
16 files changed
+21 -11

No files matched your search

+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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>
@@ -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)}
+1
View File
@@ -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={() => {
+1
View File
@@ -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)}