Allow a click on label associated with custom element to focus the custom element #891
Description
@shleewhite and I have noticed that a standard (or at least widely implemented) UI behavior of label does not appear to work with custom elements.
In all major browsers, clicking a label has the effect of focusing the associated element. See this demo for examples.
This click-to-focus behavior has the effect of providing a larger hit target, and is especially useful for users with a permanent, temporary, or situational lack of fine motor control.
As of the moment, this behavior is not supported for custom elements. Again, see the demo page above for examples, both with and without delegatesFocus set.
According to the spec definition of labelable elements, form-associated custom elements should be labelable, but I can't get the click-to-focus behavior to work even with a form-associated custom element. And in any event, it seems strange to limit this useful behavior to elements associated with forms.
The basic feature we're looking for: clicking a label associated with a custom element should have the effect of calling focus() on that element. Given the latest changes for delegatesFocus, if the shadow root has delegatesFocus set, then clicking the label (a mouse action) should presumably focus the first element in the flat tree that's mouse-focusable.
If this seems reasonable, we're happy to file bugs.