18b88672ec
<a aria-disabled="true"> is the documented pattern but screen readers still announce "Previous, link, disabled" on pagination bounds — noise users don't need because the disabled state is purely visual. Switching to <span aria-hidden="true"> removes the bound control from the AT tree entirely (Leonie's recommendation). Visual parity preserved via a disabledBase Tailwind class (same layout + cursor-not-allowed + opacity-40). Tests updated: "disabled prev/next" assertions now check for aria-hidden and no href — the active-state href/aria-current assertions are unchanged. (#316) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
81 lines
2.5 KiB
Svelte
81 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import * as m from '$lib/paraglide/messages.js';
|
|
|
|
interface Props {
|
|
/** 0-indexed current page. */
|
|
page: number;
|
|
/** Total number of pages. `0` or `1` hides the control as trivially there's nothing to navigate. */
|
|
totalPages: number;
|
|
/** Given a 0-indexed page number, returns the href the link should point at. */
|
|
makeHref: (page: number) => string;
|
|
/** Optional override for the outer `<nav>`'s aria-label. */
|
|
ariaLabel?: string;
|
|
}
|
|
|
|
const { page, totalPages, makeHref, ariaLabel }: Props = $props();
|
|
|
|
const hasPrev = $derived(page > 0);
|
|
const hasNext = $derived(page < totalPages - 1);
|
|
const controlBase =
|
|
'inline-flex min-h-[44px] min-w-[44px] items-center justify-center gap-1.5 rounded-sm border border-line bg-white px-4 py-2 font-sans text-sm font-bold text-ink';
|
|
const linkBase = `${controlBase} transition-colors hover:bg-surface focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none`;
|
|
const disabledBase = `${controlBase} cursor-not-allowed opacity-40`;
|
|
</script>
|
|
|
|
{#if totalPages > 1}
|
|
<nav
|
|
aria-label={ariaLabel ?? m.pagination_nav_label()}
|
|
class="mt-6 flex flex-col items-center gap-3 sm:flex-row sm:justify-between"
|
|
>
|
|
<!--
|
|
At the bounds we render a <span aria-hidden="true"> instead of an
|
|
<a aria-disabled>. aria-disabled on a link is the documented pattern
|
|
but screen readers still announce "Previous, link, disabled" — which
|
|
is confusing on a pagination control where the disabled state is
|
|
purely visual. Hiding the element from the AT tree entirely is the
|
|
cleaner semantic.
|
|
-->
|
|
{#if hasPrev}
|
|
<a
|
|
data-testid="pagination-prev"
|
|
aria-label={m.pagination_prev()}
|
|
href={makeHref(page - 1)}
|
|
class={linkBase}
|
|
>
|
|
<span aria-hidden="true">«</span>
|
|
{m.pagination_prev()}
|
|
</a>
|
|
{:else}
|
|
<span data-testid="pagination-prev" aria-hidden="true" class={disabledBase}>
|
|
<span aria-hidden="true">«</span>
|
|
{m.pagination_prev()}
|
|
</span>
|
|
{/if}
|
|
|
|
<span
|
|
data-testid="pagination-page-label"
|
|
aria-current="page"
|
|
class="font-sans text-sm text-ink-2"
|
|
>
|
|
{m.pagination_page_of({ page: page + 1, total: totalPages })}
|
|
</span>
|
|
|
|
{#if hasNext}
|
|
<a
|
|
data-testid="pagination-next"
|
|
aria-label={m.pagination_next()}
|
|
href={makeHref(page + 1)}
|
|
class={linkBase}
|
|
>
|
|
{m.pagination_next()}
|
|
<span aria-hidden="true">»</span>
|
|
</a>
|
|
{:else}
|
|
<span data-testid="pagination-next" aria-hidden="true" class={disabledBase}>
|
|
{m.pagination_next()}
|
|
<span aria-hidden="true">»</span>
|
|
</span>
|
|
{/if}
|
|
</nav>
|
|
{/if}
|