From 31895fcea931201e2bb07687f668a6853c07105b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 17 May 2026 17:17:24 +0200
Subject: [PATCH] a11y(medications): pair window-status colour with a Lucide
 glyph

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>
---
 .../medications/glp1-medication-card.tsx      | 26 ++++++++++++++++---
 .../medications/medication-card.tsx           | 26 ++++++++++++++++---
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/components/medications/glp1-medication-card.tsx b/src/components/medications/glp1-medication-card.tsx
index 1a82fbc74..2fec10c8f 100644
--- a/src/components/medications/glp1-medication-card.tsx
+++ b/src/components/medications/glp1-medication-card.tsx
@@ -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"
diff --git a/src/components/medications/medication-card.tsx b/src/components/medications/medication-card.tsx
index 13be5be16..2f46bdd4e 100644
--- a/src/components/medications/medication-card.tsx
+++ b/src/components/medications/medication-card.tsx
@@ -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"