polyfills
polyfills copied to clipboard
webcomponents
[scoped-custom-element-registry]: Safari v16.4 focuses all custom elements
Description
Safari v16.4 supports attachInternals and formAssociated features natively, and with the subject polyfill enabled all custom elements on the page are keyboard-focusable using Tab key, regardless of the role or anything else.
Here is the root of the problem:
https://github.com/webcomponents/polyfills/blob/90cb97f847ce918289dac0978c50dcda0a0afd72/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.js#L218-L220
Feels like Safari tries to focus any element with static formAssociated = true. If I change that to false in the polyfill source code then the above wrong behavior becomes fixed.
Is there a way to respect the original formAssociated value instead of enforcing it to be true?
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://www.unpkg.com/@webcomponents/[email protected]/scoped-custom-element-registry.min.js"></script>
</head>
<body>
<input type="text"/>
<my-el></my-el>
<script>
class MyEl extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = '<span>Hello</span>'
}
}
customElements.define('my-el', MyEl)
</script>
</body>
</html>
Version
v0.0.9
Browsers affected
- [ ] Chrome
- [ ] Firefox
- [ ] Edge
- [x] Safari
- [ ] IE 11
Is there a way to respect the original
formAssociatedvalue instead of enforcing it to betrue?
Something like this:
static get ['formAssociated']() {
- return true;
+ return window.customElements._getDefinition(tagName)?.formAssociated ?? false
}
im seeing this also. i wonder how we can tell safari not to allow host elements to be focusable when formAssociated is true?
Can delegatesFocus: true be used to solve this? It seems like it. Is there any case where you wouldn't want to use that?
I think this is kind of a mixing of issues? in Safari, all formAssociated elements are tabbable. That is kinda separate from what happens "when you tab" to an element imo. delegatesFocus only deals with what should happen when you tab to a custom element. Imo delegatesFocus isn't a solution for "my text component shouldn't be tabbable in the first place". The issue today is if I make a text component using the current polyfill, that element can receive keyboard focus in Safari when it shouldnt.
focus delegation is broken because it breaks text selection. If you have focus delegation turned on, then the act of focusing that internal focusable element breaks the selection event somehow. You click into an element to start selecting, the focus happens, and selection stops.