Created attachment 463275 [details] Code reproduction VoiceOver does not highlight buttons in the Shadow DOM when using aria-modal and role="dialog" on the same element. Steps to reproduce: 1. Open code reproduction on iOS. 2. Turn VoiceOver on. 3. Swipe to the right. Observe that VoiceOver announces "Before Button". 4. Swipe to the right. Observe that VoiceOver announces "After Button". Expected Behavior: When swiping right in step 4, I expect VoiceOver to announce "Button One". Actual Behavior: VoiceOver skips the button and announces "After Button" instead. Other Information: - This also happens with role="alertdialog" - Moving the role to a child element inside of the modal avoids the issue. - This issue also happens on Safari for macOS. - This issue does not occur on Chrome for Android
<rdar://problem/101637934>
I should also note that having `aria-modal="true"` and `role="dialog"` on different elements leads to other accessibility issues. I mentioned it to highlight that this bug only happens when the two attributes are used on the same element.
Created attachment 463462 [details] Patch
(In reply to Tommy McHugh from comment #3) > Created attachment 463462 [details] > Patch diff --git a/LayoutTests/accessibility/shadow-dom-element-in-aria-modal.html b/LayoutTests/accessibility/shadow-dom-element-in-aria-modal.html new file mode 100644 index 000000000000..11028ab6449d --- /dev/null +++ b/LayoutTests/accessibility/shadow-dom-element-in-aria-modal.html + class MyButton extends HTMLElement { + constructor() { + super(); Style: indentation should be 4 spaces. Thanks!
Created attachment 463471 [details] Patch
Committed 256531@main (cbf7509a12df): <https://commits.webkit.org/256531@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 463471 [details].