Rodney Rehm Reporter
	Description • 8 years ago

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20160105164030

Steps to reproduce:

1. create HTML fragment: <label tabindex="0" for="target"><input id="target">
2. click on the label and see focus is forwarded to the input
3. click on the document, then press the tab key and see that the label itself is focused

test case: http://jsbin.com/zotugibuho/1/edit?html,css,output


Actual results:

the label element got focus


Expected results:

the label should not have gotten focus, because it shouldn't have been part of the document's sequential navigation focus order.

	Mats Palmgren (inactive)
	Comment 1 • 8 years ago

I don't see any support for your expected results in the spec.
There is no exception for label elements there AFAICT.
Please point it out if I missed it.
https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex

Chrome and IE11 behaves the same way as Firefox, so I don't think
we should change this unless there is first a HTML spec change
that describes the suggested new behavior for label elements.

	Rodney Rehm Reporter
	Comment 2 • 8 years ago

The specification does not mention this particular case. Chrome does not add the label to the tabbing sequence, but it seems IE11 and Edge 12 do. I opened the issue believing Firefox was the only browser exhibiting this behavior - I was wrong, so this issue should probably be closed, sorry.

	Rodney Rehm Reporter
	Comment 3 • 8 years ago

Ah, now I see why the IE11 thing escaped me.

For the record, IE11 does not forward focus to the referenced input element, if the label is made focusable via adding a tabindex. This is not the case in Firefox. Click and script focus forward focus to the input element, while keyboard focus shifts focus to the label element itself. In Chrome the label element does not become keyboard focusable.

I think that Firefox should align the behavior of script-, click- and keyboard-focus.

	Mats Palmgren (inactive)
	Comment 4 • 8 years ago

I get the same results in Firefox, Chrome and IE11 when:
1. tabbing to the label - the focus stays on the <label> element
2. clicking on "Label:" - first the <label> is
   focused (on mousedown) then the <input> is focused (on mouseup)

I get different results when:
3. focusing the <label> via script: document.querySelector('label').focus())
   (click the "label.focus()" button)
In Firefox: the <input> is focused.
In IE11 and Chrome the <label> is focused.

	Mats Palmgren (inactive)
	Comment 5 • 8 years ago

The relevant spec sections for focus():
https://html.spec.whatwg.org/multipage/interaction.html#dom-focus
https://html.spec.whatwg.org/multipage/interaction.html#focusing-steps
https://html.spec.whatwg.org/multipage/interaction.html#focus-update-steps
and the section on <label>:
https://html.spec.whatwg.org/multipage/forms.html#the-label-element

I don't see anything there that makes an exception for <label> when
it is an /focusable area/ (e.g. when it has tabindex="0") so I think
Chrome and IE11 is correct for case 3 above.

So that seems like a bug in Firefox.

	Olli Pettay [:smaug][bugs@pettay.fi]
	Comment 6 • 8 years ago

Not sure if it was about this case where the spec was buggy when dealing with focus and <label>. Better to check if there is related spec bug.

	Paul LeBeau
	Comment 7 • 8 years ago

Here's another (even simpler) test case.

https://jsfiddle.net/gqo5erxs/

The label gets focus on Chrome and IE. But doesn't in FF.


The reason I found this bug was because I had a custom styled checkbox where the <input> element is made transparent and the label gets some custom checkbox styling.  AFAIK this is a very common approach to applying a custom style to radio and checkbox inputs.  Unfortunately my accessibility behaviour is broken in FF because I can't focus the label when I need to (eg. on error etc).

	Mu-An Chiou (muan)
	Comment 9 • 6 years ago

Just want to add a note to say that we ran into this problem recently at GitHub. On repository creation page: https://github.com/new, the repository owner dropdown menu uses `label[tabindex=0]` + `.focus()` to provide keyboard navigation support with ArrowUp and ArrowDown. This works in IE11/Edge/Chrome/Safari, but sadly not in Firefox.

	Pulsebot
	Comment 19 • 4 years ago

Pushed by ccoroiu@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/242188be2948
Forward focus only if label is not focusable r=edgar

	Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)
	Comment 20 • 4 years ago

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/22449 for changes under testing/web-platform/tests

	Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)
	Comment 21 • 4 years ago

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

	Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)
	Comment 23 • 4 years ago

Upstream PR merged by moz-wptsync-bot