When A Label Only Has A Button, A Button Click Does Not (fully?) Trigger The Label

I have two inputs of type radio. For each input there's a correspoding label with a single button inside. I was expecting that clicking the button would have the same effect as cli

Solution 1:

1. A label can only be associated with one form control at a time. This is evidenced by the fact that the for attribute points to an element with a matching ID attribute.

   You have a button that is a descendant of your label; the expected interpretation of this is that the label serves as a label for the button. However, you're trying to associate the radio button, not the button element, with the label. The real problem here is that there is a conflict between the form controls and the label; it's unable to figure out which control it's supposed to be associated to.

   I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the button element.

   I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.

   The validator does nevertheless produce the following error with your markup:

   Error: Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.

   This is because a label element with a for attribute needs to have a form control with that ID value for the for attribute to point to, even if that control is a descendant of the label itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.

2. Without knowing what you're trying to accomplish here, the best advice I can give if you just want the label to have the appearance of a button is to just style it as such.