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

Hi Chris,

Thank you very much for your note on your AOL implementation.  
Checking for specified on the attribute node is a great solution for IE.

I've updated my test page to include a test for specified:

http://trac.bitstructures.com/browser/collected/trunk/html-test-cases/ 
getting-tabindex.html?format=raw

Simon

On 15-Dec-07, at 3:06 PM, Chris Blouch wrote:

>
> 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 Monday, 17 December 2007 14:15:02 UTC