Bug 247134

Summary: AX: VoiceOver highlight does not move to Shadow DOM button when using aria-modal and role
Product: WebKit Reporter: Liam DeBeasi <ldebeasi>
Component: AccessibilityAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: aboxhall, andresg_22, apinheiro, cfleizach, dmazzoni, ews-watchlist, jcraig, jdiggs, samuel_white, thomas_mchugh, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: All   
OS: All   
Attachments:
Description Flags
Code reproduction
none
Patch
none
Patch none

Liam DeBeasi
Reported 2022-10-27 09:39:59 PDT
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
Attachments
Code reproduction (682 bytes, text/html)
2022-10-27 09:39 PDT, Liam DeBeasi 		no flags
Details
Patch (3.89 KB, patch)
2022-11-08 18:14 PST, Tommy McHugh 		no flags
DetailsFormatted DiffDiff
Patch (3.91 KB, patch)
2022-11-09 18:43 PST, Tommy McHugh 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2022-10-27 09:40:13 PDT
<rdar://problem/101637934>
Liam DeBeasi
Comment 2 2022-10-27 09:54:00 PDT
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.
Tommy McHugh
Comment 3 2022-11-08 18:14:52 PST
Created attachment 463462 [details] Patch
Andres Gonzalez
Comment 4 2022-11-09 04:36:36 PST
(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!
Tommy McHugh
Comment 5 2022-11-09 18:43:15 PST
Created attachment 463471 [details] Patch
EWS
Comment 6 2022-11-10 06:06:35 PST
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].
Note You need to log in before you can comment on or make changes to this bug.