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 <noreply@anthropic.com>
This commit is contained in:
@@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user