Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix #459: Remove incorrect aria role navigation #494

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

kroney
Copy link

@kroney kroney commented Jul 31, 2023

fixes #459

@kroney kroney changed the title fix 459: Remove incorrect aria role navigation fix #459: Remove incorrect aria role navigation Jul 31, 2023
@torymartin88
Copy link

Yes please merge this fix!

role="navigation"
aria-label="Pagination"
>
<ul className={className || containerClassName} aria-label="Pagination">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hard-coded aria-label value of "Pagination" should ideally be removed as well, or if included it should be configurable (although I suppose that's a separate issue)

@ViktorSoroka07
Copy link

@AdeleD, can you review please? This will address #492 and #498

@opreisSys
Copy link

I had to go back to an older version because of the issue.
Can someone resolve the comment and merge the PR?

@ghost
Copy link

ghost commented Jun 5, 2024

I had to go back to an older version because of the issue. Can someone resolve the comment and merge the PR?

What version did you use? Thanks

@opreisSys
Copy link

I had to go back to an older version because of the issue. Can someone resolve the comment and merge the PR?

What version did you use? Thanks

Version 8.1.3

@LightsLegend7276
Copy link

LightsLegend7276 commented Aug 29, 2024

In case anyone is struggling with a solution still we came up with a bit of a hacky one. I will admit it's not very sustainable as a change to the code can break it unless you are getting the child nodes recursively which we didn't in this example since the code doesn't seem to have been updated in quite some time. Hope this helps someone out there, or at the very leat spark some better ideas.

const paginateRef = useRef(null);

useEffect(() => {
    if (pageCount > 0) {
      if (paginateRef.current._reactInternals.child.stateNode.tagName === "UL" && paginateRef.current._reactInternals.child.stateNode.role === "navigation") {
        paginateRef.current._reactInternals.child.stateNode.setAttribute("role", "list");
      }
    }
  })

<ReactPaginate
   ref={paginateRef} 
/>

Right now this works because the first child node is the ul, but if this happens to change then this will no longer work. Getting the child node you are looking for recursively would be the way to go. Also, if anyone knows how to get the dom elements via some method using the reference returned by ReactPaginate then please feel free to reply and let me know. I really am not a big fan of this solution, but it was the only way I could get it to work. I accessed the react Fiber nodes via _reactInternals, but idk if this is a good practice.

Happy coding!!

@jessie-james-jg
Copy link

Any update on

I had to go back to an older version because of the issue. Can someone resolve the comment and merge the PR?

What version did you use? Thanks

Version 8.1.3

8.1.3 and 8.1.2 both have the issue. Any older version that doesn't not have this issue?

@opreisSys
Copy link

Any update on

I had to go back to an older version because of the issue. Can someone resolve the comment and merge the PR?

What version did you use? Thanks

Version 8.1.3

8.1.3 and 8.1.2 both have the issue. Any older version that doesn't not have this issue?

You have to go hard on 8.1.3.
In package.json:
"react-paginate": "8.1.3"

@semanticist21
Copy link

Is this package being maintained??????

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Addition of role='navigation' to the <ul> element causes a Lighthouse failure
8 participants