🎨 Palette: Improve pagination accessibility - #71
Conversation
Add aria-current for active page, hide decorative pagination ellipsis with aria-hidden, and add screen reader aria-labels to the first/last/prev/next symbol buttons to improve keyboard and screen reader accessibility. Co-authored-by: AntonioCardenas <11583391+AntonioCardenas@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
✅ Deploy Preview for heartfelt-swan-19c038 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
1 participant
💡 What: Improved screen reader and keyboard accessibility for the CustomPagination component by providing context and explicitly managing hidden/active states.
🎯 Why: Previously, the visual pagination states (like the active current page or decorative ellipsis
...) were completely opaque to screen readers, and the navigation arrows («,») lacked descriptive aria labels (screen readers might read "left pointing double angle quotation mark").📸 Before/After: Screen readers will now announce "First page" instead of "left pointing double angle quotation mark" and properly understand which page is currently selected. Decorative ellipsis are skipped from focus.
♿ Accessibility:
aria-current="page"to the active page numberaria-hidden="true"andtabIndex={-1}to the decorative...separator buttonsaria-labels to the«(First page) and»(Last page) navigation buttonsaria-labels to the previous/next buttons.PR created automatically by Jules for task 934526976418630810 started by @AntonioCardenas