From 3d3fe8d626737e3a9a90c20f0e7bfcc61d2b7709 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 26 Apr 2026 21:42:16 +0200
Subject: [PATCH] fix(pagination): add sr-only span to preserve aria-current on
 mobile AT
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the mobile label is aria-hidden and the desktop button container is
display:none (below sm:), mobile screen reader users had no aria-current
indicator. Added a sr-only span with aria-current="page" that stays in
the AT tree at all breakpoints regardless of CSS display state.

On desktop the active page button also carries aria-current — both
announce the same page information, which is acceptable.

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

diff --git a/frontend/src/lib/components/Pagination.svelte b/frontend/src/lib/components/Pagination.svelte
index 8cde307a..b9c4834b 100644
--- a/frontend/src/lib/components/Pagination.svelte
+++ b/frontend/src/lib/components/Pagination.svelte
@@ -95,7 +95,7 @@ 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 -->
+		<!-- aria-hidden: decorative visual label; AT uses the sr-only span below for aria-current -->
 		<span
 			data-testid="pagination-page-label"
 			aria-hidden="true"
@@ -103,6 +103,12 @@ const pageWindow = $derived.by(() => {
 		>
 			{m.pagination_page_of({ page: page + 1, total: totalPages })}
 		</span>
+		<!-- Always in the AT tree: announces current page regardless of breakpoint.
+		     On mobile, the desktop button container is display:none so this is the only AT anchor.
+		     On desktop, the active page button also carries aria-current — both announce the same info. -->
+		<span data-testid="pagination-current-page-sr" aria-current="page" class="sr-only">
+			{m.pagination_page_of({ page: page + 1, total: totalPages })}
+		</span>
 
 		<!-- Desktop: numbered page buttons (hidden below sm:) -->
 		<div data-testid="pagination-pages" class="hidden items-center gap-1 sm:flex">
diff --git a/frontend/src/lib/components/Pagination.svelte.spec.ts b/frontend/src/lib/components/Pagination.svelte.spec.ts
index 34469bf6..0d8aed2c 100644
--- a/frontend/src/lib/components/Pagination.svelte.spec.ts
+++ b/frontend/src/lib/components/Pagination.svelte.spec.ts
@@ -151,6 +151,15 @@ describe('Pagination', () => {
 		await expect.element(label).toHaveAttribute('aria-hidden', 'true');
 	});
 
+	it('sr-only span always provides aria-current="page" for screen readers at all breakpoints', async () => {
+		render(Pagination, { page: 2, totalPages: 10, makeHref });
+
+		const nav = page.getByRole('navigation');
+		const srLabel = nav.getByTestId('pagination-current-page-sr');
+		await expect.element(srLabel).toBeInTheDocument();
+		await expect.element(srLabel).toHaveAttribute('aria-current', 'page');
+	});
+
 	it('renders prev as a link pointing at page - 1 when not on first page', async () => {
 		render(Pagination, { page: 4, totalPages: 10, makeHref });