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

[bilal-karim]

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

[vercel]

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]

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

[ardiewen]

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?