Search code examples
javascriptjqueryinternet-explorer-7

Why does IE7 add tabindex="0" to elements without tabindex?

I'm developing a web application that requries alot of keyboard navigation.

I've taken control of tab key navigation and I select all elements with the following example jQuery selection:

elements = $("div").find("[tabindex]:visible").not("[tabindex='0'], :disabled");

So I do not select invisible elements, elements that are disabled or have a tabindex of 0.

This works great in Firefox, Chrome and IE8+. Sadly, the project requires support for IE7. For some reason IE7 seems to add tabindex="0" to elements without a tabindex set by us and elements contains elements with tabindex="0" in IE7 eventhough the selector should not add them.

Anyone know why IE7 behaves this way and if there's something that can be done about it?

This causes a bad performance hit in our worst case scenario where elements contains over 300 elements in all other browsers except IE7, which contains almost 800.

edit:

I've managed to write a selector that does not include elements with tabindex="0" in IE7 as well.

elements = $("div").find("[tabindex][tabindex!=0][tabindex!=-1]:visible:not(:disabled)");
Solution

  • HTML uses the tabindex attribute to control the tab order. So tabindex is added for all elements by default to make the page elements keyboard accessible. It is also used for the focus pseudo class in other browsers.

    References