Accessibility: current page gets visual styling but no indication for screen reader users

[NicktheGeek]

🐛 Current behavior

The active page in the “paged” (like 1, 2, 3, 4, 5…) pagination receives a class that can be styled as “bold” or whatever to show the current page visually, but there is no indication that it is the current page.

This is a very frustrating experience for screen reader users who have no idea what page they might be on.

🔍 Steps to reproduce

1. Go to one of the demo pages like the eCommerce Demo
2. Notice the current page is styled to indicate it is active
3. Inspect the element and notice it does this via a class on the LI element. No aria-current.

Live reproduction

https://codesandbox.io/p/sandbox/github/algolia/instantsearch/tree/templates/instantsearch.js?file=/package.json:18,26-18,32

💭 Expected behavior

Screen readers can indicate the current page if it is marked up correctly with aria-current.

Another option would be to use aria-hidden=" true" tabindex="-1" to remove it from the tab index and hide it from screen readers. Since clicking the current item does nothing, this is actually a very good approach.

Note: this should be applied to the <a> element, which should really be a button, but that's another issue.

Package version

4.78.1

Operating system

No response

Browser

No response

Code of Conduct

• I agree to follow this project's Code of Conduct