[Pagination] Accessibility issues when clicking the previous page and the next page
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example:
Steps:
- click “next page” button or “prev page” button continuously
Current behavior 😯
When the “next page“ button was activated with Enter/Space continuously, the screen reader lack of feedback.

Expected behavior 🤔
Each time the “next page“ button was activated with Enter/Space ,the screen reader suggest to announce: ”current page x, go to next page button “
Context 🔦
No response
Your environment 🌎
npx @mui/envinfo
System:
OS: macOS 12.5.1
Binaries:
Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
Yarn: Not Found
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
Browsers:
Chrome: 107.0.5304.87
Edge: Not Found
Firefox: Not Found
Safari: 16.1
npmPackages:
@emotion/react: ^11.7.1 => 11.9.3
@emotion/styled: ^11.6.0 => 11.9.3
@mui/base: ^5.0.0-alpha.87 => 5.0.0-alpha.87
@mui/icons-material: ^5.4.1 => 5.8.4
@mui/lab: 5.0.0-alpha.92 => 5.0.0-alpha.92
@mui/material: ^5.4.0 => 5.8.6
@mui/styles: ^5.4.1 => 5.8.6
@mui/system: ^5.8.6 => 5.8.6
@mui/utils: ^5.8.6 => 5.8.6
@types/react: ^17.0.39 => 17.0.47
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.5.4 => 4.7.4
Issue Analytics
- State:
- Created a year ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Pagination Accessibility: Screen Reader Focus When Clicking ...
Summary A user came into chat with the following request: When scrolling through my blog posts, I find a button that says "Older...
Read more >Accessible Pagination - Accessibility Matters
When there is a lot of content to display, using pagination will help us to add navigation links to reveal more content on...
Read more >Accessibility issue about the full number pagination
Hi, I am using DataTables 1.9, which is announced to be fully accessible. But when I use full number pagination, JAWS reads the...
Read more >Pagination attributes: link rel="next" and rel="prev" - ContentKing
Google claims it has figured out how to best deal with series of paginated pages, and therefor stopped using the rel="next" and rel="prev" ......
Read more >Pagination accessibility - reactjs - Stack Overflow
My following answer is theoretical and I don't have any insights from usability testing with screen reader users!
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@mnajdova I landed on this issue per a notification from @gzrae. Would it make sense for Greg to start asking for reproductions on GitHub issues that use the bug template but don’t provide them? The challenge is that some technical knowledge is often required to use this tool accurately.
As a side note, GitHub has canned replies, maybe something to generalize: https://www.notion.so/mui-org/Technical-support-80c9c7e0af614af68c1abb7120f634c8#29d6f7a70f6c45ac93cbbd680c216c1d
I think it’s reasonable to require screen reader feedback for each click when the button is clicked continuously