Bug 231170 - AX: "web dialog" announced again when navigating past a list in modal content
Summary: AX: "web dialog" announced again when navigating past a list in modal content
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Accessibility (show other bugs)
Version: Other
Hardware: iPhone / iPad All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-10-04 08:01 PDT by travisreed7
Modified: 2021-10-04 08:03 PDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description travisreed7 2021-10-04 08:01:32 PDT
I’ve noticed that when navigating through a modal – “web dialog” – with VoiceOver on iOS and the modal contains a list followed by text, or anything else, VO will announce “web dialog” and the modal “title” again when leaving the list. With multiple lists this will happen multiple times. 

Built example from a modal design pattern from Deque.

HTML:

<div id="deque-dialog" class="deque-dialog" data-id="first-deque-dialog">
                        <div class="deque-dialog-screen-wrapper"></div>
                        <div class="deque-dialog-screen">
                            <h1 id="dialogHeading" class="deque-dialog-heading">Simple Dialog</h1>
                            <p class="deque-dialog-description" id="dialogDescription">Please enter your first and last name.</p>
                            <ul>
                                <li>1</li>
                                <li>2</li>
                            </ul>
                            <p>some text</p>
                            <ol>
                                <li>1</li>
                                <li>2</li>
                            </ol>
                            <div class="deque-dialog-buttons">
                                <button class="deque-button deque-dialog-button-submit">Submit</button>
                                <button class="deque-button deque-dialog-button-cancel">Cancel</button>
                                <button class="deque-dialog-button-close" aria-label="Close dialog"><span aria-hidden="true"></span></button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <button id="deque-dialog-trigger" class="deque-dialog-trigger hideFromQuizHint deque-button" aria-controls="deque-dialog"  data-id="first-deque-dialog">Show Dialog!</button>
                    </div>

CSS/JS: 
<link rel="stylesheet" type="text/css" href="https://dequeuniversity.com/assets/js/patterns/deque-patterns.min.css"/>
<script type="text/javascript" src="https://dequeuniversity.com/assets/js/patterns/deque-patterns.min.js"></script>

Please let me know if you have further questions. Thank you.
Comment 1 Radar WebKit Bug Importer 2021-10-04 08:01:49 PDT
<rdar://problem/83835931>
Comment 2 Radar WebKit Bug Importer 2021-10-04 08:03:04 PDT
<rdar://problem/83835963>