How can restrict the tab key press only within the modal popup when its open?

Question

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

Answer 1

You are asking about focus trap, it's nicely demonstrated in this demo: http://davidtheclark.github.io/focus-trap/demo/

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:

• implement focus trap by yourself
• use 3rd party solutions of focus trap, e.g. https://github.com/davidtheclark/focus-trap
• use 3rd party solutions of modal windows, e.g. https://github.com/sweetalert2/sweetalert2 which is fully compatible with WAI-ARIA specifications and provide focus trap for you

Answer 2

be careful of any method relying only on javascript events as it won't correctly handle screenreaders

However, this cannot be achieved without javascript like already indicated in multiple questions like How to keep focus within modal dialog?

You have three steps to do:

1. disable screenreader interaction with any other nodes by setting aria-hidden=true on them

For instance:

<main aria-hidden="true"><!-- main content here--></main>
<dialog>Your dialog here</dialog>

2. disable any keyboard interaction with them

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);

3. remove any pointer event for those elements to disable mouse interaction

css sample:

main[aria-hidden='true'] { pointer-events: none;}

Answer 3

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;
});

Answer 4

Right now also Angular CDK provides directive to add focus trap to the modal popup https://material.angular.io/cdk/a11y/api#CdkTrapFocus