Accessibility and Keyboard Navigation

[roblevintennis]

Issue — Accessbility

I did a lot of research before building my own pagination for AgnosticUI and appreciated your article and this example among the many other resources available on this interesting topic. I realize it takes a lot of time to write this sort of article and it's deeply appreciated!

I do have an issue to report — the fact that this implementation doesn't support either: 1) tab into and across the paging links, or 2) tab into and then arrow across the links (I believe both are acceptable a11y) is problem since it's likely a "first-stop" to many electing to give custom pagination a go. We have a problem in our industry where keyboard navigation and accessibility concerns are tackled as an after thought already; so if the tutorial and this repo could include keyboard navigation it would help so much in pointing FE devs in the right direction in my opinion.

---

Examples

Here's an example implementation that allows you to tab into the paging controls, and then arrow key through them
https://garden.zendesk.com/components/pagination

Here's another example from my library that uses buttons (and so I got tab into and through for free):

• usePagination hook
• pagination component
• Storybook pagination story

This version of the pagination component is a work-in-progress so I unfortunately cannot point you to a live example but you can see the focus ring is updated on tab per the screen grab below:

Again, thank you so much for your help in writing the tutorial and keeping this repository open and available to the community! It would be great if you could write a part II on how to make this pagination component a11y-compliant and fully inclusive (either via use of buttons or keyup management).