fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1)#3443
Open
bilal-karim wants to merge 4 commits into
Open
fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1)#3443bilal-karim wants to merge 4 commits into
bilal-karim wants to merge 4 commits into
Conversation
…WCAG 1.4.1) Adds aria-label to the SVG <g role="button"> wrapper on each timeline-graph node so screen readers announce the workflow id and status (or event type and classification) instead of bare "button". Previously, terminal statuses on the timeline graph (Completed, Failed, Canceled, TimedOut, Fired, Signaled) were distinguishable only by node color. The color legend lives inside a Tooltip -- keyboard- and AT-reachable since PR #3429, but still requires the user to leave the graph, decode the color, and come back to identify each node. This change makes the graph self-describing. Cross-cutting wins: - Closes the SC 4.1.2 missing-accessible-name defect on the same <g role="button"> widgets. - Closes the SC 1.3.1 matrix-row item d deferred to the Robust wave. New i18n keys: - workflows.row-accessible-name = "Workflow {{workflowId}}: {{status}}" - events.row-accessible-name = "Event {{eventType}}: {{classification}}" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
CI's check-types caught two TS errors in the timeline-graph
aria-label additions:
1. translate(\`workflows.\${workflowStatusKey(status)}\`) -- the
helper's return type widened to plain string, which doesn't
satisfy the strongly-typed translation-key union.
2. translate(\`events.event-classification.\${classification.toLowerCase()}\`)
-- same shape; toLowerCase() returns plain string.
3. event.eventType -- doesn't exist on PendingActivity (a union
member of WorkflowEventWithPending).
Replaced both dynamic template-literal lookups with `as const`
record literals keyed by the literal-union enum values, so
TypeScript can narrow to the exact translation-key union. Added
an `in` operator narrowing for the eventType access.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
EventClassification union doesn't include 'Retrying' -- only the i18n key exists. The lookup entry was unreachable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Previously the aria-label for a pending activity always said
"Pending" regardless of attempt count. The timeline already
communicates retry state visually (line styling), in the legend
("Retry" entry), and in the group-details row text -- but the
per-event aria-label missed it.
Check group.pendingActivity.attempt > 1 (matching the existing
group-details-row.svelte logic) and surface "Retrying" in the
aria-label when applicable. The events.event-classification.retrying
translation key already existed for this purpose.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
Bot
added
a11y
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
1 participant
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
Adds
aria-labelto each SVG<g role="button">wrapper on the timeline-graph nodes so screen readers announce the workflow's id and status (or the event's type and classification) instead of bare "button".Previously, terminal statuses on the timeline graph (Completed, Failed, Canceled, TimedOut, Fired, Signaled) were distinguishable only by node color. The legend that decodes those colors lives inside a
<Tooltip>— keyboard- and AT-reachable since PR #3429, but still requires the user to leave the graph, decode the color in the legend, and come back to identify each node. This change makes the graph self-describing at the node level.Audit context
audit-output/issues/1.4.1-timeline-graph-status.md(this is Option A — the recommended fix).Cross-cutting wins
<g role="button">widgets.New i18n keys
workflows.row-accessible-name:"Workflow {{workflowId}}: {{status}}"events.row-accessible-name:"Event {{eventType}}: {{classification}}"Test plan
"Workflow {id}: {status}, button"instead of just"button"."Event {eventType}: {classification}, button".<g>has the expectedaria-labelattribute.svg-img-altrule should no longer flag the timeline graph rows.🤖 Generated with Claude Code
A11y-Audit-Ref: 1.4.1-timeline-graph-status