TAB key Focus on disabled elements - Pagination

[iamvenkat45]

When use TAB key to focus elements, it is able to focus on disabled elements like “Previous” insteading of focus on only enabled elements like 1, 2, "Next".

Can we know on how to remove the focus on "previous" when this is disabled.

[icfantv]

@iamvenkat45, the pagination component does not have any key or focus handling code - everything you're talking about is handled via the browser. For UI Bootstrap's part we do set the disabled class on the component when ng-disabled is true.

Some quick googling yielded this link, which may be what you're looking for.

In the future, if you think you've found a bug, please follow these instructions as we do not use our issues forum for support requests. Rather, those should be directed towards SO as documented here. Thanks.

[iamvenkat45]

@icfantv thanks for the quick reply.

Disabled class is set on the component but not on anchor tag and so the previous button is disabled but sill focussed.
The problem is when we use the TAB key, still the "previous" button is highlighted or focused on TAB navigation which shouldn't be.

As per your suggestion for this link, This only makes the outline to none.
Actually the navigation should jump to next enabled link/element not with only making it focus none when disabled.

[icfantv]

@iamvenkat45, marking the anchor tag as disabled does not rectify the issue as you can see here.

I'm not yet convinced there's anything for us to do here. @wesleycho or @Foxandxss, thoughts?

[wesleycho]

This does sound like an accessibility issue to me.

[wesleycho]

Forgot to put the issue # in the commit, but this is addressed via 1a870a3.