a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions#3555
Open
rosanusi wants to merge 1 commit into
Open
a11y(4.1.2): Table / ProgressBar / Loading primitives — expose aria-busy on data-refresh regions#3555rosanusi wants to merge 1 commit into
rosanusi wants to merge 1 commit into
Conversation
…essBar, Loading, and three polling consumers Foundation primitives: - Table: aria-busy="true" on the <table> element when the updating prop is true - ProgressBar: role="progressbar" + aria-busy="true" on the meter div (the bar's presence already implies busy; the role and aria-busy make it programmatic) - Loading: aria-busy="true" + aria-live="polite" on the skeleton container so AT announces the end of loading when the skeleton unmounts Consumer wiring: - workflow-run-layout: isPolling state flips true/false around the 10 s poll interval via queueMicrotask; the event-history slot wrapper carries aria-busy - status-counts: aria-busy bound directly to countPoller.loading (already tracked) - worker-details: isCheckingHeartbeat state flips around the staleness check interval; the worker-details section carries aria-busy A11y-Audit-Ref: 4.1.2-aria-busy-loading-regions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
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
Sets
aria-busyon 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 reactiveisPolling/isCheckingflag.Changes
Foundation primitives
table.svelte—aria-busy={updating ? 'true' : undefined}on<table>. Theupdatingprop 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. Thearia-livelets AT announce load completion when the skeleton unmounts and real content renders.Consumer wiring
workflow-run-layout.svelte—isPollingstate flipstrueat the start of the 10 s poll interval, resets viaqueueMicrotaskafterthrottleRefresh(). The event-history slot wrapper carriesaria-busy={isPolling}.status-counts.svelte—aria-busy={countPoller.loading}on the status-count container.countPoller.loadingis already tracked bycreateCountPoller; no new state needed.worker-details.svelte—isCheckingHeartbeatstate flips around the 10 s heartbeat staleness check interval via the samequeueMicrotaskpattern. The<section aria-label="worker-details">carriesaria-busy={isCheckingHeartbeat}.Test plan
updating={true}on aTableconsumer and inspect DOM — confirm<table aria-busy="true">; confirmaria-busydisappears whenupdating={false}data-testid="loading"container hasaria-busy="true"andaria-live="polite"while visible; no stalearia-busyafter unmountaria-busy="true"(during poll) → no attribute (after poll)<section>briefly carriesaria-busy="true"aria-busy={countPoller.loading}istrueduring the initial fetch and polling refetch<ProgressBar>inside Table<thead>renders unchangedReferences
audit-output/issues/4.1.2-name-role-value-verification.mdSection 2c row Add Cypress to CI/CD #5aria-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