Bug 260772
| Summary: | AX: Slot elements referenced with aria-labelledby not matching rendered output | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Carlos Lopez <clshortfuse> |
| Component: | Accessibility | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | andresg_22, cfleizach, rniwa, steverep+webkit, tyler_w, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | All | ||
| Bug Depends on: | |||
| Bug Blocks: | 148695 | ||
Carlos Lopez
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
<rdar://problem/114500560>
Steve Repsher
Would this be fixed by https://bugs.webkit.org/show_bug.cgi?id=264410?
Carlos Lopez
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.