AX: "web dialog" announced again when navigating past a list in modal content

• Component: Accessibility
• Status: NEW ---

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.

[Radar WebKit Bug Importer]

<rdar://problem/83835931>

[Radar WebKit Bug Importer]

<rdar://problem/83835963>