1804576 - Label activation for labelable but not interactive content, e.g. output element, work differently than other browsers

Status: UNCONFIRMED

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

Description

[sorvell]

Steps to reproduce:

REPRODUCTION: https://lit.dev/playground/#gist=3f5706845f6325a35fb395e5c6634226

1. Created a form associated custom element (face1) that includes a non-interactive element (div) in its shadowRoot.
2. Handled label activation by processing click events on the element itself.
3. Clicked on the face when it is surrounded by a label element.
4. Did the same (face2) but with an interactive element (button) in its shadowRoot.

Actual results:

Clicking on face1 caused label activation.
Clicking on face2 did not.

Expected results:

These are expected to behave the same. Note, this difference does not occur in Chrome or Edge.

The spec appears to be ambiguous here:

"activation behavior of a label element for events targeted at interactive content ... must be to do nothing" (https://html.spec.whatwg.org/multipage/forms.html#the-label-element)

However, "interactive content" does not specifically include face (https://html.spec.whatwg.org/multipage/dom.html#interactive-content).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Kris Maglione [:kmag]]

I don't really know how to triage this when the problem seems to be a spec bug. Edgar, do you have any thoughts?

Comment 3

[Edgar Chen [:edgar]]

The face is not "interactive content" in the spec, there is a spec discussion around this, see https://github.com/whatwg/html/issues/5423.
But in https://boom-bath.glitch.me/face-interactive-content.html, I got the same result on both Chrome and us, so I don't think the face is a "interactive content" in Chrome.

Comment 4

[Edgar Chen [:edgar]]

Attachment: testcase.html

This is not the face specific issue, but a general issue on label element.

In Firefox, click on click me generate two click event, due to the output element is not a interactive content, so clicking it will trigger activation behavior of label element, which activates the labeled control that is the output element itself, so we end up dispatching a click event again.

In Chrome and Safari, there is only one click event, it seems they don't activate the labeled control in this case, maybe due to labeled control and original event target are the same element?

Comment 5

[Edgar Chen [:edgar]]

Spec doesn't say anything about this currently, there is a spec issue for this, https://github.com/whatwg/html/issues/5415.