tom/HealthLog
1
0 Fork 0
mirror of https://github.com/MBombeck/HealthLog.git synced 2026-11-09 13:01:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

a11y(medications): pair window-status colour with a Lucide glyph

Browse Source 
Add CircleCheck / AlertCircle / AlertTriangle icons next to the
take-now / overdue / very-overdue pill on both the generic medication
card and the GLP-1 card so colour-blind users can disambiguate the
three states without relying on the red-green hue. WCAG 1.4.1 (Use of
Color). Symmetry kept across both surfaces.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.7 committed 2026-05-17 17:17:24 +02:00
1 parent eba7d6aa73
commit 31895fcea9
2 files changed
+44 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/medications/glp1-medication-card.tsx
+22 -4
View File
@@ -4,7 +4,10 @@ import { useEffect, useReducer, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import Link from "next/link";
import {
AlertCircle,
AlertTriangle,
Check,
CircleCheck,
Flame,
History,
Loader2,
@@ -395,13 +398,28 @@ export function Glp1MedicationCard({
<p className="text-sm">
<span
className={
currentWindowStatus.status === "in_window"
? "text-success font-medium"
"inline-flex items-center gap-1 font-medium " +
(currentWindowStatus.status === "in_window"
? "text-success"
: currentWindowStatus.status === "late"
? "text-dracula-yellow font-medium"
: "text-warning font-medium"
? "text-dracula-yellow"
: "text-warning")
}
>
{/* v1.4.38 W-D P2-3 — pair the colour with a Lucide
glyph so colour-blind users (red-green) can
disambiguate take-now from late from very-late.
WCAG 1.4.1 (Use of Color). */}
{currentWindowStatus.status === "in_window" ? (
<CircleCheck className="size-3.5 shrink-0" aria-hidden="true" />
) : currentWindowStatus.status === "late" ? (
<AlertCircle className="size-3.5 shrink-0" aria-hidden="true" />
) : (
<AlertTriangle
className="size-3.5 shrink-0"
aria-hidden="true"
/>
)}
{currentWindowStatus.status === "in_window"
? t("medications.takeNow")
: currentWindowStatus.status === "late"
src/components/medications/medication-card.tsx
+22 -4
View File
@@ -17,7 +17,10 @@ import {
toBerlinDate,
} from "@/lib/medications/window-status";
import {
AlertCircle,
AlertTriangle,
Check,
CircleCheck,
SkipForward,
Flame,
Pencil,
@@ -294,13 +297,28 @@ export function MedicationCard({ medication, onEdit }: MedicationCardProps) {
<p className="text-sm">
<span
className={
currentWindowStatus.status === "in_window"
? "text-success font-medium"
"inline-flex items-center gap-1 font-medium " +
(currentWindowStatus.status === "in_window"
? "text-success"
: currentWindowStatus.status === "late"
? "text-dracula-yellow font-medium"
: "text-warning font-medium"
? "text-dracula-yellow"
: "text-warning")
}
>
{/* v1.4.38 W-D P2-3 — pair the colour with a Lucide
glyph so colour-blind users (red-green) can
disambiguate take-now from late from very-late.
WCAG 1.4.1 (Use of Color). */}
{currentWindowStatus.status === "in_window" ? (
<CircleCheck className="size-3.5 shrink-0" aria-hidden="true" />
) : currentWindowStatus.status === "late" ? (
<AlertCircle className="size-3.5 shrink-0" aria-hidden="true" />
) : (
<AlertTriangle
className="size-3.5 shrink-0"
aria-hidden="true"
/>
)}
{currentWindowStatus.status === "in_window"
? t("medications.takeNow")
: currentWindowStatus.status === "late"