From a0930b62b0c0fb0e0700359875cc2ad8c34e8e9d Mon Sep 17 00:00:00 2001 From: Marcel Date: Mon, 8 Jun 2026 23:25:34 +0200 Subject: [PATCH] test(typeselector): add keyboard navigation tests for ArrowRight/ArrowLeft Verifies radioGroupNav action moves selection forward and wraps backward so keyboard users can navigate the STORY/JOURNEY cards without a mouse. Co-Authored-By: Claude Sonnet 4.6 --- .../new/TypeSelector.svelte.spec.ts | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts b/frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts index 8ddaa362..2c36b34d 100644 --- a/frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts +++ b/frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts @@ -96,4 +96,27 @@ describe('TypeSelector', () => { await expect.element(page.getByText(/Bitte wähle einen Typ/i)).toBeVisible(); }); + + it('ArrowRight moves focus and selection from STORY to JOURNEY', async () => { + render(TypeSelector, { props: { onweiter: vi.fn() } }); + + const storyCard = page.getByRole('radio', { name: /Geschichte/i }); + await storyCard.focus(); + await userEvent.keyboard('{ArrowRight}'); + + const journeyCard = page.getByRole('radio', { name: /Lesereise/i }); + await expect.element(journeyCard).toHaveAttribute('aria-checked', 'true'); + await expect.element(storyCard).toHaveAttribute('aria-checked', 'false'); + }); + + it('ArrowLeft wraps from STORY back to JOURNEY', async () => { + render(TypeSelector, { props: { onweiter: vi.fn() } }); + + const storyCard = page.getByRole('radio', { name: /Geschichte/i }); + await storyCard.focus(); + await userEvent.keyboard('{ArrowLeft}'); + + const journeyCard = page.getByRole('radio', { name: /Lesereise/i }); + await expect.element(journeyCard).toHaveAttribute('aria-checked', 'true'); + }); });