marcel/familienarchiv
1
0
Fork 0
Code Issues 102 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 +11 -3
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 451904daeb - Show all commits

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

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

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

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