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).
This commit is contained in:
Marc-André Bombeck committed 2026-05-16 17:51:24 +02:00
1 parent a5a91e40bc
commit b763424b1f
4 files changed
+49 -7

No files matched your search

+15 -1
View File
@@ -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>
+12 -2
View File
@@ -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>
@@ -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">
+11 -2
View File
@@ -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">