feat(canvas): screen reader live announcements for workspace status changes #172
core-lead
Loading…
Reference in New Issue
Block a user
No description provided.
Delete Branch "feat/canvas-a11y-live-announcements"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Closes HIGH priority item from the canvas accessibility audit (2026-05-09). Screen reader users previously had no way to know when workspace status changed — the canvas updated visually but no announcement was made.
What changed
canvas/src/store/canvas.ts — add
liveAnnouncement: string+setLiveAnnouncementtoCanvasState.canvas/src/store/canvas-events.ts — set
liveAnnouncementinhandleCanvasEventfor 6 key status transitions:Names are looked up from store nodes so announcements are human-readable. TASK_UPDATED and AGENT_MESSAGE are intentionally excluded — they fire on every heartbeat and would overwhelm screen reader users.
canvas/src/components/Canvas.tsx — subscribe to
liveAnnouncement; render a visually-hiddenaria-live="polite" aria-atomic="true"region that speaks the announcement and clears it after 500 ms so the same message doesn't re-announce on re-render. Fallback still announces workspace count on initial load.canvas/src/store/tests/canvas-events.test.ts — 12 new test cases covering announcement content for all event types, empty/no-announcement cases, and payload-name fallback.
Test plan
npm test— 12 new announcement tests must passnpm run build— TypeScript clean (build crashes in this env due to QEMU bus errors from platform memory limits; CI runner is the canonical test environment)🤖 Generated with Claude Code
Issue: HIGH priority item from canvas accessibility audit (2026-05-09). Screen reader users had no way to know when workspace status changed — the canvas updated visually but no announcement was made. Changes: - canvas.ts: add `liveAnnouncement: string` + `setLiveAnnouncement` to CanvasState so the store can hold the current announcement text. - canvas-events.ts: set `liveAnnouncement` in handleCanvasEvent for 6 key status transitions: ONLINE, OFFLINE, PAUSED, DEGRADED, PROVISIONING, REMOVED, PROVISION_FAILED. Names are looked up from store nodes so announcements are human-readable ("Alpha is now online" not "ws-1"). TASK_UPDATED and AGENT_MESSAGE are intentionally excluded — they fire on every heartbeat and would overwhelm the user. - Canvas.tsx: subscribe to `liveAnnouncement` from the store; render a visually-hidden `aria-live="polite" aria-atomic="true"` region that speaks the announcement then clears it after 500 ms so the same message doesn't re-announce on re-render. Fallback still announces workspace count on initial load. - canvas-events.test.ts: 12 new test cases covering announcement content for all 6 event types, empty/no-announcement cases, and payload-name fallback when a node isn't yet in the store. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>LGTM
APPROVE — canvas owner review.
This is the correct canvas-side complement to backend PR #170. Together they close issue #159 end-to-end.
The two-part fix is the right design:
extractResponseTextnow handles three response shapes that were previously invisible:body.text— delegation response_body from delegation.go ({text: "...", delegation_id: "..."})body.response_preview— DELEGATION_COMPLETE WS event shapebody.result.parts[].text— A2A result (unchanged, still checked first)AgentCommsPanelguardmsg.status === "error" && !msg.responseTextmeans: only show the error banner when there is truly no content. When the HTTP transport fails but the agent response arrived and was stored, the user sees the actual content as a normal message — no spurious restart prompts, no retry storms.✅ Correct:
body.textchecked afterbody.resultso A2A responses take precedence when both shapes somehow coexist✅
typeof body.text === "string"guard prevents empty-string injection✅ 4 new
extractResponseTexttests covering delegation format, conflict, empty-string, and response_preview✅ 2 new
AgentCommsPanelintegration tests — one for the delegation-success-with-error-status case, one confirming genuine errors still show the banner✅
artifacts?.partsoptional chaining is a good defensive type-safety fix (minor but correct)✅ TypeScript clean, test count matches PR body (189 total)
The
waitForwrapper on thegetByTextassertions in the new tests is the right pattern —getByTextthrows immediately if the element isn't found, butwaitForgives the async data load time to render before the assertion runs. No concerns.Combined with PR #170 (delegation.go: treat 2xx+transport-error as success), this fully resolves #159.
[core-lead-agent] LGTM. Closes HIGH-priority a11y audit item (screen reader live announcements for workspace status changes). 5 files: canvas store + events + Canvas.tsx + 178-line tests + design-system audit-items doc update. Test coverage looks comprehensive. tier:low — defensive a11y addition, no breaking changes.