I have a modal popup opened. I have accessibility requirement. So added ARIA related labels. But when i click tab key continuously focus going to the page behind the actual page.
Added role="dialog" in html file
But when modal opened i want only the focus navigate within the modal popup.
Working on Angular4, HTML5 project. Better if we find a solution within HTML file itself. I mean without added any javascript/jQuery related stuffs to prevent this
You are asking about focus trap, it's nicely demonstrated in this demo: https://focus-trap.github.io/focus-trap/
Adding role="dialog" will not automatically provide trap the focus within that element. In fact, there's no native focus trap provided by browsers.
You need to go with one of following options:
// place this line in the dialog show function - to only add the listener when the dialog is shown
window.addEventListener('keydown', handleKey);
// uncomment and place this in the dialog close/hide function to remove the listener when dialog is closed/hidden
// window.removeEventListener('keydown', handleKey);
function handleKey(e) {
if (e.keyCode === 9) {
let focusable = document.querySelector('#modal').querySelectorAll('input,button,select,textarea');
if (focusable.length) {
let first = focusable[0];
let last = focusable[focusable.length - 1];
let shift = e.shiftKey;
if (shift) {
if (e.target === first) { // shift-tab pressed on first input in dialog
last.focus();
e.preventDefault();
}
} else {
if (e.target === last) { // tab pressed on last input in dialog
first.focus();
e.preventDefault();
}
}
}
}
}
However, this cannot be achieved without javascript like already indicated in multiple questions like How to keep focus within modal dialog?
aria-hidden=true on themFor instance:
<main aria-hidden="true"><!-- main content here--></main>
<dialog>Your dialog here</dialog>
This has to be done in Javascript / or jQuery.
This is a one-liner instruction in jQuery, using jquery-ui
$("main :focusable").addClass("disabled").attr("tabindex", -1);
The reverse can be achieved using:
$(".disabled").removeClass("disabled").attr("tabindex", 0);
css sample:
main[aria-hidden='true'] { pointer-events: none;}
Here's my solution. It traps Tab or Shift+Tab as necessary on first/last element of modal dialog (in my case found with role="dialog"). Eligible elements being checked are all visible input controls whose HTML may be input,select,textarea,button.
$(document).on('keydown', function(e) {
var target = e.target;
var shiftPressed = e.shiftKey;
// If TAB key pressed
if (e.keyCode == 9) {
// If inside a Modal dialog (determined by attribute role="dialog")
if ($(target).parents('[role=dialog]').length) {
// Find first or last input element in the dialog parent (depending on whether Shift was pressed).
// Input elements must be visible, and can be Input/Select/Button/Textarea.
var borderElem = shiftPressed ?
$(target).closest('[role=dialog]').find('input:visible,select:visible,button:visible,textarea:visible').first()
:
$(target).closest('[role=dialog]').find('input:visible,select:visible,button:visible,textarea:visible').last();
if ($(borderElem).length) {
if ($(target).is($(borderElem))) {
return false;
} else {
return true;
}
}
}
}
return true;
});
I'm not an expert on A11y, but I'm pretty sure this is okay, or pretty darn close to it. Please comment if you have any A11y feedback so I can update. I'll also update if this shows up as problematic on A11y scans that I run.
So this is a very simple solution, and it's working for me: Put this as the last element in your modal, and add the element id for where you want it to loop back to. This should most likely be the same place that receives focus when you first launch the modal.
<span tabindex="0" aria-hidden="true" onfocus="document.getElementById('the_element_id').focus()"></span>
<div
class="my-modal"
id="my-modal-123"
tabindex="-1"
aria-modal="true"
aria-label="Description for modal content"
role="dialog"
>
<!-- modal content -->
...
<span tabindex="0" aria-hidden="true" onfocus="document.getElementById('my-modal-123').focus()"></span>
</div> <!-- .my-modal -->
Right now also Angular CDK provides directive to add focus trap to the modal popup https://material.angular.io/cdk/a11y/api#CdkTrapFocus
the parent dialog element should have role="dialog" to indicate this is a dialog.
In your case, you're also missing the aria-modal="true" which should tell the browser and screen readers that the focus should stay only within the modal.
Using aria-modal="true" replaces the need to add aria-hidden="true" for elements that should be hidden from screen readers and not receive keyboard focus outside the modal while the modal is open.
If the above method does not work, you may still want to use aria-hidden="true" for the parent element outside the modal to prevent keyboard from leaving the modal.
If for some reason that still does not work and you need manual control over keyboard focus, you can check which elements receive keyboard focus outside the modal and then set their tabindex attribute to tabindex="-1", meaning they can still receive focus but not from the keyboard. In this approach you need to be careful, because when the modal closes you'll want to restore the functionality by either removing the tabindex="-1" from those elements or by setting it back to tabindex="0"
Tried different solutions with tabindex='-1' and other HTML changes but nothing is worked in my case, so here is something which worked in my case.
Step 1: Add keydown event on dialog component
@HostListener('document:keydown', ['$event'])
handleTabKeyWInModel(event: any) {
this.sharedService.handleTabKeyWInModel(event, '#modal_id', this.elementRef.nativeElement, 'input,button,select,textarea,a,[tabindex]:not([tabindex="-1"])');
}
This will filters the elements which are preseneted in the Modal dialog.
Step 2: Add common method to handle focus in shared service (or you can add it in your component as well)
handleTabKeyWInModel(e, modelId: string, nativeElement, tagsList: string) {
if (e.keyCode === 9) {
const focusable = nativeElement.querySelector(modelId).querySelectorAll(tagsList);
if (focusable.length) {
const first = focusable[0];
const last = focusable[focusable.length - 1];
const shift = e.shiftKey;
if (shift) {
if (e.target === first) { // shift-tab pressed on first input in dialog
last.focus();
e.preventDefault();
}
} else {
if (e.target === last) { // tab pressed on last input in dialog
first.focus();
e.preventDefault();
}
}
}
}
}
Now this method will take the modal dialog native element and start evaluate on every tab key. Finally we will filter the event on first and last so that we can focus on appropriate elements (on first after last element tab click and on last shift+tab event on first element).
Happy Coding.. :)
You can try this below code. Only pure JavaScript without any third party library & it works for me :)
Step 1: On Zoom Icon click:
var currentFocus; /*As a global variable*/
/*Current activeElement before PopUp Modal opens. Also define currentFocus variable as a global variable so that it value is stored and can we accessible inside other functions wherever needed.*/
currentFocus = document.activeElement;
window.addEventListener('keydown', handleTabKey)
function handleTabKey(e){
if (e.keyCode === 9 || e.key=== 'Tab')/*Tab Key Detection*/{
/*PopUp Modal focusable elements, on which we want focus on tab key press*/
let focusElement = document.querySelector('#sample-modal').querySelectorAll('.popup-cta > a.btn, a.closepop');
let first = focusElement[0];
let last = focusElement[focusElement.length - 1];
e.preventDefault();
/*Current activeElement on PopUp Modal*/
let activeNode = document.activeElement;
switch(activeNode){
case first:
first.blur();
last.focus();
break;
case last:
last.blur();
first.focus();
break;
default:
first.focus();
}
}
}
Step 2: On Close Icon Click
window.removeEventListener('keydown', handleTabKey);
currentFocus.focus();
If you understand this code, it will surely resolve your problems. Reference Link: https://watch.screencastify.com/v/EJjjYaFp5ex8zxvq2Ly6
Note: We can also replace above handleTabKey function with below one:
var shift = e.shiftKey;
if (shift) { /* shift + tab */
e.preventDefault();
switch(document.activeElement){
case first:
first.blur();
last.focus();
break;
case last:
last.blur();
first.focus();
break;
default:
last.focus();
}
} else { /* tab */
e.preventDefault();
switch(document.activeElement){
case first:
first.blur();
last.focus();
break;
case last:
last.blur();
first.focus();
break;
default:
first.focus();
}
}
Best solution:
function getFocusable(context = 'document') {
return Array.from(context.querySelectorAll('button, [href], input:not([type="hidden"]), textarea, select, [tabindex]:not([tabindex="-1"])')).filter(function (el) { return !el.closest('[hidden]'); });
}
const $dialog = document.querySelector('.mymodaldialog');
const focusableItems = getFocusable($dialog);
document.addEventListener("keydown", function (e) {
if (e.keyCode === 9) { // Tab & Shift+Tab
const focusedItem = e.target;
const focusedItemIndex = focusableItems.indexOf(focusedItem);
if (e.shiftKey) {
if (!$dialog.contains(e.target) || focusedItemIndex == 0) {
focusableItems[focusableItems.length - 1].focus();
e.preventDefault();
}
} else {
if (!$dialog.contains(e.target) || focusedItemIndex == focusableItems.length - 1) {
focusableItems[0].focus();
e.preventDefault();
}
}
}
});
Here is a fix of @Dmitry Shashurov:
Test here: https://jsfiddle.net/a271dwu0/
///////////////////////////////////////////////////////////
/////////////////////// Focus-trap ///////////////////////
/////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const container = document.querySelector('#container'); // <----- Fill in your div container here and its done
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getFocusable(context = 'document') {
return Array.from(context.querySelectorAll('button, [href], input:not([type="hidden"]), textarea, select, [tabindex]:not([tabindex="-1"])')).filter(function (el) { return !el.closest('[hidden]'); });
}
const focusableItems = getFocusable(container);
document.addEventListener("keydown", function (e) {
if ( window.getComputedStyle(container).display === "none") {
return;
}
if (e.keyCode === 9) { // Tab & Shift+Tab
const focusedItem = e.target;
const focusedItemIndex = focusableItems.indexOf(focusedItem);
if (e.shiftKey) {
if (!container.contains(e.target) || focusedItemIndex === 0) {
focusableItems[focusableItems.length - 1].focus();
e.preventDefault();
}
} else {
if (!container.contains(e.target) || focusedItemIndex == focusableItems.length - 1) {
focusableItems[0].focus();
e.preventDefault();
}
}
}
});
