I don't think this is quite the right solution. We do have two form elements here (the profile and the image), so each should have its label. What I think is incorrect is that the image control is inside the profile selection label.

Instead, I think the right thing to do is to make sure the profile item label does not enclose the image form element and label.

@minrk the background is observing that nesting <label> tags isn't a well defined HTML it seems.

For example we had a label for each radio button, and when click on a label with an associated radio button, they are supposed to be selected. But, what if the label has a label inside it - then what?

In https://stackoverflow.com/a/20842000/2220152, a person leads with:

As you know, it is not allowed to nest label elements,

And another post sais:

The html5 spec explicitly says:

The label element must not contain any nested label elements.

I have not found something in the html5 specification or similar saying this explicitly, but I've seen a validator warning about it and these stackoverflow responses.

Thanks! I do understand the background, and that there shouldn't be a label inside another. What I mean is that the second label, which is for a real control, shouldn't be inside the first. Not that the second label shouldn't be a label at all. There also shouldn't be any interactive elements inside a label. That ought to mean the image select element to which the inner label applies also shouldn't be inside the outer label.

/cc @batpad as well