[popover] Should `<label>` be treated the same as the `<button>` it labels for light-dismiss?

[sb3nder]

I've encountered an issue when using <label> elements to label buttons that control popovers.

When a popover is open and the associated label is clicked, the interaction does not behave the same as clicking the button directly.

Toggle buttons

• Clicking the label triggers light-dismiss, then forwards the click to the button, causing the popover to open again.
• Clicking the button directly closes the popover, as expected.

<label>
  label
  <button commandfor="popover" command="toggle-popover">show down</button>
</label>

<label for="btn">label</label>
<button id="btn" commandfor="popover" command="toggle-popover">show down</button>

<div id="popover" popover>popover</div>

---

This issue also applies to show buttons. In that case, the problem is not immediately visible, but the underlying behavior is the same.

• Clicking the label triggers light-dismiss, then forwards the click to the button, causing the popover to open again.
• Clicking the button directly does nothing, as expected.

---

I believe this could be addressed nicely by adding a case to the popover target element algorithm, along the lines of:

1. If node is a label and the label activation behavior is a click fired at the labeled control, let node be the node's labeled control.

whatwg/html#12008

2. If node is a select element which is being rendered as a drop-down box with base appearance, then return node's select popover.
3. ...

(I placed Step 1 first to allow UAs the same freedom for base pickers as for user-defined popovers; if this is unnecessary, steps 1 and 2 could be reversed.)

---

Label spec

Another pre-existing issue:
Differentiate click events re-dispatched by <label> to its control

[lukewarlow]

I think you're right. The handling should apply to the entire click target area not just the specific button itself.