From c46b8b9906a8e98a63076b0df04152be96f5dd9c Mon Sep 17 00:00:00 2001
From: Bilal Karim <4129613+bilal-karim@users.noreply.github.com>
Date: Mon, 25 May 2026 21:09:01 -0400
Subject: [PATCH] fix(a11y): add focusin/focusout to saved-query nav hover
 tooltip (WCAG 2.1.1)

The saved-query nav rail (saved-query-views.svelte) and its
standalone-activities sibling (saved-views.svelte) render query
buttons inside wrappers with mouse-only handlers
(onmouseenter/onmousemove/onmouseleave). When the rail is
collapsed, query-button labels are truncated; mouse users see
the full label in the floating tooltip but keyboard users
tabbing through the rail see only the icons.

Add onfocusin/onfocusout alongside the existing mouse handlers
so the same onQueryBtnEnter/onQueryBtnLeave callbacks fire on
keyboard focus. focusin/focusout bubble from descendants -- the
wrapper has tabindex=-1 so focus on the inner <Button> bubbles
to the wrapper where the handlers are attached.

Widens handler signatures to MouseEvent | FocusEvent. Pattern
matches the established mouse+focus pairing in three Holocene
table-body-cell consumers (workflows, activities, workers).

Existing $savedQueryNavOpen guard preserved -- expanded nav
state shows no tooltip on focus (matching today's mouse
behavior).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../standalone-activities/saved-views.svelte         |  6 ++++--
 src/lib/pages/saved-query-views.svelte               | 12 ++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/standalone-activities/saved-views.svelte b/src/lib/components/standalone-activities/saved-views.svelte
index b7fbc67982..05dab00dc2 100644
--- a/src/lib/components/standalone-activities/saved-views.svelte
+++ b/src/lib/components/standalone-activities/saved-views.svelte
@@ -227,7 +227,7 @@
     tooltipY = Math.round(rect.top + 16);
   };
 
-  const onQueryBtnEnter = (e: MouseEvent, name: string) => {
+  const onQueryBtnEnter = (e: MouseEvent | FocusEvent, name: string) => {
     if ($savedQueryNavOpen) return;
     const el = e.currentTarget as HTMLElement;
     tooltipText = name;
@@ -235,7 +235,7 @@
     showTooltip = true;
   };
 
-  const onQueryBtnMove = (e: MouseEvent) => {
+  const onQueryBtnMove = (e: MouseEvent | FocusEvent) => {
     if (!showTooltip) return;
     const el = e.currentTarget as HTMLElement;
     positionTooltipFrom(el);
@@ -364,6 +364,8 @@
     onmouseenter={(e) => onQueryBtnEnter(e, view.name)}
     onmousemove={onQueryBtnMove}
     onmouseleave={onQueryBtnLeave}
+    onfocusin={(e) => onQueryBtnEnter(e, view.name)}
+    onfocusout={onQueryBtnLeave}
   >
     <Button
       variant="ghost"
diff --git a/src/lib/pages/saved-query-views.svelte b/src/lib/pages/saved-query-views.svelte
index 95a5a8f832..5bce305524 100644
--- a/src/lib/pages/saved-query-views.svelte
+++ b/src/lib/pages/saved-query-views.svelte
@@ -225,7 +225,7 @@
     tooltipY = Math.round(rect.top + 16);
   };
 
-  const onQueryBtnEnter = (e: MouseEvent, name: string) => {
+  const onQueryBtnEnter = (e: MouseEvent | FocusEvent, name: string) => {
     if ($savedQueryNavOpen) return;
     const el = e.currentTarget as HTMLElement;
     tooltipText = name;
@@ -233,7 +233,7 @@
     showTooltip = true;
   };
 
-  const onQueryBtnMove = (e: MouseEvent) => {
+  const onQueryBtnMove = (e: MouseEvent | FocusEvent) => {
     if (!showTooltip) return;
     const el = e.currentTarget as HTMLElement;
     positionTooltipFrom(el);
@@ -373,6 +373,14 @@
       )}
     onmousemove={onQueryBtnMove}
     onmouseleave={onQueryBtnLeave}
+    onfocusin={(e) =>
+      onQueryBtnEnter(
+        e,
+        view.id === TASK_FAILURES_VIEW.id
+          ? `${view.name} • ${view.count ?? 0}`
+          : view.name,
+      )}
+    onfocusout={onQueryBtnLeave}
   >
     <Button
       variant="ghost"