a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions

[rosanusi]

Summary

Sets aria-busy on regions that are actively loading or refreshing data, so AT users have a programmatic signal distinguishing "data is current" from "data is being updated."

Before: grep -r aria-busy src/ returned zero matches. Screen-reader users had no signal when tables refreshed, skeleton loaders appeared, or polling intervals fired.
After: Three primitives carry permanent or reactive aria-busy, and three polling consumers wire a reactive isPolling/isChecking flag.

Changes

Foundation primitives

• table.svelte — aria-busy={updating ? 'true' : undefined} on <table>. The updating prop already drives the visual <ProgressBar> in <thead>; this surfaces the same state programmatically.
• progress-bar.svelte — role="progressbar" + aria-busy="true" on the meter div. The bar's presence always implies busy; the role and attribute make it machine-readable.
• loading.svelte — aria-busy="true" + aria-live="polite" on the skeleton container. The aria-live lets AT announce load completion when the skeleton unmounts and real content renders.

Consumer wiring

• workflow-run-layout.svelte — isPolling state flips true at the start of the 10 s poll interval, resets via queueMicrotask after throttleRefresh(). The event-history slot wrapper carries aria-busy={isPolling}.
• status-counts.svelte — aria-busy={countPoller.loading} on the status-count container. countPoller.loading is already tracked by createCountPoller; no new state needed.
• worker-details.svelte — isCheckingHeartbeat state flips around the 10 s heartbeat staleness check interval via the same queueMicrotask pattern. The <section aria-label="worker-details"> carries aria-busy={isCheckingHeartbeat}.

Test plan

• Workflows list: set updating={true} on a Table consumer and inspect DOM — confirm <table aria-busy="true">; confirm aria-busy disappears when updating={false}
• Skeleton/Loading: confirm data-testid="loading" container has aria-busy="true" and aria-live="polite" while visible; no stale aria-busy after unmount
• Workflow detail page: wait for the 10 s poll cycle; confirm the event-history wrapper alternates aria-busy="true" (during poll) → no attribute (after poll)
• Worker detail page: wait for the 10 s heartbeat check interval; confirm <section> briefly carries aria-busy="true"
• Workflow list status counts: confirm aria-busy={countPoller.loading} is true during the initial fetch and polling refetch
• axe-core: zero new violations on a page with a busy table
• Regression: visual <ProgressBar> inside Table <thead> renders unchanged

References

• Verification doc: audit-output/issues/4.1.2-name-role-value-verification.md Section 2c row Add Cypress to CI/CD #5
• WCAG 2.2 SC 4.1.2 Name, Role, Value (Level A); cross-walks to SC 4.1.3 Status Messages (Level AA)
• WAI-ARIA aria-busy: https://www.w3.org/TR/wai-aria-1.2/#aria-busy

🤖 Generated with Claude Code

A11y-Audit-Ref: 4.1.2-aria-busy-loading-regions

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jul 6, 2026 4:36pm

[ardiewen]

@rosanusi Reviewed + adjusted so aria-busy/live semantics sit on the region that actually changes, not on indicators or layout wrappers.

Kept (real wired state): Table aria-busy={updating}, status-counts aria-busy={countPoller.loading}, worker-details aria-busy={refreshing}.

Reverted / fixed:

• workflow-run-layout — dropped the isPolling/queueMicrotask flip (fake duration — true for one microtask) and its wrapper <div>, which collapsed the route's flex children into one and lost the parent gap-4. Event-history refresh is already covered by the Table's aria-busy.
• progress-bar — reverted role="progressbar"/aria-busy: nameless + valueless = AT noise, and aria-busy on a childless indicator is inert. Follow-up DT-4214 to make it a proper widget.
• loading — dropped inert aria-busy and the aria-live (won't fire on a text-less node inserted whole / removed); added role="status" + aria-label="Loading" and hid the decorative SVG.

Merged latest main (status-counts class conflict resolved). pnpm check clean.