Bug 265989
| Summary: | AX: Button label is not announced when inside shadowDOM | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Istvan Tutto <istvantutto> |
| Component: | Accessibility | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Critical | CC: | andresg_22, tyler_w, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac (Intel) | ||
| OS: | macOS 14 | ||
Istvan Tutto
When a button's label is provided via a slot that has a `display` style assigned to it, Safari will ignore the slotted content and announce the button without the label.
Demo:
https://codepen.io/istutto/pen/ZEwwzmv
How to reproduce:
For simplicity, I bypass the custom element definition (see demo above for full example).
Load a page with the following DOM:
<button-label-fail>
<template shadowrootmode="open">
<button><slot style="display: inline"></slot></button>
</template>
Test label
</button-label-fail>
Use the inspector of the developer tools on the `button` inside the shadowDOM and not how the button's label is not associated. This is even more obvious when using VoiceOver, as it will only announce `button` when focused.
---
This setup used to work in previous Safari releases (early v17 and before). We own and maintain a design system that provides components for millions of visitors daily. There have been many slot-related bugs in Safari recently, but this is the most severe regression I've seen for a while.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/119303148>
Tyler Wilcock
This should be fixed by:
https://bugs.webkit.org/show_bug.cgi?id=264410
Which shipped in macOS 14.2 and iOS 17.2. Please let me know if you experience otherwise. Thanks!
Tyler Wilcock
*** This bug has been marked as a duplicate of bug 264410 ***