From 89860403f6ae42bf9e24d806d7db957755027581 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 12 May 2026 18:01:38 +0200
Subject: [PATCH] =?UTF-8?q?fix(notification):=20remove=20role=3Dlink=20fro?=
 =?UTF-8?q?m=20view-all=20button=20=E2=80=94=20restores=20semantically=20h?=
 =?UTF-8?q?onest=20button=20role?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The role=link override on a <button> creates a WCAG 4.1.2 keyboard-contract
mismatch: ARIA role=link tells AT users "press Enter to activate (Space does
nothing)", but the native <button> responds to both Enter and Space. Removes
the override so the element is announced as "button" (accurate).

Test selectors updated from getByRole('link') to getByRole('button')
accordingly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/notification/NotificationDropdown.svelte   |  1 -
 .../notification/NotificationDropdown.svelte.test.ts   | 10 +++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/notification/NotificationDropdown.svelte b/frontend/src/lib/notification/NotificationDropdown.svelte
index 412cef4f..363e4ee5 100644
--- a/frontend/src/lib/notification/NotificationDropdown.svelte
+++ b/frontend/src/lib/notification/NotificationDropdown.svelte
@@ -135,7 +135,6 @@ function handleViewAll() {
 	<div class="border-t border-line px-4 py-2">
 		<button
 			type="button"
-			role="link"
 			onclick={handleViewAll}
 			class="min-h-[44px] px-1 text-xs font-medium text-ink-2 transition-colors hover:text-ink"
 		>
diff --git a/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts b/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts
index 561ec96d..03e72e9d 100644
--- a/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts
+++ b/frontend/src/lib/notification/NotificationDropdown.svelte.test.ts
@@ -159,7 +159,7 @@ describe('NotificationDropdown', () => {
 		expect(onMarkAllRead).toHaveBeenCalledOnce();
 	});
 
-	it('calls onClose when the view-all link is clicked', async () => {
+	it('calls onClose when the view-all button is clicked', async () => {
 		const onClose = vi.fn();
 		render(NotificationDropdown, {
 			props: {
@@ -170,12 +170,12 @@ describe('NotificationDropdown', () => {
 			}
 		});
 
-		await page.getByRole('link', { name: /alle aktivitäten|view all/i }).click();
+		await page.getByRole('button', { name: /alle aktivitäten|view all/i }).click();
 
 		expect(onClose).toHaveBeenCalledOnce();
 	});
 
-	it('navigates to /aktivitaeten when the view-all link is clicked', async () => {
+	it('navigates to /aktivitaeten when the view-all button is clicked', async () => {
 		render(NotificationDropdown, {
 			props: {
 				notifications: [],
@@ -185,7 +185,7 @@ describe('NotificationDropdown', () => {
 			}
 		});
 
-		await page.getByRole('link', { name: /alle aktivitäten|view all/i }).click();
+		await page.getByRole('button', { name: /alle aktivitäten|view all/i }).click();
 
 		expect(goto).toHaveBeenCalledWith('/aktivitaeten');
 	});
@@ -203,7 +203,7 @@ describe('NotificationDropdown', () => {
 			}
 		});
 
-		await page.getByRole('link', { name: /alle aktivitäten|view all/i }).click();
+		await page.getByRole('button', { name: /alle aktivitäten|view all/i }).click();
 
 		expect(callOrder).toEqual(['close', 'goto']);
 	});