Special case label associated with a button in popover light dismiss

[lukewarlow]

What problem are you trying to solve?

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.

Originally posted at openui/open-ui#1369

What solutions exist today?

None really, not using the label element with a button is about all you can do to avoid this.

How would you solve it?

Update https://html.spec.whatwg.org/multipage/popover.html#nearest-inclusive-target-popover such that when currentNode is a label element it looks at it's labeled control like it would if currentNode was a button.

More concretely once #12184 is finished and merged.

I'd update the "target popover" algorithm, adding a new step 1, that when node is a label it should return its labeled control's target popover reinvoking the same algorithm but with the target button.

e.g.

<li>
 <p>If <var>node</var> is a <span data-x="HTMLLabelElement">HTML label element</span>, then:</p>

 <ol>
  <li><p>If the <span>activation behavior</span> of <var>node</var> is to activate its
  <span>labeled control</span>, then return <var>node</var>'s <span>labeled control</span>'s
  <span>target popover</span>.</p></li>
 </ol>
</li>

Anything else?

No response

[lukewarlow]

@mfreed7 given the openui discussion can I count Chromium as supportive of this change?

[mfreed7]

@mfreed7 given the openui discussion can I count Chromium as supportive of this change?

I need to think for a bit about the shape of the solution (looks great on a first look, just need to think about it), but overall I'm very supportive of this change.