When using fallback content for slots, Safari appears to use `innerText` slot. When fallback nodes are used, these always override the slotted content. Hidden nodes are also, incorrectly, part of the AXLabel. Testcase: <body> <script> function componentFromFragment(name, fragment) { return customElements.define(name, class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open", delegatesFocus: true }); this.shadowRoot.append(document.createRange().createContextualFragment(fragment).cloneNode(true)); } }) } componentFromFragment("x-button", ` <input aria-labelledby=slot type=button><slot id=slot></slot> `); componentFromFragment("x-button-fallback", ` <input aria-labelledby=slot type=button><slot id=slot><span>Fallback</span></slot> `); componentFromFragment("x-button-hidden", ` <input aria-labelledby=slot type=button><slot id=slot><span style="display:none">Hidden</span></slot> `); </script> <x-button>Slotted</x-button> <x-button>Slotted<span style="display:none">Hidden</span></x-button> <x-button-fallback>Slotted</x-button-fallback> <x-button-fallback></x-button-fallback> <x-button-hidden>Slotted</x-button-hidden> <x-button-hidden></x-button-hidden> </body> expected: ['Slotted', 'Slotted', 'Slotted', 'Fallback', 'Slotted', '' ] actual: ['Slotted', 'Slotted Hidden', 'Fallback', 'Fallback', 'Hidden', 'Hidden'] CodePen: https://codepen.io/shortfuse/pen/yLGYWwp Related: https://bugs.webkit.org/show_bug.cgi?id=254934 This is working properly in Chrome and Firefox (nightly/116)
<rdar://problem/114500560>
Would this be fixed by https://bugs.webkit.org/show_bug.cgi?id=264410?
It doesn't appear fixed in Safari 17.4 (and whatever nightly Playwright is using), so I'm still relying on Mutation Observers on light DOM to work around. You can observe for character data and rewrite the contents as aria-label and it will work: https://github.com/clshortfuse/materialdesignweb/blob/76c686238605dba16f293063071fdeabad46be18/mixins/ControlMixin.js#L178 https://github.com/clshortfuse/materialdesignweb/blob/76c686238605dba16f293063071fdeabad46be18/mixins/ControlMixin.js#L100C4-L100C4 IIRC Safari 17.0 may have fixed using slotted content in general, but the issue of using fallback content in <slot> elements is still read as well as visually hidden nodes. The disconnect between what's rendered and the AXLabel still exists.