a11y(2.5.8): pagination — grow caret buttons from 12×12 to 24×24 CSS px

[rosanusi]

Description

The Previous/Next page caret buttons in api-pagination.svelte and pagination.svelte had .caret { width: 12px; height: 12px; } — half the WCAG 2.5.8 (Target Size Minimum, Level AA) 24×24 requirement.

Fix: change both dimensions to 24px and add inline-flex items-center justify-center so the existing CSS-triangle <span class="arrow"> stays visually centred within the enlarged hit area. Applied identically to both files.

Changed files:

• src/lib/holocene/api-pagination.svelte — .caret block
• src/lib/holocene/pagination.svelte — .caret block

This fix cascades to all consumers in both ui-main and cloud-ui-main (via the @temporalio/ui tarball).

Screenshots

No change to the visible arrow triangle. The transparent padding around it grows from 0 to 6 px per side.

Design

No design changes. The arrow decoration is unchanged; only the button's interactive hit area is enlarged.

Testing

• Open the workflows list (or any page with <ApiPagination>). Inspect the Previous/Next caret buttons — getBoundingClientRect() returns 24×24.
• Confirm the arrow triangle is visually centred within the button.
• Disabled state (first/last page): button renders at 24×24 with opacity-50.
• Tap-test on a touchscreen — consistent activation.
• Keyboard: Tab to a caret button, Enter/Space — navigates page.
• Visual regression: pagination cluster layout (workflows list, schedules list, identities list) — confirm the 12 px wider cluster per caret reflows without breakage.
• axe-core: no target-size violations on caret buttons.

Checklist

• No new i18n keys
• No change to arrow triangle appearance
• Cascades to cloud-ui-main via @temporalio/ui tarball

Docs

No documentation changes required.

A11y-Audit-Ref: 2.5.8-pagination-caret-buttons

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jun 16, 2026 8:24pm

[temporal-cicd]

Warnings

⚠️

📊 Strict Mode: 12 errors in 2 files (1.3% of 906 total) src/lib/holocene/pagination.svelte (1) L47:37: Argument of type 'string | null' is not assignable to parameter of type 'string | number | undefined'. src/lib/holocene/api-pagination.svelte (11) L57:13: Type 'undefined' is not assignable to type '(error: Error) => void | undefined'. L59:13: Type 'undefined' is not assignable to type '(event: KeyboardEvent) => void | undefined'. L60:13: Type 'undefined' is not assignable to type '(event: KeyboardEvent) => void | undefined'. L62:13: Type 'undefined' is not assignable to type '(event: KeyboardEvent) => void | undefined'. L74:13: Type 'undefined' is not assignable to type 'string'. L87:15: Type 'undefined' is not assignable to type 'Error'. L110:20: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ items: T[]; nextPageToken: string; }'. L113:6: Type 'unknown' is not assignable to type 'Error'. L129:22: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ items: T[]; nextPageToken: string; }'. L192:20: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ items: T[]; nextPageToken: string; }'. L195:6: Type 'unknown' is not assignable to type 'Error'.

Generated by 🚫 dangerJS against 0b27b41

[ardiewen]

@rosanusi I had to apply a fix here to address a visual regression caused by this PR.

Before (introduced by PR):

After (current state):