From ee3347f5324f69e06af8d39b283f44543f29a6e4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 27 Jul 2026 21:41:29 +0000
Subject: [PATCH 1/2] fix(a11y): meet WCAG 2.2 SC 2.4.11 focus-ring contrast on
 dashboard panels

Post-merge corrective for #918 (merged into main with three unresolved
copilot-pull-request-reviewer findings still open on the dashboard panels).

- Dispatch button: focus-visible ring indigo-400/50 -> /70. At 50% opacity
  the ring composites to ~2.5:1 against the ~#0e0e13 dashboard background,
  below the 3:1 focus-indicator floor; /70 clears it.
- Refresh button: focus-visible ring white/30 -> /40, same rationale.
- Add regression coverage in dashboard-search-accessibility.test.ts for the
  corrected ring opacities and for aria-busy tracking searchLoading on the
  Go button, so these cannot silently regress.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WJBTAoqpfHepiLfks3NhTk
---
 apps/web/src/components/dashboard/panels.tsx  |  4 ++--
 .../dashboard-search-accessibility.test.ts    | 23 +++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/dashboard/panels.tsx b/apps/web/src/components/dashboard/panels.tsx
index 9776abd1e..676dde7ce 100644
--- a/apps/web/src/components/dashboard/panels.tsx
+++ b/apps/web/src/components/dashboard/panels.tsx
@@ -223,7 +223,7 @@ export function AgentsPanel({
           {hasEvents && agentBackend && (
             <button
               onClick={() => onDispatch(video.id)}
-              className="px-4 py-2 text-xs font-bold uppercase tracking-wider transition-all active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400/50 rounded"
+              className="px-4 py-2 text-xs font-bold uppercase tracking-wider transition-all active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400/70 rounded"
               style={{ background: 'rgba(129,140,248,0.15)', color: '#818cf8', border: '1px solid rgba(129,140,248,0.3)' }}
             >
               Dispatch {video.events!.length} events
@@ -232,7 +232,7 @@ export function AgentsPanel({
           {anyRunning && (
             <button
               onClick={() => onRefresh(video.id)}
-              className="px-4 py-2 text-xs font-bold uppercase tracking-wider transition-all active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30 rounded"
+              className="px-4 py-2 text-xs font-bold uppercase tracking-wider transition-all active:scale-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/40 rounded"
               style={{ background: 'rgba(255,255,255,0.05)', color: 'rgba(248,245,253,0.7)', border: '1px solid rgba(255,255,255,0.1)' }}
             >
               Refresh
diff --git a/apps/web/src/lib/__tests__/dashboard-search-accessibility.test.ts b/apps/web/src/lib/__tests__/dashboard-search-accessibility.test.ts
index 2f4c19357..6c91f2c53 100644
--- a/apps/web/src/lib/__tests__/dashboard-search-accessibility.test.ts
+++ b/apps/web/src/lib/__tests__/dashboard-search-accessibility.test.ts
@@ -22,4 +22,27 @@ describe('dashboard search accessibility', () => {
     expect(searchForm).not.toContain('aria-label="Submit search"');
     expect(searchForm).not.toContain('aria-label="Search"');
   });
+
+  it('communicates the search loading state on the Go button via aria-busy', () => {
+    const source = readSource('components/dashboard/panels.tsx');
+    const goButton = source.match(
+      /<button\s+type="submit"[\s\S]*?{searchLoading \? '…' : 'Go'}/,
+    )?.[0];
+
+    expect(goButton).toBeDefined();
+    expect(goButton).toContain('aria-busy={searchLoading || undefined}');
+  });
+
+  it('gives dashboard panel controls a visible keyboard focus state that meets the WCAG 2.2 SC 2.4.11 3:1 contrast floor', () => {
+    const source = readSource('components/dashboard/panels.tsx');
+
+    // Dispatch (indigo-400) and Refresh (white) rings composite against the
+    // ~#0e0e13 dashboard background; the opacities below are the minimum that
+    // clear the 3:1 focus-indicator contrast ratio. Guard against regressing
+    // them back to the sub-threshold /50 and /30 values.
+    expect(source).toContain('focus-visible:ring-indigo-400/70');
+    expect(source).toContain('focus-visible:ring-white/40');
+    expect(source).not.toContain('focus-visible:ring-indigo-400/50');
+    expect(source).not.toContain('focus-visible:ring-white/30');
+  });
 });

From cc833f5284d1d96cadf99edda842ba4f1c5c79f1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 29 Jul 2026 13:33:44 +0000
Subject: [PATCH 2/2] test(a11y): bind focus-ring assertions to each specific
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses Copilot's current-head review finding: the previous file-wide
toContain/not.toContain assertions did not prove the corrected classes stayed
on the Dispatch and Refresh buttons — a regression on one button could be
masked by the class appearing on an unrelated control, and the negative checks
would false-fail if another control legitimately used the old opacity.

Extract each button's own <button> opening tag by its onDispatch/onRefresh
handler and assert the focus-ring class on that tag, removing the brittle
file-wide negative checks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WJBTAoqpfHepiLfks3NhTk
---
 .../dashboard-search-accessibility.test.ts    | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/lib/__tests__/dashboard-search-accessibility.test.ts b/apps/web/src/lib/__tests__/dashboard-search-accessibility.test.ts
index 6c91f2c53..0c00f712e 100644
--- a/apps/web/src/lib/__tests__/dashboard-search-accessibility.test.ts
+++ b/apps/web/src/lib/__tests__/dashboard-search-accessibility.test.ts
@@ -36,13 +36,31 @@ describe('dashboard search accessibility', () => {
   it('gives dashboard panel controls a visible keyboard focus state that meets the WCAG 2.2 SC 2.4.11 3:1 contrast floor', () => {
     const source = readSource('components/dashboard/panels.tsx');
 
+    // Extract the specific <button> opening tag that owns a given onClick
+    // handler, so each assertion is bound to its own control rather than to
+    // the file at large. The closing `>` of a JSX opening tag sits on its own
+    // line here, which lets us stop at it without tripping over the `=>` in
+    // the arrow handler.
+    const buttonTagFor = (handler: string) => {
+      const openingTags = source.match(/<button\b[\s\S]*?\n\s*>/g) ?? [];
+      return openingTags.find((tag) => tag.includes(handler));
+    };
+
     // Dispatch (indigo-400) and Refresh (white) rings composite against the
-    // ~#0e0e13 dashboard background; the opacities below are the minimum that
-    // clear the 3:1 focus-indicator contrast ratio. Guard against regressing
-    // them back to the sub-threshold /50 and /30 values.
-    expect(source).toContain('focus-visible:ring-indigo-400/70');
-    expect(source).toContain('focus-visible:ring-white/40');
-    expect(source).not.toContain('focus-visible:ring-indigo-400/50');
-    expect(source).not.toContain('focus-visible:ring-white/30');
+    // ~#0e0e13 dashboard background; the opacities asserted below are the
+    // minimum that clear the 3:1 focus-indicator contrast ratio. Asserting on
+    // each button's own tag guards against a regression on one button being
+    // masked by the class merely existing elsewhere, and vice versa.
+    const dispatchButton = buttonTagFor('onDispatch(video.id)');
+    expect(dispatchButton).toBeDefined();
+    expect(dispatchButton).toContain('focus-visible:ring-2');
+    expect(dispatchButton).toContain('focus-visible:ring-indigo-400/70');
+    expect(dispatchButton).not.toContain('focus-visible:ring-indigo-400/50');
+
+    const refreshButton = buttonTagFor('onRefresh(video.id)');
+    expect(refreshButton).toBeDefined();
+    expect(refreshButton).toContain('focus-visible:ring-2');
+    expect(refreshButton).toContain('focus-visible:ring-white/40');
+    expect(refreshButton).not.toContain('focus-visible:ring-white/30');
   });
 });