[w3c/webcomponents] Allow a click on label associated with custom element to focus the custom element (#891)

@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](http://localhost:8080/projects/elix/repro/labelFocus.html) 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](https://html.spec.whatwg.org/multipage/forms.html#category-label), 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`](https://github.com/w3c/webcomponents/issues/830), 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.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/891