Re: Getting the tabindex value with JavaScript on elements without a tabindex attribute

I wrote a focus moving function for our Axs library which you can find here:

http://dev.aol.com/axs

If you look at the comments in JS around line 27 you can see the work I 
did to try and discover whether something is tabbable or not and if that 
item already has a tabindex set or not. In particular I have this comment:



        //4. IE check
        //In IE getAttribute("tabIndex") returns a 0 even when there is 
no tabIndex so we don't know if tabIndex DNE or
        //if it was previously set to 0. So getAttribute should fail in 
IE because 0!=null. The getAttributeNode checks whether the
        //tabIndex value was specified or is just a default value. We 
first have to check if the getAttributeNode method exists
        //because IE5.5 and below lack this. If the method exists we use 
it to check if tabIndex is not specified.
        //If true we go ahead and add a tabIndex.
        //Also note that "tabIndex" must have the capital I to work in 
IE, even though the html is specified as "tabindex"

So the functioning JS is this:

    //Move focus to any item in the DOM passed in.
    // obj-DOM node to focus on
    // tv-tabindex value to set on the object. Default is -1.
    focus:function(obj,tv){
        //These items don't need tabindex added. It first checks to make 
sure we don't need to bother modifying attributes
        var 
focus_exceptions={A:1,AREA:1,BUTTON:1,INPUT:1,OBJECT:1,SELECT:1,TEXTAREA:1};
        if(
            tv ||
            !focus_exceptions[obj.nodeName] &&
            (obj.getAttribute("tabIndex")==null ||
            (obj.getAttributeNode && 
!obj.getAttributeNode("tabIndex").specified))
        )
        {
            //If we aren't passed in a value to set tabindex to then 
default to -1
            if(!tv)tv=-1;
            obj.setAttribute("tabIndex",tv);
        }
        //We check that the .focus method is available before invoking 
it to protect older browser from JS errors
        if(obj.focus)obj.focus();
    }

I think the key snippet you're hunting for is

!obj.getAttributeNode("tabIndex").specified

where we check in IE to make sure that tabIndex was not actually 
specified since getAttribute lies to you in IE by saying a tabindex was 
always set.

AFAIK Safari does not honor the tabindex=-1 hack to allow focusing on 
non-form objects like DIVs.

Hope this helps.

CB

Simon Bates wrote:
>
> I have been writing a function for Dojo's DHTML accessibility support 
> that determines if an element is tab-navigable. The function will use 
> the extended tabindex usage defined by the current ARIA and HTML5 
> drafts. That is, tabindex on all elements, and tabindex="-1" for 
> removal from tab order. I have discovered that there is some variation 
> across browsers in the value that one gets when retrieving the 
> tabindex value on an element without a tabindex attribute. This note 
> summaries what I have seen.
>
> I have looked at two elements: div and input. I am using div as an 
> example of an element that did not have a tabindex attribute in HTML4 
> and input as an example of one that did. I document here two 
> mechanisms for retrieving the tabindex: getAttribute(), and the 
> tabIndex property. Please see below for a link to my test file and a 
> link to the full results.
>
> Firefox 2.0.0.11 Windows XP
> and Minefield nightly 3.0b3pre 2007121405 Windows XP
>
> div with no tabindex:
>    elem.getAttribute("tabindex") = null
>    elem.tabIndex = -1
>
> input with no tabindex:
>    elem.getAttribute("tabindex") = null
>    elem.tabIndex = 0
>
> Internet Explorer 7.0.5730.11 Windows XP
> and Internet Explorer 6 Windows XP
>
> div with no tabindex:
>    elem.getAttribute("tabindex") = 0
>    elem.getAttribute("tabindex", 2) = 32768
>    elem.tabIndex = 0
>
> input with no tabindex:
>    elem.getAttribute("tabindex") = 0
>    elem.getAttribute("tabindex", 2) = 32768
>    elem.tabIndex = 0
>
> On IE it is not possible to determine whether a div has no tabindex or 
> tabindex="0" using elem.getAttribute("tabindex") or elem.tabIndex 
> because a default value of 0 is returned. Microsoft provides an 
> extension to getAttribute() that can be used to determine if the 
> tabindex is unset. If a second parameter of value "2" is passed to 
> getAttribute(), a value of 32768 is returned whenever tabindex is not 
> set. See Microsoft's documentation on getAttribute:
>
> http://msdn2.microsoft.com/en-us/library/ms536429.aspx
>
> I have been unable to find documentation on the value of 32768 as used 
> for tabIndex but it is outside of the range of 0 to 32767 specified by 
> HTML 4:
>
> http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
>
> Safari 3.0.4 Mac
>
> div with no tabindex:
>    elem.getAttribute("tabindex") = null
>    elem.tabIndex = undefined
>
> input with no tabindex:
>    elem.getAttribute("tabindex") = null
>    elem.tabIndex = 0
>
> Test file used to gather results:
>
> http://trac.bitstructures.com/browser/collected/trunk/html-test-cases/getting-tabindex.html?format=raw 
>
>
> Collected test results:
>
> http://trac.bitstructures.com/browser/collected/trunk/html-test-cases/getting-tabindex-results.html?format=raw 
>
>
> Please let me know if you see any shortcomings in the test file or 
> results.
>
> Simon Bates
> Adaptive Technology Resource Centre
> University of Toronto
>
>

Received on Saturday, 15 December 2007 20:07:12 UTC