Skip to content

fix(pagination): align link trigger aria-label with Connect SSR#64

Merged
karim-semmoud merged 4 commits into
mainfrom
fix/pagination-link--aria-label
Jun 11, 2026
Merged

fix(pagination): align link trigger aria-label with Connect SSR#64
karim-semmoud merged 4 commits into
mainfrom
fix/pagination-link--aria-label

Conversation

@karim-semmoud

@karim-semmoud karim-semmoud commented Jun 10, 2026

Copy link
Copy Markdown
Member

Summary

  • Fix axe aria-prohibited-attr on link-mode pagination when prev/next are disabled <a> elements without href (page 1 prev, last page next).
  • Align hook props with existing Elixir Connect SSR: dead link triggers omit aria-label; navigable links keep it for icon-only slots.
  • Add corexPaginationConnect wrapper instead of patching the DOM after spreadProps.

Problem

Zag getPrevTriggerProps / getNextTriggerProps always set aria-label, but link mode only adds href when navigation is possible. On page 1, prev is <a data-disabled> with no href, which axe 4.11 rejects.

Elixir Connect already omitted aria-label for disabled link triggers on SSR. The Pagination hook used raw Zag connect, so spreadProps re-applied aria-label after phx-mounted ignore. Doc a11y tests failed on /en/pagination/patterns and /en/pagination/playground.

Button mode (default) is unaffected: aria-label on <button disabled> is valid.

Changes

corexPaginationConnect (assets/components/pagination-connect.ts)

  • Wrap @zag-js/pagination connect and override prev/next getters.
  • adjustDeadLinkTriggerProps: strip aria-label when props have no href and trigger is not type="button".
  • assets/components/pagination.ts uses corexPaginationConnect in initApi().

Tests

Build

Not changed

  • Link mode API (type={:link}, to, redirect) kept for Phoenix patch/navigate and shareable URLs.
  • Elixir Connect.prev_trigger / next_trigger logic unchanged (already correct).

Test plan

  • mix test test/components/pagination_test.exs
  • npm test -- pagination.test.ts
  • npm test -- components-contract.test.ts
  • cd e2e && mix test test/e2e_web/doc_routes_a11y_test.exs (pagination patterns + playground routes)

@karim-semmoud karim-semmoud self-assigned this Jun 10, 2026
@karim-semmoud karim-semmoud merged commit 88f9d74 into main Jun 11, 2026
17 checks passed
@karim-semmoud karim-semmoud deleted the fix/pagination-link--aria-label branch June 11, 2026 09:33
@karim-semmoud karim-semmoud mentioned this pull request Jun 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant