Allow a click on label associated with custom element to focus the custom element #891
Comments
|
This should be working in Chrome with form-associated custom elements. Can you post a quick demo? (Your demo link goes to localhost.) |
|
Oh, sorry, I was misremembering. This is whatwg/html#5423. As you can see from there it's not quite as straightforward... The latest thinking there is that we want labelable to be implied by focusable, not by form-associated. So this would depend on driving whatwg/html#5120 to completion. |
|
Thanks for pointing out the broken demo link! It now goes to https://codepen.io/JanMiksovsky/pen/NWxVxzg?editors=1010 as it should have. Also thanks for the related materials, will take a look. |
|
Any updates on this one? I was trying to leverage the native form ecosystem, but am getting hung up on some of the details. Here’s another dead-simple repro — in my case even a direct parent / child wrapping of a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label for form-associated custom elements</title>
</head>
<body>
<form style="display: flex; flex-direction: column; width: 440px;">
<p>
Clicking on the text ought to focus the label in both cases.
It doesn’t work for form-associated custom elements.
</p>
<label style="display: block;">
Label wrapping custom form element.
<custom-text-input></custom-text-input>
</label>
<label style="display: block;">
Label wrapping native form element.
<input type="text">
</label>
</form>
<script>
class CustomTextInput extends HTMLElement {
static get formAssociated() {
return true;
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<input type="text">`;
}
}
customElements.define('custom-text-input', CustomTextInput);
</script>
</body>
</html> |
|
Unfortunately this still doesn't work. A possible workaround:
To find the label:
|
@shleewhite and I have noticed that a standard (or at least widely implemented) UI behavior of
labeldoes not appear to work with custom elements.In all major browsers, clicking a
labelhas 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
delegatesFocusset.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 fordelegatesFocus, if the shadow root hasdelegatesFocusset, 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.
The text was updated successfully, but these errors were encountered: