From 6ee80b36f4745503ca570c227d9ff92957534d1a Mon Sep 17 00:00:00 2001
From: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Date: Fri, 3 Jul 2026 17:05:05 +0800
Subject: [PATCH] chore(lint): enforce jsx-a11y/label-has-associated-control

eslint-config-next enables only a narrow jsx-a11y subset (alt-text,
aria-props, role validity), so <label>s not wired to a control pass a
clean lint. Enable label-has-associated-control at error to catch that
in CI, and fix the 4 pre-existing violations: the browse-library filter
labels in ClinicalDashboard sat next to aria-labeled <select>s without
being associated to them, so associate each via htmlFor/id.

Deliberately did NOT enable the sibling control-has-associated-label
(which flags an unlabeled input/select): it false-positives on this
codebase's pervasive <label><span>text</span><input/></label> pattern
(~13 correct controls) and depth tuning does not clear them. Precise
unlabeled-control detection belongs in a runtime axe-core check
(tracked separately).

lint (0 errors), typecheck, and prettier all clean.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 eslint.config.mjs                    | 16 +++++++++++++++
 src/components/ClinicalDashboard.tsx | 30 ++++++++++++++++++++++++----
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index db058f597b..1154499547 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -5,6 +5,22 @@ import nextTs from "eslint-config-next/typescript";
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
+  // Accessibility: eslint-config-next only enables a narrow jsx-a11y subset
+  // (alt-text, aria-props, role validity). Add `label-has-associated-control`
+  // so a <label> that isn't wired to a control is caught in CI — a real markup
+  // smell the default config misses.
+  //
+  // The sibling rule `control-has-associated-label` (which flags an unlabeled
+  // <input>/<select>) is deliberately NOT enabled: it false-positives on this
+  // codebase's pervasive `<label><span>text</span><input/></label>` pattern
+  // (~13 correctly-labeled controls) and `depth` tuning does not clear them.
+  // Precise unlabeled-control detection belongs in a runtime axe-core check.
+  {
+    files: ["**/*.{jsx,tsx}"],
+    rules: {
+      "jsx-a11y/label-has-associated-control": "error",
+    },
+  },
   // Override default ignores of eslint-config-next.
   globalIgnores([
     // Default ignores of eslint-config-next:
diff --git a/src/components/ClinicalDashboard.tsx b/src/components/ClinicalDashboard.tsx
index c19be59c6b..a87b8be598 100644
--- a/src/components/ClinicalDashboard.tsx
+++ b/src/components/ClinicalDashboard.tsx
@@ -2351,8 +2351,14 @@ function DocumentDrawer({
       {/* Dynamic Browse Library Filters */}
       <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
         <div>
-          <label className="text-[10px] font-bold uppercase tracking-wider text-[color:var(--text-soft)]">Type</label>
+          <label
+            htmlFor="browse-filter-type"
+            className="text-[10px] font-bold uppercase tracking-wider text-[color:var(--text-soft)]"
+          >
+            Type
+          </label>
           <select
+            id="browse-filter-type"
             value={selectedType}
             onChange={(e) => setSelectedType(e.target.value)}
             className="w-full mt-1 px-2.5 py-1.5 text-xs rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text)] focus:border-[color:var(--primary)] focus:outline-none"
@@ -2367,8 +2373,14 @@ function DocumentDrawer({
           </select>
         </div>
         <div>
-          <label className="text-[10px] font-bold uppercase tracking-wider text-[color:var(--text-soft)]">Site</label>
+          <label
+            htmlFor="browse-filter-site"
+            className="text-[10px] font-bold uppercase tracking-wider text-[color:var(--text-soft)]"
+          >
+            Site
+          </label>
           <select
+            id="browse-filter-site"
             value={selectedSite}
             onChange={(e) => setSelectedSite(e.target.value)}
             className="w-full mt-1 px-2.5 py-1.5 text-xs rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text)] focus:border-[color:var(--primary)] focus:outline-none"
@@ -2383,8 +2395,14 @@ function DocumentDrawer({
           </select>
         </div>
         <div>
-          <label className="text-[10px] font-bold uppercase tracking-wider text-[color:var(--text-soft)]">Topic</label>
+          <label
+            htmlFor="browse-filter-topic"
+            className="text-[10px] font-bold uppercase tracking-wider text-[color:var(--text-soft)]"
+          >
+            Topic
+          </label>
           <select
+            id="browse-filter-topic"
             value={selectedTopic}
             onChange={(e) => setSelectedTopic(e.target.value)}
             className="w-full mt-1 px-2.5 py-1.5 text-xs rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text)] focus:border-[color:var(--primary)] focus:outline-none"
@@ -2399,10 +2417,14 @@ function DocumentDrawer({
           </select>
         </div>
         <div>
-          <label className="text-[10px] font-bold uppercase tracking-wider text-[color:var(--text-soft)]">
+          <label
+            htmlFor="browse-filter-population"
+            className="text-[10px] font-bold uppercase tracking-wider text-[color:var(--text-soft)]"
+          >
             Population
           </label>
           <select
+            id="browse-filter-population"
             value={selectedPopulation}
             onChange={(e) => setSelectedPopulation(e.target.value)}
             className="w-full mt-1 px-2.5 py-1.5 text-xs rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] text-[color:var(--text)] focus:border-[color:var(--primary)] focus:outline-none"