0.16.1: welcome screen arrow-key navigation

Up/Down arrow keys now move focus through the recents list in the
welcome dialog; Home/End jump to the first/last entry. Tab / Enter
/ Space behaviour is untouched — arrows are additive. Covered by
two UI tests (arrow roundtrip + Home/End) that poll for the async
IDB load instead of a fixed delay.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.7 committed 2026-04-24 10:29:07 +02:00
1 parent fcfd21428d
commit baf775c8de
4 files changed
+137 -2

No files matched your search

+27
View File
@@ -80,6 +80,32 @@ function openProject(p: StoredProject) {
emit('update:modelValue', false)
}
/** Move focus through the recents list using the arrow keys. Keeps
* Tab working as usual — arrow nav is just a more natural shortcut
* for picking from a list. */
function focusRecent(index: number) {
const list = recentRefs.value
if (!list.length) return
const clamped = Math.max(0, Math.min(index, list.length - 1))
list[clamped]?.focus()
}
function onRecentKeyDown(e: KeyboardEvent, index: number) {
if (e.key === 'ArrowDown') {
e.preventDefault()
focusRecent(index + 1)
} else if (e.key === 'ArrowUp') {
e.preventDefault()
focusRecent(index - 1)
} else if (e.key === 'Home') {
e.preventDefault()
focusRecent(0)
} else if (e.key === 'End') {
e.preventDefault()
focusRecent(recentRefs.value.length - 1)
}
}
async function removeProject(e: MouseEvent, p: StoredProject) {
e.stopPropagation()
const ok = await confirmDialog({
@@ -150,6 +176,7 @@ watch(
@click="openProject(p)"
@keydown.enter.prevent="openProject(p)"
@keydown.space.prevent="openProject(p)"
@keydown="onRecentKeyDown($event, i)"
>
<div class="thumb">
<img v-if="p.thumbnail" :src="p.thumbnail" alt="" />