From b5714c31b06e56c833c41792830428657e21192f Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Wed, 10 Jun 2026 17:18:33 -0400
Subject: [PATCH 1/2] a11y(2.1.1): replace hover-only CSS :after nav tooltips
 with Tooltip primitive

The CSS :after / data-tooltip pattern on the three nav primitives fired only
on :hover with no :focus companion, making labels invisible to keyboard users
in the collapsed rail. Replace all three with the Tooltip component (right,
hide={$navOpen}) so labels appear on focus, are linked via aria-describedby,
and are dismissible with Escape.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/holocene/navigation/navigation-badge.svelte | 12 ++++++++----
 .../holocene/navigation/navigation-button.svelte    | 13 ++++++++-----
 src/lib/holocene/navigation/navigation-item.svelte  | 11 +++++++----
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/lib/holocene/navigation/navigation-badge.svelte b/src/lib/holocene/navigation/navigation-badge.svelte
index a04e283a5a..41c28a4392 100644
--- a/src/lib/holocene/navigation/navigation-badge.svelte
+++ b/src/lib/holocene/navigation/navigation-badge.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { IconName } from '../icon';
   import Icon from '../icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { navOpen } from '$lib/stores/nav-open';
 
   export let icon: IconName;
   export let link: string;
@@ -25,14 +27,16 @@
     {target}
     class="relative flex cursor-pointer items-center border border-white/10 bg-white/5 text-white hover:bg-white hover:text-black group-data-[nav=closed]:p-1 group-data-[nav=open]:px-2.5 group-data-[nav=open]:py-2"
   >
-    <div
-      class="flex h-6 w-6 items-center whitespace-nowrap after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=open]:hidden group-data-[nav=open]:justify-start group-data-[nav=closed]:justify-center group-data-[nav=closed]:hover:after:flex"
-      data-tooltip={tooltip}
+    <Tooltip
+      text={tooltip}
+      right
+      hide={$navOpen}
+      class="flex h-6 w-6 items-center whitespace-nowrap group-data-[nav=open]:hidden group-data-[nav=closed]:justify-center"
     >
       {#if icon}
         <Icon name={icon} />
       {/if}
-    </div>
+    </Tooltip>
     <div
       class="text-center group-data-[nav=open]:visible group-data-[nav=closed]:hidden"
     >
diff --git a/src/lib/holocene/navigation/navigation-button.svelte b/src/lib/holocene/navigation/navigation-button.svelte
index 30ff54765e..cd5071e1f2 100644
--- a/src/lib/holocene/navigation/navigation-button.svelte
+++ b/src/lib/holocene/navigation/navigation-button.svelte
@@ -4,6 +4,8 @@
   import type { IconName } from '$lib/holocene/icon';
 
   import Icon from '../icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
+  import { navOpen } from '$lib/stores/nav-open';
 
   export let onClick: () => void = () => {};
   export let label: string;
@@ -32,13 +34,14 @@
   )}
 >
   {#if icon}
-    <div
-      class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
-      data-tooltip={tooltip}
-      aria-hidden="true"
+    <Tooltip
+      text={tooltip}
+      right
+      hide={$navOpen}
+      class="flex h-6 w-6 items-center"
     >
       <Icon name={icon} {animate} {active} />
-    </div>
+    </Tooltip>
   {/if}
   <div class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100">
     {label}
diff --git a/src/lib/holocene/navigation/navigation-item.svelte b/src/lib/holocene/navigation/navigation-item.svelte
index 0907df951b..2b47e4dae8 100644
--- a/src/lib/holocene/navigation/navigation-item.svelte
+++ b/src/lib/holocene/navigation/navigation-item.svelte
@@ -5,6 +5,7 @@
 
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Tooltip from '$lib/holocene/tooltip.svelte';
   import { navOpen } from '$lib/stores/nav-open';
 
   export let link: string;
@@ -48,12 +49,14 @@
     class:text-disabled={disabled}
   >
     {#if icon}
-      <div
-        class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
-        data-tooltip={tooltip}
+      <Tooltip
+        text={tooltip}
+        right
+        hide={$navOpen}
+        class="flex h-6 w-6 items-center"
       >
         <Icon name={icon} {animate} />
-      </div>
+      </Tooltip>
     {/if}
     <div
       class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100"

From 5f9130fcd0c7e63b3c5d084af0dc121a2ba68825 Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Thu, 11 Jun 2026 11:22:31 -0400
Subject: [PATCH 2/2] fix: import order in navigation-badge and
 navigation-button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/holocene/navigation/navigation-badge.svelte  | 5 +++--
 src/lib/holocene/navigation/navigation-button.svelte | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/holocene/navigation/navigation-badge.svelte b/src/lib/holocene/navigation/navigation-badge.svelte
index 41c28a4392..9fa2692501 100644
--- a/src/lib/holocene/navigation/navigation-badge.svelte
+++ b/src/lib/holocene/navigation/navigation-badge.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import type { IconName } from '../icon';
-  import Icon from '../icon/icon.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { navOpen } from '$lib/stores/nav-open';
 
+  import type { IconName } from '../icon';
+  import Icon from '../icon/icon.svelte';
+
   export let icon: IconName;
   export let link: string;
   export let tooltip: string = '';
diff --git a/src/lib/holocene/navigation/navigation-button.svelte b/src/lib/holocene/navigation/navigation-button.svelte
index cd5071e1f2..e9362cb86c 100644
--- a/src/lib/holocene/navigation/navigation-button.svelte
+++ b/src/lib/holocene/navigation/navigation-button.svelte
@@ -2,11 +2,11 @@
   import { twMerge as merge } from 'tailwind-merge';
 
   import type { IconName } from '$lib/holocene/icon';
-
-  import Icon from '../icon/icon.svelte';
   import Tooltip from '$lib/holocene/tooltip.svelte';
   import { navOpen } from '$lib/stores/nav-open';
 
+  import Icon from '../icon/icon.svelte';
+
   export let onClick: () => void = () => {};
   export let label: string;
   export let icon: IconName | undefined = undefined;