CODEWITHSUNDEEP
jquerytabsfocusdatatables
user1756980
user1756980

Reputation: 3997

Why doesn't my element get tab focus?

I am fairly ignorant when it comes to things like tab focus. I am using JQuery Datatables.

In one window, hitting tab scrolls through the elements, excluding the table rows, but including the table footer with the pagination buttons for "first, previous, next, last".

In another window the tab focus stops at the end of the table rows and goes back to the top of the page, skipping over the pagination buttons for "first, previous, next, last".

I coded both of these datatables, and they are very similar, as the the pop up windows themselves. I don't think this is a big deal, but someone on my dev team opened a bug for it, and since it's my code I'd like to fix it (I have no idea why anyone would waste their time testing things like this, I'm sure our customers use their cursor to click on the pagination buttons, I doubt many of them even realize hitting tab repeatedly would bring them there).

My question is, what decides which elements can get tab focus? Why would two very similar pieces of code behave so differently? How can I make them consistent (allowing all elements to get tab focus, or at least the pagination buttons)?

Upvotes: 0

Views: 6493

Answers (1)

Fabrício Matté
Fabrício Matté

Reputation: 70169

The main reasons that I can think of:

  1. input, button and a (anchor) elements are "tab-able" by default, unless they have the tabindex="-1" attribute, which is non-standard but most browsers provide support. It serves to disable tabbing. Remove that attribute from your buttons if the value is -1. Also ensure that no JS is setting the elements' tabIndex to -1 as well.

  2. Elements besides the default tab-able ones which have a tabindex (e.g. tabindex="0") also become tab-able.

  3. Unlikely, but ensure that there are no onfocus property or focus handlers which redirect the focus to somewhere else attached to the buttons. The tab key is also trappable, but that is highly unlikely.

Here's a demo illustrating the above.

Upvotes: 3

Related Questions