Bug 265989 – AX: Button label is not announced when inside shadowDOM

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Accessibility

[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.

[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 ***