Use focus manager for navigation context menus

Removes custom keyboard navigation for context menus, and replaces it 
with the new focus manager functionality. Note that ContextMenuItem 
contains two focusables, one for navigation and one to support f-keys.

Author: mtsgrd

packages/ui/src/lib/components/ContextMenu.svelte

@@ -329,13 +329,6 @@
 		return isVisible;
 	}
 
-	function handleKeyNavigation(e: KeyboardEvent) {
-		if (e.key === 'Escape') {
-			e.preventDefault();
-			close();
-		}
-	}
-
 	$effect(() => {
 		if (!menuContainer) return;
 		const config = { attributes: false, childList: true, subtree: true };
@@ -358,17 +351,26 @@
 </script>
 
 {#if isVisible}
-	<div class="portal-wrap" use:portal={'body'}>
-		<!-- svelte-ignore a11y_autofocus -->
+	<!-- `use:focusable` must come before `use:portal`-->
+	<div
+		class="portal-wrap"
+		use:focusable={{
+			activate: true,
+			dim: true,
+			trap: true,
+			onEsc: () => {
+				close();
+				return true;
+			}
+		}}
+		use:portal={'body'}
+	>
 		<div
 			data-testid={testId}
 			bind:this={menuContainer}
 			tabindex="-1"
-			use:focusable={{ activate: true, isolate: true, focusable: true, dim: true, trap: true }}
-			autofocus
 			{onclick}
 			{onkeypress}
-			onkeydown={handleKeyNavigation}
 			class="context-menu hide-native-scrollbar"
 			class:top-oriented={side === 'top'}
 			class:bottom-oriented={side === 'bottom'}

packages/ui/src/lib/components/ContextMenuItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Icon from '$components/Icon.svelte';
 	import Tooltip from '$components/Tooltip.svelte';
+	import { focusable } from '$lib/focus/focusable';
 	import { keysStringToArr } from '$lib/utils/hotkeys';
 	import { getContext } from 'svelte';
 	import type iconsJson from '@gitbutler/ui/data/icons.json';
@@ -20,6 +21,7 @@
 		onclick: (e: MouseEvent) => void;
 		testId?: string;
 		tooltip?: string;
+		autofocus?: boolean;
 	}
 
 	const {
@@ -32,7 +34,8 @@
 		keyboardShortcut,
 		caption,
 		testId,
-		tooltip
+		tooltip,
+		autofocus
 	}: Props = $props();
 
 	// Get submenu coordination context if available
@@ -62,14 +65,15 @@
 	<button
 		data-testid={testId}
 		type="button"
-		class="menu-item focus-state no-select"
+		class="menu-item no-select"
 		style:--item-height={caption ? 'auto' : '1.625rem'}
 		class:disabled
 		{disabled}
 		onclick={handleClick}
 		onmouseenter={handleMouseEnter}
+		use:focusable={{ focusable: true }}
 	>
-		<div class="menu-item__content">
+		<div class="menu-item__content" use:focusable={{ button: true, activate: autofocus }}>
 			{#if icon}
 				<div class="menu-item__icon">
 					<Icon name={icon} />
@@ -119,6 +123,7 @@
 		padding: 6px 8px;
 		gap: 4px;
 		border-radius: var(--radius-s);
+		outline: none;
 		color: var(--clr-text-1);
 		text-align: left;
 		cursor: pointer;

packages/ui/src/lib/focus/focusManager.ts

@@ -173,7 +173,7 @@ export class FocusManager {
 		}
 
 		if (options.activate) {
-			this.setActiveNode(newNode);
+			this.setActiveNode(this.findNavigableDescendant(newNode));
 		}
 	}