CodeForPhilly / CodeForPhilly/clean-and-green-philly

Epic: Improve Pagination's UX for A11y

Open
#658 1 comment 0 reactions 0 assignees View on GitHub
enhancement stale usability
Dominant language
Python
Stars
50
Forks
92
PR merge metrics
No merged PRs in 30d

Description

## Description
This ticket describes the ideal behaviour of the pagination, for when we have the resources to update its current implementation. This would improve and resolve the overall accessibility of the pagination experience

## Requirements
- [ ] Properties displayed on a page should be wrapped in a ``
- [ ] **Pagination should be links** that takes you to a page, not a button. (See [W3C Pagination example](https://design-system.w3.org/components/pagination.html)) Currently, it's a collection of ``.
- [ ] Focus handling
- If the Properties displayed are wrapped in a ``
- [ ] Manage focus to go to the property `` when the new (next or previous) page loads, so users don't need to step backwards to get to the list;
- If the properties displayed is not in a list,
- [ ] Add a visually-hidden text "Property List Page x"
- [ ] Put the focus on this text when the new page load. This also assists screen reader user's understanding.
- [ ] Page numbers should have `` to denote the current selection.

## Additional notes
- This would eliminate the need for adding `aria-live` regions just to announce that a new set of properties has loaded as described in the following opened tickets.

#340
#635

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.