search

michaelbromley / ngx-pagination

Pagination for Angular
http://michaelbromley.github.io/ngx-pagination/
MIT License
1.21k stars 244 forks source link

a11y: keyboard accessibility - tab order is incorrect when changing page #370

Closed seanmbills closed 3 years ago

seanmbills commented 4 years ago

Hey Michael, thanks a lot for putting together this project. It's a huge help in developing web pages that are intended for showing lots of data! Noticed the below issue and I'm hoping there's a quick fix to it that's either known or can be implemented.

Angular version: 9.1.7

ngx-pagination version: 5.0.0

Description of issue: When using keyboard to navigate through pagination component, and hitting enter on another page number, the next use of the tab key will tab to the first page button.

Steps to reproduce: Use keyboard to "tab" to pagination component. Click "enter" on/activate a page button greater than button 1. Then click tab again. Focus should jump back to button 1.

Expected result: Focus moves to the button after the activated button

Actual result: Focus moves to button 1

Demo: Not able to tab to any of the buttons in your demo. In my production application, however, I can reproduce this.

Any relevant code:

seanmbills commented 3 years ago

@michaelbromley I understand that you're maintaining this repository yourself, and I'm very grateful for all of the time and effort you put into it. is there any way to increase the focus on this issue? Because it's accessibility-impacting, this causes a number of issues from usability

michaelbromley commented 3 years ago

This is a very polite nudge considering 7 months of silence on my part! 😆

I just looked into it and it seems like the reason that the focus gets reset is because the ngFor directive which generates the page links is discarding and re-creating all the links each time the page is changed. I tried to prevent this behaviour using the trackBy feature of ngFor, and setting it to return just the index. This seems to work - see the demo here: https://stackblitz.com/edit/angular-wngzyr?file=app%2Fapp.component.html

So for now you can create a custom template as I have done in the demo above, and implement the trackBy function.

I will include this change as part of the default template in the next release.

seanmbills commented 3 years ago

@michaelbromley This was exactly the fix that we needed, thanks a lot for the quick response!! I'll leave the bug open and let you decide how/when to close it. Thanks again!

michaelbromley commented 3 years ago

This is now included in the default template in v5.1.1 👍