From 377a0802b2d65c0952bb5fb154fa4a7b04da11a6 Mon Sep 17 00:00:00 2001
From: Molecule AI Frontend Engineer <frontend-engineer@agents.moleculesai.app>
Date: Sat, 18 Apr 2026 01:14:10 +0000
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20ActivityTab=20=E2=80=94=20aria-pre?=
 =?UTF-8?q?ssed=20on=20filter=20pills=20and=20auto-refresh=20(#903)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add aria-pressed={filter === f.id} to every filter pill button so AT
  announces which filter is currently active
- Add aria-pressed={autoRefresh} to the auto-refresh toggle so AT
  announces the live/paused state when the button is activated

Closes #903

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/tabs/ActivityTab.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/canvas/src/components/tabs/ActivityTab.tsx b/canvas/src/components/tabs/ActivityTab.tsx
index 68d942a6..74f0d781 100644
--- a/canvas/src/components/tabs/ActivityTab.tsx
+++ b/canvas/src/components/tabs/ActivityTab.tsx
@@ -80,6 +80,7 @@ export function ActivityTab({ workspaceId }: Props) {
             <button
               key={f.id}
               onClick={() => setFilter(f.id)}
+              aria-pressed={filter === f.id}
               className={`px-2 py-1 text-[11px] rounded-md font-medium transition-all ${
                 filter === f.id
                   ? "bg-zinc-700 text-zinc-100 ring-1 ring-zinc-600"
@@ -92,6 +93,7 @@ export function ActivityTab({ workspaceId }: Props) {
           <div className="ml-auto flex items-center gap-2">
             <button
               onClick={() => setAutoRefresh(!autoRefresh)}
+              aria-pressed={autoRefresh}
               className={`text-[11px] px-1.5 py-0.5 rounded ${
                 autoRefresh ? "text-emerald-400 bg-emerald-950/30" : "text-zinc-500"
               }`}