fix #459: Remove incorrect aria role navigation

[kroney]

fixes #459

[torymartin88]

Yes please merge this fix!

[mynamesleon]

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]

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

[opreisSys]

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

[ghost]

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]

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]

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