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

feat(search): add direct page-jump control to document search pagination (#340) #346

Merged
marcel merged 5 commits from feat/issue-340-pagination-page-jump into main 2026-04-26 21:53:18 +02:00
Conversation 24 Commits 5 Files Changed 5 +16 -1
2 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dc7e5a1fd0 - Show all commits

8
frontend/src/lib/components/Pagination.svelte
View File

@@ -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">

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