marcel/familienarchiv
1
0
Fork 0
Code Issues 105 Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

fix(pagination): add sr-only span to preserve aria-current on mobile AT
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / OCR Service Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details

Browse Source 
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>
This commit was merged in pull request #346.
This commit is contained in:
Marcel
2026-04-26 21:42:16 +02:00
committed by marcel
parent 31e5573eab
commit 3d3fe8d626
2 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/lib/components/Pagination.svelte.spec.ts
View File

@@ -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 });