Why Button inside Label does not work. Button does not work as expected not to activate Checkbox

Question

I was making a Menu that only appears when a checkbox is checked. And to change the state of that checkbox I need to click on label of it, since the input:checkbox is actually hidden.

What happens is that inside the label I put a button, and that way I can’t activate the checkbox... Note that according to the documentation within the label all the Phrasing_contenthttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

About the: Phrasing Content

Note that I have here the codes, one that does not work with the button inside, and another that works without the button.

Then why the label like the button inside does not activate the checkbox?

li{
  display: inline-block;
  background-color: red;
}
nav {
  display: none;
}
[type="checkbox"] {
  display: none;
}
[type="checkbox"]:checked + nav {
  display: block;
}
label {
  cursor:pointer;
}

<label for="btnx"><button>button</button></label>
<input type="checkbox" name="" id="btnx">
<nav>
  <ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
  </ul>
</nav>
<br><br>
<label for="btny">label</label>
<input type="checkbox" name="" id="btny">
<nav>
  <ul>
    <li>item 04</li>
    <li>item 05</li>
    <li>item 06</li>
  </ul>
</nav>

Answer 1

The problem is that the <label> has only one interactive child and, by default, the interaction with these elements should not activate the <label>. See the excerpt from HTML Standard:

The label element’s Exact default Presentation and behavior, in particular what its Activation behavior Might be, if Anything, should match the Platform’s label behavior. The Activation behavior of a label element for Events Targeted at Interactive content Descendants of a label element, and any Descendants of those Interactive content Descendants, must be to do Nothing.

In free translation, "the exact standard presentation and behavior of the element <label>, in particular what its activation behaviour should be, it should correspond to the behaviour of the <label> platform. The activation behaviour of an element of <label> for events intended to descendants of interactive content of a label element and any descendants of those descendants of interactive content must be to do nothing".

That is, click the button inside the <label> does not activate the click <label>, and in no interactive element:

Alvo: <input type="checkbox" id="check">

<div>
  <p>Teste com o campo de texto:</p>
  <label for="check">
    <input type="text">
  </label>
</div>

<div>
  <p>Teste com o campo de checkbox:</p>
  <label for="check">
    <input type="checkbox">
  </label>
</div>

<div>
  <p>Teste com o campo de radio:</p>
  <label for="check">
    <input type="radio">
  </label>
</div>

Note that no interaction with the elements within the <label> activates the checkbox selection.

Interestingly this is not a problem with the target of <label>, because if we verify the value of the attribute control in Javascript, which has a reference to the target element, we will see that it will be the <input type="checkbox"> how we define with the attribute for.

const label = document.querySelector('label[for="btnx"]');

console.log(label.control);

li{
  display: inline-block;
  background-color: red;
}
nav {
  display: none;
}
[type="checkbox"] {
  display: none;
}
[type="checkbox"]:checked + nav {
  display: block;
}
label {
  cursor:pointer;
}

<label for="btnx"><button>button</button></label>
<input type="checkbox" name="" id="btnx">
<nav>
  <ul>
    <li>item 01</li>
    <li>item 02</li>
    <li>item 03</li>
  </ul>
</nav>
<br><br>
<label for="btny">label</label>
<input type="checkbox" name="" id="btny">
<nav>
  <ul>
    <li>item 04</li>
    <li>item 05</li>
    <li>item 06</li>
  </ul>
</nav>