From 622e0b4db62812122e3f21dbccecfbc897f610c1 Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Wed, 10 Jun 2026 17:08:25 -0400
Subject: [PATCH] a11y(2.1.1): replace deprecated onkeypress with onkeydown on
 fake-button widgets

keypress is deprecated and does not reliably fire for Space in Firefox;
pressing Space also scrolled the page before activating the widget. Replace
all three call sites with onkeydown handlers that match Enter and ' ',
call preventDefault() to suppress page scroll, and invoke the existing
click handler. Closes matrix defect (c).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lines-and-dots/svg/timeline-graph-row.svelte      |  9 ++++++++-
 .../relationships/workflow-family-node-tree.svelte    | 11 +++++++++--
 src/lib/holocene/navigation/navigation-button.svelte  |  9 ++++++++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
index 6af68644ad..6d895e239e 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
@@ -140,6 +140,13 @@
     setActiveGroup(group);
   };
 
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
   const onMouseEnter = () => {
     if (readOnly) return;
     hovering = true;
@@ -209,7 +216,7 @@
   tabindex="0"
   aria-label={accessibleName}
   onclick={onClick}
-  onkeypress={onClick}
+  onkeydown={onKeydown}
   onmouseenter={onMouseEnter}
   onmouseleave={onMouseLeave}
   class="relative cursor-pointer"
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte
index 16f3b06ccf..146b6edcdc 100644
--- a/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte
+++ b/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte
@@ -82,6 +82,13 @@
     onNodeClick(node, generation);
   };
 
+  const handleNodeKeydown = (event: KeyboardEvent, target: RootNode) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      nodeClick(event, target);
+    }
+  };
+
   $: isExpanded = (node: RootNode) => {
     const opened = openRuns.get(generation) === node.workflow.runId;
     return expandAll || opened;
@@ -166,7 +173,7 @@
     })}
     class="outline-none transition-all"
     on:click={(e) => nodeClick(e, child)}
-    on:keypress={(e) => nodeClick(e, child)}
+    on:keydown={(e) => handleNodeKeydown(e, child)}
   >
     {#if child?.children?.length && isExpanded(child)}
       <line
@@ -294,7 +301,7 @@
       status: root.workflow.status,
     })}
     on:click={(e) => nodeClick(e, root)}
-    on:keypress={(e) => nodeClick(e, root)}
+    on:keydown={(e) => handleNodeKeydown(e, root)}
   >
     {#if root?.scheduleId}
       <line
diff --git a/src/lib/holocene/navigation/navigation-button.svelte b/src/lib/holocene/navigation/navigation-button.svelte
index 30ff54765e..f357e119f2 100644
--- a/src/lib/holocene/navigation/navigation-button.svelte
+++ b/src/lib/holocene/navigation/navigation-button.svelte
@@ -14,12 +14,19 @@
   export let disabled = false;
   export let className = '';
   export { className as class };
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  };
 </script>
 
 <div
   role="button"
   on:click={onClick}
-  on:keypress={onClick}
+  on:keydown={handleKeydown}
   tabindex="0"
   data-testid={$$props['data-testid']}
   data-track-name="navigation-button"