Pagination

Splits large data sets across numbered pages with previous and next navigation.

Keyboard interaction

Key	Action
`Tab`	Move focus into the pagination. Subsequent Tab presses move focus to the next enabled button.
`Shift + Tab`	Move focus to the previous focusable element inside or outside pagination.
`Enter / Space`	Activate the focused page button, previous, or next button. No-op when the button is disabled.

Screen reader behaviour

The component uses native <button> elements inside Shadow DOM with delegatesFocus: true. The landmark navigation and all interactive controls are fully reachable from the accessibility tree without extra configuration.

Attribute / Property	Value / Behaviour
`role`	navigation (from the <nav> element). Each page item is role=button (implicit from native <button>).
`aria-label on <nav>`	Set to intl.root (default: "Pagination"). Override via the intl prop for localised landmarks.
`aria-label on prev/next buttons`	Set to intl.prev / intl.next (defaults: "Previous page" / "Next page"). Provides a descriptive name since the buttons contain only an icon.
`aria-label on page buttons`	"Page N" — where N is the page number. Constructed from intl.page (default: "Page") + the page number.
`aria-current="page"`	Applied to the active page button so screen readers announce it as the current page.
`disabled`	Applied natively to the previous button on page 1 and the next button on the last page. Screen readers announce the button as dimmed/unavailable.
`aria-hidden="true" on SVG icons`	The chevron SVGs are hidden from the accessibility tree; their buttons carry the complete accessible name via aria-label.

WCAG 2.2 compliance

✓

1.4.3 Contrast (Minimum) — AAPass

Page number text uses --diwa-text-primary. Active page accent uses --diwa-accent which meets 3:1 non-text contrast against surface.

✓

1.4.11 Non-text Contrast — AAPass

The active page indicator (--diwa-accent border-bottom) has ≥ 3:1 contrast against the adjacent button background.

✓

2.1.1 Keyboard — APass

All enabled page, previous, and next buttons are reachable and activatable via Tab + Enter/Space.

✓

2.4.3 Focus Order — APass

Focus follows the visual DOM order: previous → page items → next.

✓

2.4.7 Focus Visible — AAPass

A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is always shown on keyboard focus via :focus-visible.

✓

2.4.6 Headings and Labels — AAPass

The <nav> has an aria-label landmark; each button has a descriptive aria-label. No heading is needed for a navigation region.

✓

4.1.2 Name, Role, Value — APass

Native <button> and <nav> elements are used. aria-current="page" communicates state. aria-label provides the accessible name for icon-only buttons.

Best practices

Reduced motion — all CSS transitions inside the shadow DOM respond to prefers-reduced-motion: reduce and are suppressed automatically.
Focus management — the component uses delegatesFocus: true. Programmatic focus on the host correctly delegates to the first interactive inner button.
Internationalisation — always override the intl prop when the page language is not English so that the navigation landmark and all button labels are announced in the correct language.