- From: Simon Bates <simon.bates@utoronto.ca>
- Date: Mon, 17 Dec 2007 09:14:36 -0500
- To: Chris Blouch <cblouch@aol.com>, wai-xtech@w3.org
- Cc: fluid-work@fluidproject.org
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