jakob48/crumbs
1
0
Fork 0
forked from mirror/crumbs-original
Code Pull Requests Activity

feat: arrow key navigation between checklist items

Browse Source 
ArrowUp/ArrowDown move focus between active checklist inputs.
At list boundaries, focus stays on the current item (no wrap).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-21 10:17:58 +01:00
committed by Fred Cabassut
co-authored by Claude Opus 4.6
parent d7334c3cb8
commit f1e4dd7175
2 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Checklist.svelte
+8
View File
@@ -102,6 +102,14 @@
const inputs = document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]');
inputs[Math.max(0, index - 1)]?.focus();
}, 0);
} else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
const inputs = Array.from(document.querySelectorAll<HTMLInputElement>('[data-testid="checklist-input"]'));
const current = inputs.findIndex((el) => el.dataset.itemId === id);
const target = e.key === 'ArrowUp' ? current - 1 : current + 1;
if (target >= 0 && target < inputs.length) {
e.preventDefault();
inputs[target].focus();
}
}
}
tests/e2e/checklist.spec.ts
+30
View File
@@ -99,6 +99,36 @@ test.describe('Checklist', () => {
await expect(page.getByTestId('checklist-input').nth(1)).toHaveValue('');
});
test('Scenario: Arrow keys navigate between checklist items', async ({ authenticatedPage: page }) => {
// Given a checklist with three items
await page.getByTestId('new-note-btn').click();
await page.getByTestId('checklist-toggle').click();
await page.getByTestId('checklist-input').first().fill('First');
await page.getByTestId('checklist-input').first().press('Enter');
await page.getByTestId('checklist-input').nth(1).fill('Second');
await page.getByTestId('checklist-input').nth(1).press('Enter');
await page.getByTestId('checklist-input').nth(2).fill('Third');
// When the user presses ArrowUp from the third item
await page.getByTestId('checklist-input').nth(2).press('ArrowUp');
// Then focus moves to the second item
await expect(page.getByTestId('checklist-input').nth(1)).toBeFocused();
// When the user presses ArrowDown
await page.getByTestId('checklist-input').nth(1).press('ArrowDown');
// Then focus moves back to the third item
await expect(page.getByTestId('checklist-input').nth(2)).toBeFocused();
// When the user presses ArrowUp from the first item
await page.getByTestId('checklist-input').nth(0).focus();
await page.getByTestId('checklist-input').nth(0).press('ArrowUp');
// Then focus stays on the first item (no wrap)
await expect(page.getByTestId('checklist-input').nth(0)).toBeFocused();
});
test('Scenario: Backspace on empty item removes it from the list', async ({ authenticatedPage: page }) => {
// Given a checklist with two items where the second is empty
await page.getByTestId('new-note-btn').click();