fix/tabs-f1-scroll

frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte

@@ -6,6 +6,41 @@
 
 	// Group local shortcuts
 	let localShortcuts = $derived($store.shortcuts);
+
+	let globalList: HTMLDivElement;
+	let localList: HTMLDivElement;
+	let modalRef: HTMLDivElement;
+
+	function handleArrowScroll(event: KeyboardEvent, target: HTMLDivElement) {
+		if (!target) return;
+		if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+			event.preventDefault();
+			const delta = event.key === 'ArrowDown' ? 32 : -32;
+			target.scrollTop += delta;
+		}
+	}
+
+	function handleFocusTrap(event: KeyboardEvent) {
+		if (event.key !== 'Tab' || !modalRef) return;
+		const focusable = modalRef.querySelectorAll<HTMLElement>(
+			'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+		);
+		const focusables = Array.from(focusable).filter(
+			(el) => !el.hasAttribute('disabled') && el.tabIndex !== -1 && el.offsetParent !== null
+		);
+		if (focusables.length === 0) return;
+		const first = focusables[0];
+		const last = focusables[focusables.length - 1];
+		const active = document.activeElement as HTMLElement;
+
+		if (!event.shiftKey && active === last) {
+			event.preventDefault();
+			first.focus();
+		} else if (event.shiftKey && active === first) {
+			event.preventDefault();
+			last.focus();
+		}
+	}
 </script>
 
 {#if open}
@@ -15,7 +50,9 @@
 		aria-modal="true"
 	>
 		<div
-			class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-2xl dark:bg-gray-900 text-gray-900 dark:text-gray-100"
+			class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-2xl dark:bg-gray-900 text-gray-900 dark:text-gray-100 max-h-[80vh] overflow-y-auto"
+			bind:this={modalRef}
+			onkeydown={handleFocusTrap}
 		>
 			<div
 				class="mb-6 flex items-center justify-between border-b border-gray-200 pb-4 dark:border-gray-800"
@@ -49,7 +86,12 @@
 					>
 						Global Navigation (Alt)
 					</h3>
-					<div class="space-y-2">
+					<div
+						class="space-y-2 max-h-64 overflow-y-auto pr-1"
+						bind:this={globalList}
+						tabindex="0"
+						onkeydown={(event) => handleArrowScroll(event, globalList)}
+					>
 						{#each Object.entries(GLOBAL_CONF) as [key, route]}
 							<div
 								class="flex items-center justify-between rounded bg-gray-50 px-3 py-2 dark:bg-gray-800/50"
@@ -80,7 +122,12 @@
 					{#if localShortcuts.length === 0}
 						<p class="text-sm italic text-gray-400">No specific actions for this view.</p>
 					{:else}
-						<div class="space-y-2">
+						<div
+							class="space-y-2 max-h-64 overflow-y-auto pr-1"
+							bind:this={localList}
+							tabindex="0"
+							onkeydown={(event) => handleArrowScroll(event, localList)}
+						>
 							{#each localShortcuts as shortcut}
 								<div
 									class="flex items-center justify-between rounded bg-blue-50 px-3 py-2 dark:bg-blue-900/20"