feat(#246): cursor-based Pagination component and usePagination hook#429
Merged
Merged
Conversation
…tion hook - Pagination component: Prev/Next/First buttons with aria-label, aria-disabled, and disabled attributes for full keyboard accessibility - aria-live='polite' on the page number indicator for screen reader announcements - Wrapped in <nav aria-label='Pagination'> for landmark navigation - Buttons have focus-visible outlines; disabled state styled with opacity - usePagination hook: manages cursor stack, page number, goNext/goPrev/goFirst/reset - Mobile-responsive CSS (compact layout at <480px) - Tests cover all navigation actions, disabled states, and hook state transitions Closes devEunicee#246
|
@unixfundz Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #246
Implements a reusable cursor-based
Paginationcomponent and a companionusePaginationhook that manages the cursor stack.Component:
frontend/src/components/Pagination/Features
next_cursorfrom the Soroban contract'sPaymentPageresponse; no offset arithmeticusePaginationhook — maintains a stack of previous cursors, page number, and exposesgoNext/goPrev/goFirst/resetactionsaria-label,aria-disabled, anddisabledattributes<nav aria-label="Pagination">landmark for screen reader navigationaria-live="polite"on the page indicator — screen readers announce page changes automaticallyAcceptance Criteria