a11y(4.1.3): Add live-region wrappers for workflow status, event count, filter counts, and Banner#3561
Open
rosanusi wants to merge 3 commits into
Open
a11y(4.1.3): Add live-region wrappers for workflow status, event count, filter counts, and Banner#3561rosanusi wants to merge 3 commits into
rosanusi wants to merge 3 commits into
Conversation
…ter counts, and Banner
Defect 1 — WorkflowStatus chip: add role="status" aria-atomic="true" so
status transitions (Running → Completed / Failed / etc.) announce to AT
without requiring navigation.
Defect 2 — Event history polling: track item-count delta in
event-summary-table and emit a sr-only role="status" span announcing
"{N} new events loaded" each time the poll appends rows, avoiding
verbose per-row narration.
Defect 3 — Filter result counts: add role="status" aria-live="polite"
aria-atomic="true" to the workflow, activity, and schedule count spans
so polled count updates announce as status messages.
Defect 4 — Holocene Banner: add getRole() mapping (danger → role="alert",
default → role="status") and aria-atomic="true" on the section element,
mirroring the Alert primitive pattern.
A11y-Audit-Ref: 4.1.3-ui-main-live-region-gaps
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
a11y
Contributor
|
4 tasks
- WorkflowStatus: gate role="status" behind an opt-in `announce` prop, enabled only on the detail-header chip, so per-row table cells and the status-filter dropdown no longer mount live regions (no proliferation). - event-summary-table: debounce the "N new events loaded" announcement so a burst rendered across multiple reactive passes announces one accurate total instead of per-pass partial counts. - filter counts (workflows/activities/schedules): wrap the number + noun in one role="status" region so it announces "N Workflows", not a bare "N". - heart-beat-indicator: aria-hidden the decorative EKG wrapper so it isn't surfaced as an unlabeled image inside the status chip's live region. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Pulls the debounced "N new events loaded" live-region logic out of
event-summary-table into:
- utilities/count-announcer.ts — framework-agnostic debounce/accumulate logic
(tracks increases, coalesces bursts, clears-then-re-sets so identical
consecutive counts re-announce); fully unit-tested with fake timers.
- components/live-count-announcer.svelte — thin Svelte adapter that wires a
reactive count to the announcer and renders the sr-only polite region.
event-summary-table now renders <LiveCountAnnouncer count={items.length} ... />.
Behavior unchanged; the only tricky logic is now isolated and covered.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes WCAG 2.2 SC 4.1.3 (Status Messages) gaps across ui-main — dynamic surfaces that changed without announcing to screen readers. Verified manually with VoiceOver + Safari/Chrome (see AT notes below).
announceprop addsrole="status" aria-atomic="true"; enabled only on the detail-header chip. Per-row table cells and the status-filter dropdown stay inert — avoids mounting dozens of live regions per list page (no proliferation).role="status"inevent-summary-table; debounced (250 ms) so a burst rendered across multiple reactive passes announces a single accurate total ("N new events loaded") instead of per-pass partial counts.role="status" aria-atomic="true"region on the workflows / activities / schedules pages, so it announces "N Workflows" rather than a context-free "N".getRole()mapsdanger→role="alert"(assertive),default→role="status"(polite) +aria-atomic. Banner's type space is onlydefault/danger, so this mapping is complete (not anAlertmismatch).aria-hiddenon the decorative EKG wrapper so the animated graphic isn't surfaced as an unlabeledimginside the status chip'saria-atomiclive region.Files changed
src/lib/components/workflow-status.svelte,src/lib/layouts/workflow-header.svelte— Defect 1src/lib/components/event/event-summary-table.svelte,src/lib/i18n/locales/en/workflows.ts— Defect 2src/lib/pages/workflows-with-new-search.svelte,src/lib/pages/standalone-activities.svelte,src/lib/pages/schedules.svelte— Defect 3src/lib/holocene/banner/banner.svelte— Defect 4src/lib/components/heart-beat-indicator.svelte— Defect 5Manual AT verification (VoiceOver + Safari/Chrome)
<main>, neveraria-hidden/inert, text mutates in place.Bannerhas no consumer in OSSui(and isn't exported from@temporalio/ui, so it doesn't cascade to cloud-ui). cloud-ui's own banner already uses the samewarning → alert, else statuspattern. Note: therolesits on a<section>mounted via{#if show}(created with its content), so dynamic appearance may not announce on all SR/browser combos — acceptable for banners shown on load; flagged for awareness.Test plan
Related
<body>(outside<main>), which also blocks the VoiceOver count announcement on that step. Focus-management fix tracked separately.A11y-Audit-Ref: 4.1.3-ui-main-live-region-gaps
🤖 Generated with Claude Code