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

src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { translate } from '$lib/i18n/translate';
   import type {
     EventGroup,
     EventGroups,
@@ -69,9 +70,65 @@
         : (undefined as EventTypeCategory | 'pending' | undefined),
   );
   const reverseSort = $derived($eventFilterSort === 'descending');
+
+  const CLASSIFICATION_LABEL_KEY = {
+    Unspecified: 'events.event-classification.unspecified',
+    Scheduled: 'events.event-classification.scheduled',
+    Open: 'events.event-classification.open',
+    New: 'events.event-classification.new',
+    Started: 'events.event-classification.started',
+    Initiated: 'events.event-classification.initiated',
+    Running: 'events.event-classification.running',
+    Completed: 'events.event-classification.completed',
+    Fired: 'events.event-classification.fired',
+    CancelRequested: 'events.event-classification.cancelrequested',
+    TimedOut: 'events.event-classification.timedout',
+    Signaled: 'events.event-classification.signaled',
+    Canceled: 'events.event-classification.canceled',
+    Failed: 'events.event-classification.failed',
+    Terminated: 'events.event-classification.terminated',
+    pending: 'events.event-classification.pending',
+    retrying: 'events.event-classification.retrying',
+  } as const;
+
+  const isRetrying = $derived(
+    !!group?.pendingActivity && Number(group.pendingActivity.attempt) > 1,
+  );
+
+  const labelClassification = $derived(
+    isRetrying ? 'retrying' : classification,
+  );
+
+  const classificationLabel = $derived(
+    labelClassification && labelClassification in CLASSIFICATION_LABEL_KEY
+      ? translate(
+          CLASSIFICATION_LABEL_KEY[
+            labelClassification as keyof typeof CLASSIFICATION_LABEL_KEY
+          ],
+        )
+      : translate('common.unknown'),
+  );
+
+  const eventTypeLabel = $derived(
+    event && 'eventType' in event
+      ? event.eventType
+      : translate('common.unknown'),
+  );
+
+  const accessibleName = $derived(
+    translate('events.row-accessible-name', {
+      eventType: eventTypeLabel,
+      classification: classificationLabel,
+    }),
+  );
 </script>
 
-<g role="button" tabindex="0" class="relative cursor-pointer">
+<g
+  role="button"
+  tabindex="0"
+  aria-label={accessibleName}
+  class="relative cursor-pointer"
+>
   {#if connectLine}
     <Line
       startPoint={[canvasWidth, y]}

src/lib/components/lines-and-dots/svg/workflow-row.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import { translate } from '$lib/i18n/translate';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { isWorkflowDelayed } from '$lib/utilities/delayed-workflows';
 
@@ -20,9 +21,41 @@
 
   const start = $derived(gutter);
   const end = $derived(start + length - 2 * gutter);
+
+  const STATUS_LABEL_KEY = {
+    Running: 'workflows.running',
+    TimedOut: 'workflows.timed-out',
+    Completed: 'workflows.completed',
+    Failed: 'workflows.failed',
+    ContinuedAsNew: 'workflows.continued-as-new',
+    Canceled: 'workflows.canceled',
+    Terminated: 'workflows.terminated',
+    Paused: 'workflows.paused',
+  } as const;
+
+  const statusLabel = $derived(
+    workflow.status && workflow.status in STATUS_LABEL_KEY
+      ? translate(
+          STATUS_LABEL_KEY[workflow.status as keyof typeof STATUS_LABEL_KEY],
+        )
+      : translate('common.unknown'),
+  );
+
+  const accessibleName = $derived(
+    translate('workflows.row-accessible-name', {
+      workflowId: workflow.id,
+      status: statusLabel,
+    }),
+  );
 </script>
 
-<g role="button" tabindex="0" class="relative cursor-pointer" {height}>
+<g
+  role="button"
+  tabindex="0"
+  aria-label={accessibleName}
+  class="relative cursor-pointer"
+  {height}
+>
   <Line
     startPoint={[start, y]}
     endPoint={[end, y]}

src/lib/i18n/locales/en/events.ts

@@ -66,6 +66,7 @@ export const Strings = {
   'event-history-import-error': 'Could not create event history from JSON',
   'event-history-load-error': 'Could not parse JSON',
   'event-classification-label': 'Event Classification',
+  'row-accessible-name': 'Event {{eventType}}: {{classification}}',
   'event-classification': {
     unspecified: 'Unspecified',
     scheduled: 'Scheduled',

src/lib/i18n/locales/en/workflows.ts

@@ -41,6 +41,7 @@ export const Strings = {
   'configure-headers-description':
     'Add (<1></1>), re-arrange (<2></2>), and remove (<3></3>), {{type}} to personalize the {{title}} Table.',
   'all-statuses': 'All Statuses',
+  'row-accessible-name': 'Workflow {{workflowId}}: {{status}}',
   running: 'Running',
   'timed-out': 'Timed Out',
   completed: 'Completed',