Status

()

Core
DOM: Core & HTML
RESOLVED INVALID
5 years ago
5 years ago

People

(Reporter: Tiller, Unassigned)

Tracking

({testcase})

23 Branch
x86_64
Windows 7
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

5 years ago
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
(Reporter)

Updated

5 years ago

Updated

5 years ago
Component: Untriaged → Event Handling
Keywords: testcase
Product: Firefox → Core
Summary: span:after content is focusable → span is focusable
Component: Event Handling → DOM: Core & HTML
I believe what's focusable here is the <label>, not the <span> per se.  And a <label> should definitely be focusable.
(Reporter)

Comment 2

5 years ago
(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.
(Reporter)

Comment 3

5 years ago
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

5 years ago
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'
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.