Menu
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>
613
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.
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
