[whatwg] focusability of visibility:hidden and display:none elements WAS: Autofocus readonly Input Elements

[Ian Hickson]

On Mon, 26 Sep 2011, Ojan Vafai wrote:
> 
> *"8.3.2 Focus management*
> 
> An element is *focusable* if the user agent's default behavior allows it to
> be focusable or if the element is specially focusable, but only if the
> element is either being rendered or is a descendant of a canvas element that
> represents embedded content."
> As the test below shows, non-rendered divs with a tabindex are still
> focusable in all browsers.
> 
> "input elements whose type attribute are not in the Hidden state and that
> are not disabled"
> 
> It seems that all browsers also don't make visibility:hidden and 
> display:none input elements focusable.

The spec agrees:

"An element is focusable if the user agent's default behavior allows it to 
be focusable or if the element is specially focusable, but only if the 
element is either being rendered or is a descendant of a canvas element 
that represents embedded content."

I've tried to make this clearer.


> DETAILS:
> http://plexode.com/eval3/#ht=%3Cinput%20id%3Dtext%20type%3D%22%22%3E%3C%2Finput%3E%0A%3Cinput%20id%3Dhidden%20type%3D%22hidden%22%3E%3C%2Finput%3E%0A%3Cinput%20id%3Ddisabled%20disabled%3E%3C%2Finput%3E%0A%3Cinput%20id%3Dreadonly%20readonly%3E%3C%2Finput%3E%0A%3Cinput%20id%3Dvisiblity-hidden%20style%3D%22visibility%3Ahidden%22%3E%3C%2Finput%3E%0A%3Cinput%20id%3Ddisplay-none%20style%3D%22display%3Anone%22%3E%3C%2Finput%3E%0A%3Cdiv%20id%3Ddiv-hidden%20sytle%3D%22visibility%3Ahidden%22%20tabindex%3D1%3E%3C%2Finput%3E%0A%0A%3Cdiv%20id%3Dlogger%3E%3C%2Fdiv%3E&ohh=1&ohj=1&jt=var%20result%20%3D%20''%3B%0A%0Afunction%20isFocusable(type)%20%7B%0A%20%20%20%20var%20element%20%3D%20document.getElementById(type)%3B%0A%20%20%20%20result%20%2B%3D%20type%20%2B%20'%20is'%3B%0A%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20element.focus()%3B%0A%20%20%20%20%20%20%20%20if%20(element%20!%3D%20document.activeElement)%0A%20%20%20%20%20%20%20%20%20%20%20%20result%20%2B%3D%20'%20not'%3B%0A%20%20%20%20%7D%20catch%20(e)%20%7B%0A%20%20%20%20%20%20result%20%2B%3D%20'%20not%20(error%20thrown)'%3B%0A%20%20%20%20%7D%0A%20%20%20%20result%20%2B%3D%20'%20focusable%3Cbr%3E'%3B%0A%7D%0A%0AisFocusable('text')%3B%0AisFocusable('hidden')%3B%0AisFocusable('disabled')%3B%0AisFocusable('readonly')%3B%0AisFocusable('visiblity-hidden')%3B%0AisFocusable('display-none')%3B%0AisFocusable('div-hidden')%3B%0A%0Adocument.getElementById('logger').innerHTML%20%2B%3D%20result%3B&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1
> 
> Firefox 6, Chrome 16, IE9:
> text is focusable
> hidden is not focusable
> disabled is not focusable
> readonly is focusable
> visiblity-hidden is not focusable
> display-none is not focusable
> div-hidden is focusable
> div-display-none is focusable

The test above had a bug which made the <div>s not be properly hidden. 
With that bug fixed, a visibility:hidden div and a display:none div also 
come out as not focusable, as in the spec.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'