From 6c0a606bf3d66f03b936b612582e1d9f238b7a39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sun, 4 Oct 2026 15:48:13 +0200
Subject: [PATCH] fix(a11y): give the loading score and vitals grids a role to
 name

Both grids carry an aria-label while their data loads, on a plain div,
which axe reports as aria-prohibited-attr: the label has no role to
name. A scan that lands while the scores strip is still loading fails on
it. The loading grids now take role=status, the role a loading region
has and which already implies the polite live region; the loaded vitals
grid carries neither.
---
 src/components/insights/derived/vitals-dashboard.tsx | 3 +++
 src/components/insights/derived/wellness-scores.tsx  | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/src/components/insights/derived/vitals-dashboard.tsx b/src/components/insights/derived/vitals-dashboard.tsx
index 3f78eea6c..3a1926eac 100644
--- a/src/components/insights/derived/vitals-dashboard.tsx
+++ b/src/components/insights/derived/vitals-dashboard.tsx
@@ -945,6 +945,9 @@ export function VitalsDashboard({ batch, layout, className }: DashboardProps) {
           />
           <div
             data-slot="vitals-dashboard-grid"
+            // The loading label needs a role to name (axe:
+            // aria-prohibited-attr); the loaded grid carries neither.
+            role={isLoading ? "status" : undefined}
             aria-busy={isLoading}
             aria-live="polite"
             aria-label={
diff --git a/src/components/insights/derived/wellness-scores.tsx b/src/components/insights/derived/wellness-scores.tsx
index 96cdacaa1..29759f462 100644
--- a/src/components/insights/derived/wellness-scores.tsx
+++ b/src/components/insights/derived/wellness-scores.tsx
@@ -245,6 +245,10 @@ export function WellnessScores({
         />
         <div
           data-slot="wellness-scores-grid"
+          // `aria-label` needs a role to name; a bare <div> may not carry one
+          // (axe: aria-prohibited-attr). `status` is the loading region's
+          // role and already implies the polite live region.
+          role="status"
           aria-busy="true"
           aria-live="polite"
           aria-label={t("insights.derived.scores.loadingLabel")}