921408 - span is focusable

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[Tiller]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0 (Beta/Release)
Build ID: 20130814063812

Steps to reproduce:

http://stooit.com/pub/testFocus.htm

Made a <label><span>Text</span><input type="text" /></label>
With CSS: span:after { content: " . . . . .[...]  . . " }



Actual results:

When pressing Tab being on the previous field, the span takes the focus before the input. The span is "focusable".


Expected results:

Jumping from the login field to the password field

Comment 1

[Boris Zbarsky [:bzbarsky]]

I believe what's focusable here is the <label>, not the <span> per se.  And a <label> should definitely be focusable.

Comment 2

[Tiller]

(In reply to Boris Zbarsky [:bz] from comment #1)
> I believe what's focusable here is the <label>, not the <span> per se.  And
> a <label> should definitely be focusable.

The label is in display:block and takes all the line.
We can clearly see that only the <span> is focused.

Comment 3

[Tiller]

I tried some more things, I finally know why this happen.
The thing that makes the <span> focusable is the fact there are some hidden text (because overflow-x: hidden & nowrap).

I made this simple page for example:
http://stooit.com/pub/testFocus2.htm

However, I'm sure it's a normal behavior. (At least, Chrome & IE don't have it)

Comment 4

[Neil Deakin]

The span is focused here, not the label. You've made the span hidden scrollable horizontally, but not hidden vertically, so scrollbars could potentially appear vertically.

For accessibility reasons, we allow focusing any potentially visible scrollable area so that you can scroll them without using the mouse. You can fix this issue by using 'overflow: hidden' rather than 'overflow-x: hidden'