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

[Ojan Vafai]

On Sat, Sep 24, 2011 at 12:45 AM, Kaustubh Atrawalkar <kaustubh at motorola.com
> wrote:

> On Sat, Sep 24, 2011 at 1:57 AM, Ojan Vafai <ojan at chromium.org> wrote:
>
>> Kaustubh, it would help if you could see what the behaviors for
>> disabled/hidden inputs are in various browsers as well.
>>
>
> Checked with other browsers and none support autofocusing of
> disabled/hidden elements. As they might be following the specs above.
>

TL;DR version: The spec does not currently match what browsers do for
programmatic focusability, at least as per what the browser reports for
document.activeElement.

It's not clear to me whether the spec should change or the browsers. Some
relevant browser bugs:
https://bugs.webkit.org/show_bug.cgi?id=40338
https://bugzilla.mozilla.org/show_bug.cgi?id=570835

*"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 only disagreement between browsers seems to be that Opera allows
focusing disabled input elements and IE8 throws an exception when focusing
an unfocusable element.


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


Opera 11.51:
text is focusable
hidden is not focusable
disabled is focusable
readonly is focusable
visiblity-hidden is not focusable
display-none is not focusable
div-hidden is focusable
div-display-none is focusable

IE8:
text is focusable
hidden is not (error thrown) focusable
disabled is not (error thrown) focusable
readonly is focusable
visiblity-hidden is not (error thrown) focusable
display-none is not (error thrown) focusable
div-hidden is focusable
div-display-none is focusable