Bug 273635

Summary: AX: VoiceOver cursor does not sync with browser focus after closing dialog when interactive element is positioned behind it
Product: WebKit Reporter: marc.solomon
Component: AccessibilityAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: andresg_22, sofia.wa, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 17   
Hardware: iPhone / iPad   
OS: iOS 17   
Attachments:
Description Flags
Video recording of VO cursor not syncing with browser focus when button is positioned behind dialog
none
Video recording of VO cursor syncing with browser focus when button is not positioned behind dialog none

marc.solomon
Reported 2024-05-02 10:57:49 PDT
Issue summary: When there is an interactive element positioned behind a <dialog> OR custom modal (i.e. the box-model of the interactive element overlaps/coincides with the box-model of the <dialog>/custom modal), the VoiceOver cursor does not sync with browser focus (as all other screen readers we've tested do: NVDA, JAWS, TalkBack). Instead, the VO cursor moves to the interactive element that is positioned directly behind (or closest to) where focus was just before the modal was closed. Steps to reproduce: 1. Open https://codepen.io/marcsolo/pen/RwOzRvy in iOS Safari 2. Turn on VoiceOver 3. Navigate to Dialog A button in <header> 4. Activate button 5. Activate Close button in dialog Expected result: VoiceOver cursor moves back to the button that you used to open the dialog (syncs with position of focus in browser) Actual result: VoiceOver cursor moves to Example button that is positioned behind where dialog was displayed Note: This issue may be related to Bug 263069 - AX: VoiceOver on iOS moves focus away, even when HTMLElement.focus() is called on an element
Attachments
Video recording of VO cursor not syncing with browser focus when button is positioned behind dialog (6.77 MB, video/quicktime)
2024-05-02 10:59 PDT, marc.solomon 		no flags
Details
Video recording of VO cursor syncing with browser focus when button is not positioned behind dialog (6.55 MB, video/quicktime)
2024-05-02 10:59 PDT, marc.solomon 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-05-02 10:58:00 PDT
<rdar://problem/127440989>
marc.solomon
Comment 2 2024-05-02 10:59:11 PDT
Created attachment 471257 [details] Video recording of VO cursor not syncing with browser focus when button is positioned behind dialog
marc.solomon
Comment 3 2024-05-02 10:59:46 PDT
Created attachment 471258 [details] Video recording of VO cursor syncing with browser focus when button is not positioned behind dialog
James Craig
Comment 4 2024-05-02 15:04:51 PDT
*** Bug 273634 has been marked as a duplicate of this bug. ***
Sofia Arzt
Comment 5 2024-12-18 01:23:19 PST
After refactoring all non-modals on a website to become “true” modals, opened with showModal() and closed with close(), we came across this issue as well.
 Created a very simple codepen to reproduce: https://codepen.io/Sofarz/pen/dPbNYoP 
Steps to reproduce: - Using voiceOver on iOS safari and chrome - open dialog using showModal() functionality - navigate to button in header, in my case the close button. - Close using close() functionality Expected result: the focus is set on the button triggering the opening of the modal. Actual result: The focus is briefly set on the button triggering the opening of the modal as expected, but then directly moved to the element that was positioned behind the button in the dialog header.
 To handle this we have needed to set focus with a timeout, which works ok but is not ideal since voiceOver users will experience the reading being cut off when switching focus.
Note You need to log in before you can comment on or make changes to this bug.