From b763424b1f82c78502a432bfbf0a14a8ea2c4306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 16 May 2026 17:51:24 +0200
Subject: [PATCH] fix(a11y): give every Progress bar an accessible name

Lighthouse v1.4.33 a11y run flagged "ARIA progressbar elements missing
accessible names" (score 91/94). The Radix Progress primitive renders
a `role="progressbar"` host element but doesn't synthesise an
`aria-label` from context -- the consumer must supply one. Reusing
the on-screen label keys keeps the SR announcement matched to the
visible caption.

- src/app/insights/medikamente/page.tsx: compliance7/compliance30
- src/app/achievements/page.tsx: criterion meter + summary
  earned-points + next-goal progress
- src/components/medications/medication-card.tsx: compliance7/30
- src/components/medications/glp1-medication-card.tsx: same

`role="progressbar"` divs in `health-score-card.tsx`,
`getting-started-checklist.tsx`, and `OnboardingShell.tsx` already
carry aria-labels -- verified, no change needed.

Refs Lighthouse-derived punch list (v1.4.33 perf audit).
---
 src/app/achievements/page.tsx                    | 16 +++++++++++++++-
 src/app/insights/medikamente/page.tsx            | 14 ++++++++++++--
 .../medications/glp1-medication-card.tsx         | 13 +++++++++++--
 src/components/medications/medication-card.tsx   | 13 +++++++++++--
 4 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/app/achievements/page.tsx b/src/app/achievements/page.tsx
index 5d6f013b3..8cf23f3c3 100644
--- a/src/app/achievements/page.tsx
+++ b/src/app/achievements/page.tsx
@@ -225,7 +225,19 @@ function AchievementCard({ achievement, t }: AchievementCardProps) {
               target: formatMetric(achievement.format, achievement.target, t),
             })}
           </p>
-          <Progress value={achievement.progressPercent} className="h-1.5" />
+          {/* v1.4.33 IW9 — aria-label so the bar carries an accessible name. */}
+          <Progress
+            value={achievement.progressPercent}
+            className="h-1.5"
+            aria-label={t("achievements.criterionHint", {
+              current: formatMetric(
+                achievement.format,
+                achievement.current,
+                t,
+              ),
+              target: formatMetric(achievement.format, achievement.target, t),
+            })}
+          />
         </div>
       )}
 
@@ -328,6 +340,7 @@ export default function AchievementsPage() {
                 : 0
             }
             className="h-1.5"
+            aria-label={t("achievements.points")}
           />
         </div>
         <div className="bg-card border-border flex min-h-34 flex-col justify-between rounded-xl border p-5">
@@ -385,6 +398,7 @@ export default function AchievementsPage() {
           <Progress
             value={summary?.nextAchievement?.progressPercent ?? 100}
             className="mt-3 h-1.5"
+            aria-label={t("achievements.nextProgressLabel")}
           />
         </div>
       </div>
diff --git a/src/app/insights/medikamente/page.tsx b/src/app/insights/medikamente/page.tsx
index 8ac211cd7..9fafb73a5 100644
--- a/src/app/insights/medikamente/page.tsx
+++ b/src/app/insights/medikamente/page.tsx
@@ -187,14 +187,24 @@ export default function InsightsMedikamentePage() {
                     <span>{t("insights.compliance7d")}</span>
                     <span className="font-medium">{med.compliance7}%</span>
                   </div>
-                  <Progress value={med.compliance7} className="h-2" />
+                  {/* v1.4.33 IW9 — aria-label so the bar has an
+                      accessible name (Lighthouse a11y 91/94). */}
+                  <Progress
+                    value={med.compliance7}
+                    className="h-2"
+                    aria-label={t("insights.compliance7d")}
+                  />
                 </div>
                 <div className="space-y-1.5">
                   <div className="flex justify-between text-xs">
                     <span>{t("insights.compliance30d")}</span>
                     <span className="font-medium">{med.compliance30}%</span>
                   </div>
-                  <Progress value={med.compliance30} className="h-2" />
+                  <Progress
+                    value={med.compliance30}
+                    className="h-2"
+                    aria-label={t("insights.compliance30d")}
+                  />
                 </div>
                 <div className="text-muted-foreground flex justify-between text-xs">
                   <span>
diff --git a/src/components/medications/glp1-medication-card.tsx b/src/components/medications/glp1-medication-card.tsx
index 47da29613..6be98d7ab 100644
--- a/src/components/medications/glp1-medication-card.tsx
+++ b/src/components/medications/glp1-medication-card.tsx
@@ -348,7 +348,12 @@ export function Glp1MedicationCard({
                 </span>
                 <span className="font-medium">{rate7}%</span>
               </div>
-              <Progress value={rate7} className="h-2" />
+              {/* v1.4.33 IW9 — aria-label so the bar has an accessible name. */}
+              <Progress
+                value={rate7}
+                className="h-2"
+                aria-label={t("medications.compliance7d")}
+              />
             </div>
             <div className="space-y-1.5">
               <div className="flex items-center justify-between text-sm">
@@ -357,7 +362,11 @@ export function Glp1MedicationCard({
                 </span>
                 <span className="font-medium">{rate30}%</span>
               </div>
-              <Progress value={rate30} className="h-2" />
+              <Progress
+                value={rate30}
+                className="h-2"
+                aria-label={t("medications.compliance30d")}
+              />
             </div>
             {streak > 0 && (
               <div className="flex items-center gap-4 text-xs">
diff --git a/src/components/medications/medication-card.tsx b/src/components/medications/medication-card.tsx
index f4e7083ef..e33e2be7e 100644
--- a/src/components/medications/medication-card.tsx
+++ b/src/components/medications/medication-card.tsx
@@ -533,7 +533,12 @@ export function MedicationCard({ medication, onEdit }: MedicationCardProps) {
                 </span>
                 <span className="font-medium">{rate7}%</span>
               </div>
-              <Progress value={rate7} className="h-2" />
+              {/* v1.4.33 IW9 — aria-label so the bar has an accessible name. */}
+              <Progress
+                value={rate7}
+                className="h-2"
+                aria-label={t("medications.compliance7d")}
+              />
             </div>
 
             <div className="space-y-1.5">
@@ -543,7 +548,11 @@ export function MedicationCard({ medication, onEdit }: MedicationCardProps) {
                 </span>
                 <span className="font-medium">{rate30}%</span>
               </div>
-              <Progress value={rate30} className="h-2" />
+              <Progress
+                value={rate30}
+                className="h-2"
+                aria-label={t("medications.compliance30d")}
+              />
             </div>
 
             <div className="flex items-center gap-4 text-xs">