From 451904daeb0d345d0aeb9cceaf59072341d73927 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 26 Apr 2026 21:37:50 +0200
Subject: [PATCH] fix(pagination): hide mobile page label from AT tree with
 aria-hidden

The mobile 'Seite X von Y' span had aria-current='page', which created two
elements announcing the current page on wide screens: the hidden mobile label
and the active desktop button. On sm:+ screens the mobile span is display:none
(removed from AT tree), but on small screens both the span and the desktop
button were redundant.

Replace aria-current with aria-hidden='true' on the mobile label so AT always
relies on the desktop button's aria-current. Updates spec test accordingly and
adds a second assertion in a broader test context (Decision Queue #1).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/Pagination.svelte         |  3 ++-
 frontend/src/lib/components/Pagination.svelte.spec.ts | 11 +++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/Pagination.svelte b/frontend/src/lib/components/Pagination.svelte
index 45ba1ae5..8cde307a 100644
--- a/frontend/src/lib/components/Pagination.svelte
+++ b/frontend/src/lib/components/Pagination.svelte
@@ -95,9 +95,10 @@ const pageWindow = $derived.by(() => {
 		{/if}
 
 		<!-- Mobile: "Seite X von Y" label (hidden on sm: and above) -->
+		<!-- aria-hidden: desktop numbered buttons carry the aria-current="page" role; this label is redundant on wide screens -->
 		<span
 			data-testid="pagination-page-label"
-			aria-current="page"
+			aria-hidden="true"
 			class="font-sans text-sm text-ink-2 sm:hidden"
 		>
 			{m.pagination_page_of({ page: page + 1, total: totalPages })}
diff --git a/frontend/src/lib/components/Pagination.svelte.spec.ts b/frontend/src/lib/components/Pagination.svelte.spec.ts
index 8dc904c0..34469bf6 100644
--- a/frontend/src/lib/components/Pagination.svelte.spec.ts
+++ b/frontend/src/lib/components/Pagination.svelte.spec.ts
@@ -19,11 +19,11 @@ describe('Pagination', () => {
 		await expect.element(label).toHaveTextContent(/10/);
 	});
 
-	it('marks the current page label with aria-current="page"', async () => {
+	it('mobile page label is aria-hidden (desktop buttons carry the aria-current role)', async () => {
 		render(Pagination, { page: 0, totalPages: 3, makeHref });
 
 		const label = page.getByTestId('pagination-page-label');
-		await expect.element(label).toHaveAttribute('aria-current', 'page');
+		await expect.element(label).toHaveAttribute('aria-hidden', 'true');
 	});
 
 	describe('page number buttons', () => {
@@ -144,6 +144,13 @@ describe('Pagination', () => {
 		});
 	});
 
+	it('mobile page label is aria-hidden so screen readers skip it on wide screens', async () => {
+		render(Pagination, { page: 2, totalPages: 10, makeHref });
+
+		const label = page.getByTestId('pagination-page-label');
+		await expect.element(label).toHaveAttribute('aria-hidden', 'true');
+	});
+
 	it('renders prev as a link pointing at page - 1 when not on first page', async () => {
 		render(Pagination, { page: 4, totalPages: 10, makeHref });