ADUANASOFT/plantillas-proyectos
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'fix/tabs-f1-scroll' (#110) from fix/tabs-f1-scroll into feature/nav-tab-client-provider

Browse Source 
Reviewed-on: ADUANASOFT/anexo76#110
This commit is contained in:
acazares
2026-02-09 16:38:07 +00:00
parent d3d42bb0fa 60cea56370
commit 546ad5de7c
1 changed files with 50 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/lib/components/keyboard/ShortcutsHelpModal.svelte
View File

@@ -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"