fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1) by bilal-karim · Pull Request #3443 · temporalio/ui

bilal-karim · 2026-05-22T16:40:34Z

Summary

Adds aria-label to 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".

 <g
   role="button"
   tabindex="0"
+  aria-label={translate('workflows.row-accessible-name', {
+    workflowId: workflow.id,
+    status: statusLabel,
+  })}
   class="relative cursor-pointer"
   {height}
 >

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

WCAG 2.2 SC 1.4.1 Use of Color (Level A) — Serious. Affects every workflow timeline view, which is the most-trafficked product surface for workflow investigation.
Issue file: audit-output/issues/1.4.1-timeline-graph-status.md (this is Option A — the recommended fix).
The sibling 1.4.1 fix (label required indicator) shipped in PR fix(a11y): non-color signal for Label required indicator (WCAG 1.4.1) #3439.

Cross-cutting wins

Closes the SC 4.1.2 Name, Role, Value missing-accessible-name defect on the same <g role="button"> widgets.
Closes the SC 1.3.1 Info and Relationships 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}}"

Test plan

Open a workflow with failed/completed children. Tab into the timeline graph; with VoiceOver/NVDA, confirm each node announces "Workflow {id}: {status}, button" instead of just "button".
On the event history graph: tab to each dot; AT announces "Event {eventType}: {classification}, button".
Right-click → Inspect a node to confirm the <g> has the expected aria-label attribute.
axe-core svg-img-alt rule should no longer flag the timeline graph rows.
Zero visual change for sighted users.

🤖 Generated with Claude Code

A11y-Audit-Ref: 1.4.1-timeline-graph-status

…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 <[email protected]>

vercel · 2026-05-22T16:40:39Z

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

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jun 3, 2026 8:03pm

temporal-cicd · 2026-05-22T16:41:45Z

	Warnings
⚠️	📊 Strict Mode: 9 errors in 3 files (1.0% of 887 total) src/lib/components/workflow-status.svelte (2) L102:16: 'count' is possibly 'undefined'. L103:9: 'count' is possibly 'undefined'. src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte (5) L105:20: 'distance' is possibly 'null'. L105:31: 'workflowDistance' is possibly 'null'. L116:20: 'distance' is possibly 'null'. L116:31: 'workflowDistance' is possibly 'null'. L252:12: 'pendingActivity.attempt' is possibly 'null' or 'undefined'. src/lib/components/lines-and-dots/svg/workflow-row.svelte (2) L48:26: Type 'WorkflowStatus' is not assignable to type 'string \| undefined'. L58:24: Type 'WorkflowStatus' is not assignable to type 'string \| undefined'.

Generated by 🚫 dangerJS against d5c7186

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 <[email protected]>

EventClassification union doesn't include 'Retrying' -- only the i18n key exists. The lookup entry was unreachable. Co-Authored-By: Claude Opus 4.6 <[email protected]>

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 <[email protected]>

The status/classification -> translated-label mapping existed inline in workflow-status.svelte and was duplicated by the two new lookup tables added for the timeline-graph aria-labels (workflow-row, history-graph-row-visual). Extract the canonical map into $lib/utilities/get-status-label and reuse it in all three call sites so there is a single source of truth. No behavior change: the helper map is a verbatim copy of the canonical Record<Status, string>; the history graph normalizes its lowercase 'pending'/'retrying' values to the PascalCase Status union for lookup while leaving `classification` untouched for styling. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

timeline-graph-row's <g role="button"> contained only SVG primitives and <Text> (whose accessible-name contribution is unreliable across screen readers), so it announced as bare "button" — the same defect this PR fixes on workflow-row and history-graph-row-visual. Add an aria-label via the shared getStatusLabel helper. group-details-row's <g role="button"> is intentionally left for a separate fix: it wraps foreignObject HTML (already name-contributing) and nested interactive elements, so it needs a nested-interactive restructure rather than an aria-label that would mask its content. A11y-Audit-Ref: 1.4.1-timeline-graph-status Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

- Unit test for the shared getStatusLabel helper (workflow statuses, event classifications, pending/retrying, and the Unknown fallback). - Integration test asserting the timeline graph's SVG <g role="button"> nodes expose accessible names: the workflow node ("Workflow <id>: Running") and event nodes ("Event LongActivity: Scheduled", "Event customSignal: Signaled"). Verified red — the assertions fail if the aria-label regresses. history-graph-row-visual shares the same getStatusLabel + events.row-accessible-name mechanism (covered by the unit test and the identical timeline-graph-row path); its /history graph view did not render nodes deterministically in the integration harness. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

Avoid collisions between workflow statuses and event classifications that share a name (Running, Completed, Failed, Canceled, Terminated, TimedOut). The previous single combined map silently merged them and routed event nodes through the workflows.* namespace, so a future divergence between workflows.completed and events.event-classification.completed would have mislabeled event nodes. Now expose two domain-scoped resolvers, each backed by an exhaustive Record over its own union (so a new status in either domain forces a label): - getWorkflowStatusLabel -> workflows.* (workflow-row) - getEventClassificationLabel -> events.event-classification.* (history-graph-row-visual, timeline-graph-row) getStatusLabel remains as the polymorphic resolver for WorkflowStatus.svelte, which renders one badge for any status type and cannot know the domain from the value; it prefers the workflow label on shared names, preserving that component's existing behavior. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

ardiewen · 2026-06-03T20:08:40Z

`getStatusLabel` split + workflow/event status overlap

Extracting the shared label helper surfaced that 6 status names already overlap between WorkflowStatus and EventClassification: Running, Completed, Failed, Canceled, Terminated, TimedOut. They're identical English today but live in separate i18n namespaces (workflows.* vs events.event-classification.*), so a future change to one could silently mislabel the other domain.

Handled in d5c7186d:

Domain resolvers (exhaustive over their own union): getWorkflowStatusLabel → workflows.* (workflow-row), getEventClassificationLabel → events.event-classification.* (graph event nodes).
getStatusLabel stays polymorphic for WorkflowStatus.svelte only — it renders one badge for any status (workflow/schedule/classification) and sees a bare string at runtime. On the 6 overlaps it prefers the workflow label, preserving existing behavior.

Covered by get-status-label.test.ts + timeline-graph-accessible-names.spec.ts.

@laurakwhit or @Alex-Tideman , do either one of you know why these lines represent some Workflow Statuses and Some EventClassification with overlap and aren't separated into their own translation domains?

Auto-generated version bump from 2.51.0 to 2.51.1 Specific version: 2.51.1 Changes included: - [`c848ec54`](c848ec5) fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1) (#3443) - [`af6b12a9`](af6b12a) fix(deployments): align version/status/compute badges in worker deployments table (#3489) - [`df86587c`](df86587) Add SDK version to standalone activity details (#3447) - [`59695290`](5969529) Use shared FilterBar component for workflows (#3448) - [`ded94469`](ded9446) Set display contents in wrapper div if no afterLabel in Input component (#3513) - [`d7e5eb43`](d7e5eb4) fix(standalone-activities): decode failure encodedAttributes in activity detail (#3507) - [`81a255a9`](81a255a) fix(DT-4151): fix bottom nav scrollability and double-menu on mobile (#3514) - [`368f646e`](368f646) Fix exports to work properly with vite8 (#3519) - [`231bdaff`](231bdaf) chore(deps-dev): bump vitest from 3.2.4 to 3.2.6 (#3509) - [`1de44ea6`](1de44ea) fix(workers): soften no-workers-polling alert for serverless worker deployments (#3524) - [`689955a8`](689955a) fix(DT-4080): surface error when validate connection has no compute config, warn on set current (#3516) - [`93323db9`](93323db) feat(DT-4078): Add Set Ramping Version to Worker Deployment Versions (#3508) - [`9d3450c0`](9d3450c) fix(DT-4081): surface task queue not registered error in validate connection modal (#3517) - [`b7f56237`](b7f5623) feat(DT-4079): miscellaneous WD UI fixes (#3511) - [`83b2d4ec`](83b2d4e) feat(deployments): simplify create worker deployment UX (#3518) - [`ccb4cb73`](ccb4cb7) Standalone Activity write guards (#3534) - [`ab20ef03`](ab20ef0) Worker insights UI updates (#3520) - [`aaf63bdc`](aaf63bd) [wcag] Replace text-[12px] with text-xs in DatePicker action buttons (SC 1.4.4) (#3525) - [`743be902`](743be90) a11y(2.4.3): replace flex-wrap-reverse with flex-wrap on workflow history toolbar (#3527) - [`41b73e87`](41b73e8) a11y(2.4.2): ui-main — set distinct, descriptive titles on login/signin, task-queues list, and activity-workers sub-tab (#3535) - [`3d64cdbf`](3d64cdb) [WCAG 2.4.3] group-details-row — remove redundant outer focus stop on <g> wrapper (#3537) - [`883e5db1`](883e5db) a11y(2.4.6): datepicker — replace empty label with translate('common.start') (#3543) - [`9da915e2`](9da915e) a11y(2.4.5): import history — add back-link to Import landing page (#3542) - [`ca4c1d61`](ca4c1d6) Cache new Intl.DateTimeFormat (#3565) - [`38376e4d`](38376e4) Fix required activity timeout inputs on Start a Standalone Activity form (#3567) - [`49d7c9e4`](49d7c9e) Use separate copy for title vs menu item (#3568) - [`3c7dcdc3`](3c7dcdc) a11y(2.5.8): pagination — grow caret buttons from 12×12 to 24×24 CSS px (#3547) - [`b5171825`](b517182) a11y(2.5.8): chip — pad remove button to 24×24 CSS px minimum (#3544) - [`1fea5d5c`](1fea5d5) a11y(2.1.1): fake-button widgets — replace deprecated onkeypress with onkeydown handling Enter and Space (#3528) - [`5bf09000`](5bf0900) a11y(2.1.1): navigation primitives — replace hover-only CSS :after label tooltip with focusable Tooltip (#3529) - [`deed43f0`](deed43f) a11y(2.1.1): event summary row — add keyboard-accessible expand control alongside the mouse-only <tr onclick> (#3526) - [`d401123e`](d401123) a11y(2.5.8): checkbox — add min-h-6 min-w-6 to Label for 24×24 hit area (#3545) - [`aef4166f`](aef4166) [a11y] Expose toggled state via aria-pressed on ToggleButton (#3559) - [`797f8831`](797f883) Show single attempt in Standalone Activity details (#3572) - [`893bc58c`](893bc58) feat(DT-4183): Add Tabs (Primitive) (#3574) - [`323c1993`](323c199) Date picker input field bug/kt (#3522) - [`3ac34ce2`](3ac34ce) Various serverless UI updates (#3573) - [`f365416a`](f365416) a11y(2.1.1): ZoomSvg — add keyboard pan/zoom controls so the workflow family tree is operable without a mouse (#3530) - [`feb6897e`](feb6897) Fix gaps in slot cards on worker details page (#3580) - [`b3c80072`](b3c8007) Remove font weight on cache size (#3583) - [`0e7337ea`](0e7337e) Bump API to v1.62.14 (#3575) Co-authored-by: laurakwhit <[email protected]>

bilal-karim requested a review from a team as a code owner May 22, 2026 16:40

vercel Bot deployed to Preview May 22, 2026 16:48 View deployment

chore: remove unused Retrying key from classification lookup

2e38095

EventClassification union doesn't include 'Retrying' -- only the i18n key exists. The lookup entry was unreachable. Co-Authored-By: Claude Opus 4.6 <[email protected]>

vercel Bot deployed to Preview May 22, 2026 16:51 View deployment

vercel Bot deployed to Preview May 22, 2026 16:57 View deployment

github-actions Bot added a11y Accessibility audit PR a11y:no-fix-doc No A11y-Audit-Ref line; audit team triage a11y:bucket-3 Bucket 3: engineer required a11y:sc-1.4.1 and removed a11y:no-fix-doc No A11y-Audit-Ref line; audit team triage labels May 28, 2026

ardiewen and others added 4 commits June 3, 2026 15:33

vercel Bot deployed to Preview June 3, 2026 20:03 View deployment

ardiewen requested review from Alex-Tideman and laurakwhit June 3, 2026 20:11

ardiewen approved these changes Jun 4, 2026

View reviewed changes

bilal-karim merged commit c848ec5 into main Jun 4, 2026
20 checks passed

bilal-karim deleted the a11y/1.4.1-timeline-graph-aria-labels branch June 4, 2026 20:41

This was referenced Jun 22, 2026

chore: bump version to 2.52.0 #3586

Closed

chore: bump version to 2.51.1 #3587

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1)#3443

fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1)#3443
bilal-karim merged 8 commits into
mainfrom
a11y/1.4.1-timeline-graph-aria-labels

bilal-karim commented May 22, 2026 •

edited by ardiewen

Loading

Uh oh!

vercel Bot commented May 22, 2026 •

edited

Loading

Uh oh!

temporal-cicd Bot commented May 22, 2026 •

edited

Loading

Uh oh!

ardiewen commented Jun 3, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

bilal-karim commented May 22, 2026 • edited by ardiewen Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Audit context

Cross-cutting wins

New i18n keys

Test plan

Uh oh!

vercel Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

temporal-cicd Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ardiewen commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

getStatusLabel split + workflow/event status overlap

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

bilal-karim commented May 22, 2026 •

edited by ardiewen

Loading

vercel Bot commented May 22, 2026 •

edited

Loading

temporal-cicd Bot commented May 22, 2026 •

edited

Loading

ardiewen commented Jun 3, 2026 •

edited

Loading

`getStatusLabel` split + workflow/event status overlap