Compare commits
3 Commits
2079840adb
...
451904daeb
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
451904daeb | ||
|
|
d97b62c072 | ||
|
|
92241447ae |
@@ -40,20 +40,20 @@ const pageWindow = $derived.by(() => {
|
||||
|
||||
result.push(first);
|
||||
|
||||
if (windowStart > first + 1) {
|
||||
if (windowStart > first + 2) {
|
||||
result.push(null); // left ellipsis
|
||||
} else if (windowStart === first + 1) {
|
||||
result.push(windowStart);
|
||||
} else if (windowStart === first + 2) {
|
||||
result.push(first + 1); // bridge: one page gap, show directly instead of ellipsis
|
||||
}
|
||||
|
||||
for (let p = Math.max(windowStart, first + 1); p <= Math.min(windowEnd, last - 1); p++) {
|
||||
result.push(p);
|
||||
}
|
||||
|
||||
if (windowEnd < last - 1) {
|
||||
if (windowEnd < last - 2) {
|
||||
result.push(null); // right ellipsis
|
||||
} else if (windowEnd === last - 1) {
|
||||
result.push(windowEnd);
|
||||
} else if (windowEnd === last - 2) {
|
||||
result.push(last - 1); // bridge: one page gap, show directly instead of ellipsis
|
||||
}
|
||||
|
||||
if (last > first) {
|
||||
@@ -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 })}
|
||||
@@ -105,7 +106,7 @@ const pageWindow = $derived.by(() => {
|
||||
|
||||
<!-- Desktop: numbered page buttons (hidden below sm:) -->
|
||||
<div data-testid="pagination-pages" class="hidden items-center gap-1 sm:flex">
|
||||
{#each pageWindow as entry, i (i)}
|
||||
{#each pageWindow as entry, i (entry === null ? 'ellipsis-' + i : entry)}
|
||||
{#if entry === null}
|
||||
{#if i === 1}
|
||||
<span
|
||||
|
||||
@@ -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', () => {
|
||||
@@ -123,7 +123,7 @@ describe('Pagination', () => {
|
||||
await expect.element(rightEllipsis).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('page button buttons have hidden class on mobile (sm: prefix)', async () => {
|
||||
it('page buttons container has hidden class on mobile (sm: prefix)', async () => {
|
||||
// The page buttons container must be hidden below sm: breakpoint
|
||||
render(Pagination, { page: 4, totalPages: 12, makeHref });
|
||||
|
||||
@@ -132,6 +132,23 @@ describe('Pagination', () => {
|
||||
await expect.element(pageButtons).toHaveClass(/hidden/);
|
||||
await expect.element(pageButtons).toHaveClass(/sm:flex/);
|
||||
});
|
||||
|
||||
it('renders both pages without ellipsis when totalPages is 2', async () => {
|
||||
render(Pagination, { page: 0, totalPages: 2, makeHref });
|
||||
|
||||
const nav = page.getByRole('navigation');
|
||||
await expect.element(nav.getByTestId('pagination-page-1')).toBeInTheDocument();
|
||||
await expect.element(nav.getByTestId('pagination-page-2')).toBeInTheDocument();
|
||||
await expect.element(nav.getByTestId('pagination-ellipsis-left')).not.toBeInTheDocument();
|
||||
await expect.element(nav.getByTestId('pagination-ellipsis-right')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
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 () => {
|
||||
|
||||
Reference in New Issue
Block a user