question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Pagination] Accessibility issues when clicking the previous page and the next page

See original GitHub issue

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

  1. 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.

image

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:open
  • Created a year ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
oliviertassinaricommented, Nov 21, 2022

@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

Screenshot 2022-11-21 at 14 04 56
0reactions
MrsDuncommented, Nov 23, 2022

I think it’s reasonable to require screen reader feedback for each click when the button is clicked continuously

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found