Improve pagination template accessibility with aria attributes and re…#9905
Improve pagination template accessibility with aria attributes and re…#9905kosbemrunal wants to merge 1 commit intoencode:mainfrom
Conversation
…l navigation hints
There was a problem hiding this comment.
Pull request overview
Improves the DRF pagination “previous/next” template’s accessibility metadata by adding ARIA attributes and semantic link relations to help assistive technologies interpret pagination controls.
Changes:
- Add
rel="prev"/rel="next"to pagination links. - Add
aria-labelto the previous/next links. - Add
aria-disabled="true"andtabindex="-1"for disabled pagination states.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {% if previous_url %} | ||
| <li class="previous"> | ||
| <a href="{{ previous_url }}">« Previous</a> | ||
| <a href="{{ previous_url }}" rel="prev" aria-label="Previous page">« Previous</a> |
There was a problem hiding this comment.
The new aria-label value ("Previous page") is inconsistent with the existing pagination template (numbers.html uses aria-label="Previous"). Consider using the same label across pagination templates (and reusing the existing visible wording) to keep screen reader output consistent.
| {% if next_url %} | ||
| <li class="next"> | ||
| <a href="{{ next_url }}">Next »</a> | ||
| <a href="{{ next_url }}" rel="next" aria-label="Next page">Next »</a> |
There was a problem hiding this comment.
The new aria-label value ("Next page") is inconsistent with the existing pagination template (numbers.html uses aria-label="Next"). Consider using the same label across pagination templates (and reusing the existing visible wording) to keep screen reader output consistent.
| <li class="previous disabled" aria-disabled="true"> | ||
| <a href="#" tabindex="-1" aria-disabled="true">« Previous</a> |
There was a problem hiding this comment.
In the disabled state this link still has href="#", so it remains clickable for mouse/touch users even though it is marked aria-disabled and removed from the tab order. To avoid a mismatch between semantics and behavior (and prevent jumping to the top of the page), consider rendering a non-link element (e.g., span) or removing the href when disabled.
| <li class="next disabled" aria-disabled="true"> | ||
| <a href="#" tabindex="-1" aria-disabled="true">Next »</a> |
There was a problem hiding this comment.
In the disabled state this link still has href="#", so it remains clickable for mouse/touch users even though it is marked aria-disabled and removed from the tab order. To avoid a mismatch between semantics and behavior (and prevent jumping to the top of the page), consider rendering a non-link element (e.g., span) or removing the href when disabled.
This PR improves the accessibility of the pagination template by:
aria-labelattributes for better screen reader supportrel="prev"andrel="next"for semantic navigationaria-disabledandtabindex="-1"for disabled statesThese changes improve accessibility without modifying existing functionality or behavior.