NEW 260772
AX: Slot elements referenced with aria-labelledby not matching rendered output 
https://bugs.webkit.org/show_bug.cgi?id=260772
Summary AX: Slot elements referenced with aria-labelledby not matching rendered output
Carlos Lopez
Reported 2023-08-26 10:42:57 PDT
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)
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-08-26 10:43:04 PDT
<rdar://problem/114500560>
Steve Repsher
Comment 2 2023-11-30 12:23:52 PST
Would this be fixed by https://bugs.webkit.org/show_bug.cgi?id=264410?
Carlos Lopez
Comment 3 2024-01-16 12:49:43 PST
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.
Note You need to log in before you can comment on or make changes to this bug.