Nested Label Behavior Standards

Question

I was wondering what would happen if I set the 2 <label> tags, and it turns out that in all recent versions of all browsers except Opera, clicking on the internal label results in clicking only on that label. Here is a demonstration of the behavior of nested tags tags.

My question is: Are there any standards for the behavior of browsers when handling click events in nested shortcuts? All I could find was this MDN section on Gecko behavior, but I couldn't find anything about other browsers.

The reason I am interested in this is because if you can insert tag labels and you can still choose the correct input using the nearest shortcut, then you can do amazing things like this . If the behavior of nested labels is not defined in any standards (so that any browser could do whatever it wants), this will not be an option at all, even in the future. The format for any of these tabs is:

 <label> <input type="radio" name="1"> <span>Shown label</span> <div>Contents of the tab</div> <!--repeat, put further identically-formatted <label>s here--> </label> 

This tab system is already possible when there are no nested labels, assigning the for attribute to the label and id for the input, but then you have to worry about unique identifiers for each input and that is a lot more effort than just that. Here is another demonstration of this (and, as you can see, it is not possible to correctly mark the marked label).

 <label for="tabN"> <span>Shown label<span> </label> <input type="radio" name="1"> <div>Contents of the tab</div> <!--repeat, put further identically-formatted structures here--> 

PS: Please do not answer this question: "This is not what had to be done for input and stickers!". I know this, I'm just wondering if there are any hopes that this will be possible, including in Opera.

Answer 1

As you know, it is not allowed to insert label elements, since label has the following content model:

The content of the phrase, but without elements marked as a descendant, unless it is an element marked as a control, and label descendant elements.

HTML5 defines what happens when a user activates interactive content :

Some elements in HTML have activation behavior, which means that the user can activate them. This triggers a sequence of events depending on the activation mechanism, and usually culminates in the click event, as described below.

Step 3 of the "When you click on a pointing device" section:

Let e ​​be the closest activated element of a user-assigned element (defined below), if any.

To find the closest activated element, an algorithm is defined:

• If the target has a specific activation behavior, then return the target and abort these steps.
• If the target has a parent, then set the target to that parent and return to the first step.
• Otherwise, the nearest activated item is missing.

This section does not explicitly state the case of inappropriate nesting of interactive content. I'm not sure if this algorithm is also applied to invalid code (maybe not). But if applicable, only the internal label should fire.

Answer 2

The html5 spec explicitly says:

The label element must not contain any nested label elements.

As such, browsers deal with nested labels, therefore undefined. In addition, the for attributes are important for accessibility and use and should not be omitted.