From ae700eddfd228848510afb4d27de3e072c6eddcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 14 May 2026 16:22:57 +0200
Subject: [PATCH] a11y(health-score): aria-labelledby pairing on provenance
 panel

Pairs the panel <section> with the toggle button via id +
aria-labelledby so screen readers announce 'Driven by' as the
panel's accessible name. The toggle already advertises
aria-expanded + aria-controls; the labelledby pairing closes the
loop the WAI accordion pattern recommends.

The drift-guard test that pinned strict attribute order on the
panel id now tolerates additional ARIA attributes between id and
data-slot via a flexible regex.
---
 .../__tests__/health-score-card-provenance.test.tsx       | 8 ++++++--
 src/components/insights/health-score-card.tsx             | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/insights/__tests__/health-score-card-provenance.test.tsx b/src/components/insights/__tests__/health-score-card-provenance.test.tsx
index a7c2fc948..d65d364cf 100644
--- a/src/components/insights/__tests__/health-score-card-provenance.test.tsx
+++ b/src/components/insights/__tests__/health-score-card-provenance.test.tsx
@@ -116,9 +116,13 @@ describe("<HealthScoreCard> — provenance accordion (W8e)", () => {
     );
     expect(controlsMatch).not.toBeNull();
     const id = controlsMatch![1];
-    expect(html).toContain(
-      `id="${id}" data-slot="health-score-card-provenance-panel"`,
+    // The panel section must carry the same id; we don't pin the exact
+    // attribute order because additional ARIA attributes (e.g.
+    // `aria-labelledby`) may sit between `id` and `data-slot`.
+    const panelMatch = html.match(
+      new RegExp(`<section[^>]*\\bid="${id}"[^>]*data-slot="health-score-card-provenance-panel"`),
     );
+    expect(panelMatch).not.toBeNull();
   });
 
   it("sorts rows by effective weight descending (null components sink to bottom)", () => {
diff --git a/src/components/insights/health-score-card.tsx b/src/components/insights/health-score-card.tsx
index 717b18745..09cef90e0 100644
--- a/src/components/insights/health-score-card.tsx
+++ b/src/components/insights/health-score-card.tsx
@@ -385,6 +385,7 @@ export function HealthScoreCard({
         <div className="-mt-1 border-t pt-2">
           <button
             type="button"
+            id={`${panelId}-toggle`}
             data-slot="health-score-card-provenance-toggle"
             aria-expanded={expanded}
             aria-controls={panelId}
@@ -408,6 +409,7 @@ export function HealthScoreCard({
           {expanded && (
             <section
               id={panelId}
+              aria-labelledby={`${panelId}-toggle`}
               data-slot="health-score-card-provenance-panel"
               className="mt-2 space-y-1.5"
             >