CODEWITHSUNDEEP
htmliossafarimodal-dialogvoiceover
Arpitha Mamidala
Arpitha Mamidala

Reputation: 225

Trap focus with in popup modal only IOS voiceOver

I have clickable link on the parent component which will launch custom modal on top of it. I am having big big issue trapping focus with in the modal only on safari ios VoiceOver. On swiping focus is going behind the parent clickable link. How can i trap focus only on modal and completely disable parent component after modal popup.

My application is on Angular 5

Here is modal template

<div class="modal-backdrop modal-open fade in" data-backdrop="static" data-keyboard="false"></div>
<div class="modal fade in"  id="confirmModal" role="dialog" aria-labelledby="modal-title" data-keyboard="false"  (keydown.escape)="cancel()"  >
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" id="btnClose" class="fa fa-times close" data-dismiss="modal" aria-label="Close" (tap)="cancel()"  (keydown.spacebar)="cancel()" (click)="cancel($event)" (keydown.space)="cancel()" (keydown.enter)="cancel();" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" ></button>                 
            </div>
            <div class="modal-footer">
                <button type="button" id="btnDefault" class="btn btn-default" data-dismiss="modal" (tap)="cancel()"  (keydown.enter)="cancel()" (click)="cancel($event)" (keydown.spacebar)="cancel()"  (keydown.space)="cancel()" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" attr.aria-label="cancelbutton">Cancel</button>
                <button type="button" id="btnPrimary" class="btn btn-primary"  (tap)="onOK()" (keydown.enter)="onOK()" (click)="onOK($event)" (keydown.spacebar)="cancel()" (keydown.space)="onOK()" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" attr.aria-label="buttonLabel">Confirm</button>
            </div>
        </div>      
</div>

Upvotes: 4

Views: 4729

Answers (1)

slugolicious
slugolicious

Reputation: 17563

In general, you should organize your html as

<body>
  <div>
    <!-- your main page -->
  </div>
  <div style="visibility:hidden">
    <!-- your dialog -->
  </div>
</body>

So that the dialog is a "sibling" of the main page. When your dialog is displayed, you can add aria-hidden="true" to the main page and that will completely "hide" the background page from screen readers. VoiceOver won't let you swipe to get to the background page if it's hidden.

<body>
  <div aria-hidden="true">
    <!-- your main page -->
  </div>
  <div style="visibility:visible">
    <!-- your dialog -->
  </div>
</body>

Note the use of the CSS visibility attribute on the dialog. See https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/ for more information on that. Look for the "Additional Gotchas to watch out for" heading.

Also note that you still have to trap the keyboard focus in the dialog. aria-hidden has no affect on the keyboard, it only communicates to the screen reader. To do that, you can use the inert attribute and a polyfill. See the aforementioned blog for information on that too.

Upvotes: 2

Related Questions