mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 21:10:59 +00:00
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:
1 parent
a5a91e40bc
commit
b763424b1f
4 files changed
+49
-7
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in new issue
Block a user