a11y(2.5.8): pagination — grow caret buttons from 12×12 to 24×24 CSS px by rosanusi · Pull Request #3547 · temporalio/ui

rosanusi · 2026-06-11T17:45:48Z

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

The .caret button rendered at 12×12 CSS px — half the WCAG 2.5.8 24×24 minimum. Changing width/height from 12px to 24px and adding inline-flex items-center justify-center centres the existing CSS triangle decoration within the enlarged hit area. Applied to both api-pagination.svelte and pagination.svelte. A11y-Audit-Ref: 2.5.8-pagination-caret-buttons Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

vercel · 2026-06-11T17:46:16Z

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 · 2026-06-11T17:47:17Z

	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 · 2026-06-16T20:25:47Z

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

Before (introduced by PR):

After (current state):

Auto-generated version bump from 2.51.0 to 2.51.1 Specific version: 2.51.1 Changes included: - [`c848ec54`](c848ec5) fix(a11y): announce workflow / event status on timeline graph nodes (WCAG 1.4.1) (#3443) - [`af6b12a9`](af6b12a) fix(deployments): align version/status/compute badges in worker deployments table (#3489) - [`df86587c`](df86587) Add SDK version to standalone activity details (#3447) - [`59695290`](5969529) Use shared FilterBar component for workflows (#3448) - [`ded94469`](ded9446) Set display contents in wrapper div if no afterLabel in Input component (#3513) - [`d7e5eb43`](d7e5eb4) fix(standalone-activities): decode failure encodedAttributes in activity detail (#3507) - [`81a255a9`](81a255a) fix(DT-4151): fix bottom nav scrollability and double-menu on mobile (#3514) - [`368f646e`](368f646) Fix exports to work properly with vite8 (#3519) - [`231bdaff`](231bdaf) chore(deps-dev): bump vitest from 3.2.4 to 3.2.6 (#3509) - [`1de44ea6`](1de44ea) fix(workers): soften no-workers-polling alert for serverless worker deployments (#3524) - [`689955a8`](689955a) fix(DT-4080): surface error when validate connection has no compute config, warn on set current (#3516) - [`93323db9`](93323db) feat(DT-4078): Add Set Ramping Version to Worker Deployment Versions (#3508) - [`9d3450c0`](9d3450c) fix(DT-4081): surface task queue not registered error in validate connection modal (#3517) - [`b7f56237`](b7f5623) feat(DT-4079): miscellaneous WD UI fixes (#3511) - [`83b2d4ec`](83b2d4e) feat(deployments): simplify create worker deployment UX (#3518) - [`ccb4cb73`](ccb4cb7) Standalone Activity write guards (#3534) - [`ab20ef03`](ab20ef0) Worker insights UI updates (#3520) - [`aaf63bdc`](aaf63bd) [wcag] Replace text-[12px] with text-xs in DatePicker action buttons (SC 1.4.4) (#3525) - [`743be902`](743be90) a11y(2.4.3): replace flex-wrap-reverse with flex-wrap on workflow history toolbar (#3527) - [`41b73e87`](41b73e8) a11y(2.4.2): ui-main — set distinct, descriptive titles on login/signin, task-queues list, and activity-workers sub-tab (#3535) - [`3d64cdbf`](3d64cdb) [WCAG 2.4.3] group-details-row — remove redundant outer focus stop on <g> wrapper (#3537) - [`883e5db1`](883e5db) a11y(2.4.6): datepicker — replace empty label with translate('common.start') (#3543) - [`9da915e2`](9da915e) a11y(2.4.5): import history — add back-link to Import landing page (#3542) - [`ca4c1d61`](ca4c1d6) Cache new Intl.DateTimeFormat (#3565) - [`38376e4d`](38376e4) Fix required activity timeout inputs on Start a Standalone Activity form (#3567) - [`49d7c9e4`](49d7c9e) Use separate copy for title vs menu item (#3568) - [`3c7dcdc3`](3c7dcdc) a11y(2.5.8): pagination — grow caret buttons from 12×12 to 24×24 CSS px (#3547) - [`b5171825`](b517182) a11y(2.5.8): chip — pad remove button to 24×24 CSS px minimum (#3544) - [`1fea5d5c`](1fea5d5) a11y(2.1.1): fake-button widgets — replace deprecated onkeypress with onkeydown handling Enter and Space (#3528) - [`5bf09000`](5bf0900) a11y(2.1.1): navigation primitives — replace hover-only CSS :after label tooltip with focusable Tooltip (#3529) - [`deed43f0`](deed43f) a11y(2.1.1): event summary row — add keyboard-accessible expand control alongside the mouse-only <tr onclick> (#3526) - [`d401123e`](d401123) a11y(2.5.8): checkbox — add min-h-6 min-w-6 to Label for 24×24 hit area (#3545) - [`aef4166f`](aef4166) [a11y] Expose toggled state via aria-pressed on ToggleButton (#3559) - [`797f8831`](797f883) Show single attempt in Standalone Activity details (#3572) - [`893bc58c`](893bc58) feat(DT-4183): Add Tabs (Primitive) (#3574) - [`323c1993`](323c199) Date picker input field bug/kt (#3522) - [`3ac34ce2`](3ac34ce) Various serverless UI updates (#3573) - [`f365416a`](f365416) a11y(2.1.1): ZoomSvg — add keyboard pan/zoom controls so the workflow family tree is operable without a mouse (#3530) - [`feb6897e`](feb6897) Fix gaps in slot cards on worker details page (#3580) - [`b3c80072`](b3c8007) Remove font weight on cache size (#3583) - [`0e7337ea`](0e7337e) Bump API to v1.62.14 (#3575) Co-authored-by: laurakwhit <[email protected]>

github-actions Bot added a11y Accessibility audit PR a11y:bucket-2 Bucket 2: design-mergeable, HTML / ARIA a11y:sc-2.5.8 labels Jun 11, 2026

vercel Bot deployed to Preview June 11, 2026 17:46 View deployment

rosanusi marked this pull request as ready for review June 15, 2026 16:44

rosanusi requested a review from a team as a code owner June 15, 2026 16:44

fix: positioning visual regression

0b27b41

vercel Bot deployed to Preview June 16, 2026 20:24 View deployment

ardiewen approved these changes Jun 16, 2026

View reviewed changes

ardiewen merged commit 3c7dcdc into main Jun 17, 2026
19 checks passed

ardiewen deleted the wcag/2.5.8-pagination-caret-buttons branch June 17, 2026 14:53

This was referenced Jun 22, 2026

chore: bump version to 2.52.0 #3586

Closed

chore: bump version to 2.51.1 #3587

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

a11y(2.5.8): pagination — grow caret buttons from 12×12 to 24×24 CSS px#3547
ardiewen merged 2 commits into
mainfrom
wcag/2.5.8-pagination-caret-buttons

rosanusi commented Jun 11, 2026

Uh oh!

vercel Bot commented Jun 11, 2026 •

edited

Loading

Uh oh!

temporal-cicd Bot commented Jun 11, 2026 •

edited

Loading

Uh oh!

ardiewen commented Jun 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

rosanusi commented Jun 11, 2026

Description

Screenshots

Design

Testing

Checklist

Docs

Uh oh!

vercel Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

temporal-cicd Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ardiewen commented Jun 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Jun 11, 2026 •

edited

Loading

temporal-cicd Bot commented Jun 11, 2026 •

edited

Loading