frontend/src/lib/document/DashboardNeedsMetadata.svelte.spec.ts

@@ -52,6 +52,6 @@ describe('DashboardNeedsMetadata', () => {
 	it('uses totalCount in the footer even when topDocs has fewer items', async () => {
 		const docs = [makeDoc('d1', 'Only one')];
 		render(DashboardNeedsMetadata, { topDocs: docs, totalCount: 50 });
-		await expect.element(page.getByRole('link', { name: /50/ })).toBeInTheDocument();
+		await expect.element(page.getByRole('link', { name: /Alle 50/ })).toBeInTheDocument();
 	});
 });

frontend/src/lib/shared/actions/radioGroupNav.ts

@@ -19,6 +19,7 @@ export function radioGroupNav(
 		const next = (current + delta + radios.length) % radios.length;
 
 		radios[next].focus();
+		radios.forEach((r, i) => r.setAttribute('aria-checked', i === next ? 'true' : 'false'));
 		onChangeFn?.(radios[next].getAttribute('value') ?? '');
 	}
 

frontend/src/routes/geschichten/[id]/page.svelte.test.ts

@@ -236,7 +236,7 @@ describe('geschichten/[id] page', () => {
 
 		// Trigger delete — opens confirm dialog
 		const deleteBtn = page.getByRole('button', { name: /löschen/i });
-		userEvent.click(deleteBtn);
+		await userEvent.click(deleteBtn);
 
 		// Settle the confirmation dialog
 		confirmService.settle(true);
@@ -262,7 +262,7 @@ describe('geschichten/[id] page', () => {
 
 		// Trigger delete — opens confirm dialog
 		const deleteBtn = page.getByRole('button', { name: /löschen/i });
-		userEvent.click(deleteBtn);
+		await userEvent.click(deleteBtn);
 
 		// Settle the confirmation dialog
 		confirmService.settle(true);

frontend/src/routes/geschichten/new/TypeSelector.svelte.spec.ts

@@ -85,8 +85,9 @@ describe('TypeSelector', () => {
 		const onweiter = vi.fn();
 		render(TypeSelector, { props: { onweiter } });
 
-		const weiter = page.getByRole('button', { name: /Weiter/i });
-		await userEvent.click(weiter);
+		// aria-disabled="true" prevents Playwright actionability — dispatch via DOM to test handler behaviour
+		const weiter = document.querySelector<HTMLButtonElement>('button[aria-disabled="true"]');
+		weiter?.click();
 
 		expect(onweiter).not.toHaveBeenCalled();
 	});
@@ -101,7 +102,7 @@ describe('TypeSelector', () => {
 		render(TypeSelector, { props: { onweiter: vi.fn() } });
 
 		const storyCard = page.getByRole('radio', { name: /Geschichte/i });
-		await storyCard.focus();
+		await userEvent.click(storyCard); // click focuses the card; .focus() is not on vitest-browser Locator
 		await userEvent.keyboard('{ArrowRight}');
 
 		const journeyCard = page.getByRole('radio', { name: /Lesereise/i });
@@ -113,7 +114,7 @@ describe('TypeSelector', () => {
 		render(TypeSelector, { props: { onweiter: vi.fn() } });
 
 		const storyCard = page.getByRole('radio', { name: /Geschichte/i });
-		await storyCard.focus();
+		await userEvent.click(storyCard); // click focuses the card; .focus() is not on vitest-browser Locator
 		await userEvent.keyboard('{ArrowLeft}');
 
 		const journeyCard = page.getByRole('radio', { name: /Lesereise/i });

frontend/src/test-setup.ts

@@ -1,3 +1,9 @@
+// Load global CSS so Tailwind utility classes (text-xs, min-h-[44px], etc.)
+// are compiled and applied in browser-mode tests. Without this import the
+// @tailwindcss/vite plugin never generates the utility stylesheet, leaving
+// computed styles at browser defaults (16 px font, content-only height).
+import './routes/layout.css';
+
 // Disable SvelteKit hover-prefetch (both data + code) in browser-mode tests.
 // ADR-012 / #553.
 //