Bug 298952

Summary: AX: Voiceover focus does not move into dialog element first time it is opened.
Product: WebKit Reporter: Graham Armfield <graham.armfield>
Component: AccessibilityAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: andresg_22, graham.armfield, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 18   
Hardware: iPhone / iPad   
OS: Unspecified   

Graham Armfield
Reported 2025-09-16 07:34:06 PDT
Testing a web page that uses the native HTML5 <dialog> element. The dialog is opened using the javascript showModal() command which is triggered from a <button> element on the page. The autofocus attribute is set on the first heading inside the <dialog> element. Safari focus appears to go to the heading as expected, but when Voiceover is running, Voiceover focus stays on the button on the underlying page and does not go into the dialog. Voiceover focus can now only be moved (by swiping) to the browser chrome and cannot be swiped to any other element on the page. I would expect the Voiceover focus to go to he heading that carries the autofocus attribute, and I would also expect Voiceover to announce the heading that should receive Voiceover focus. The <dialog> element is labelled by the heading using the aria-labelledby attribute on the dialog which links to the id on the heading. So I would also expect Voiceover to announce that the user is in a dialog and to read out the text within the heading. Please note this only happens the first time when the dialog opens. If user moves finger across the browser screen and finds something within the dialog then Voiceover will announce it. If the user then finds the Close button this can be actioned and Voiceover focus is moved back to the button that opened it in the first place. The dialog can now be opened again and Voiceover will successfully announce the dialog and the heading. To recreate the problem after this, reload the page and we're back to the initial state where Voiceover focus will not move into the dialog. Here is the dialog code used: <dialog id="my_dialog" aria-labelledby="modal-heading"> <h2 autofocus tabindex="-1" id="modal-heading">Modal heading - autofocus here</h2> <section> <p>Here's some information inside the &lt;dialog&gt; element. </p> </section> <div> <button type="button" id="close_dialog" onclick="closeDialog()"> Close me! </button> </div> </dialog> An example page can be found here: https://hassellinclusion.github.io/training-examples/dialogs/native-dialog-01.html I do still have an old iPhone running iOS16.7.10 and this does not have the problem.
Attachments
Radar WebKit Bug Importer
Comment 1 2025-09-16 07:34:16 PDT
Graham Armfield
Comment 2 2025-09-17 07:12:05 PDT
I have now updated the iPad to the latest version of iOS and the issue is no longer happening. So I am marking as Resolved.
Note You need to log in before you can comment on or make changes to this bug.