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):
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).
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):
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
keyupmanagement).