Jquery-keyboard-trap NPM

jquery-keyboard-trap

ATTENTION: A non-jQuery version is now available at makeup-keyboard-trap.

Establishes a keyboard tab-loop using the interactive descendants of given container element. Or, in other words, it traps keyboard focus inside the given container element.

$.trapKeyboard(containerEl, options);
$.untrapKeyboard();

For best results, app developer should ensure a descendant of the container element already has keyboard focus before activating this plugin.

Install

npm install jquery-keyboard-trap

Example

HTML structure for a typical dialog, in visible state, with close, cancel & okay focusable elements:

<div role="dialog" class="dialog" aria-labelledby="dialog-0-title" aria-hidden="false">
    <div role="document">
        <header>
            <h2 id="dialog-0-title">Notifications</h2>
            <button aria-label="Close Dialog" id="dialog_close" type="button"></button>
        </header>
        <div>
            <!-- dialog body content would go here -->            
        </div>
        <footer>
            <button type="button">Cancel</button><button type="button">Ok</button>
        </footer>
    </div>
</div>

Focus on an element then execute plugin:

$('#dialog_close').focus();
$.trapKeyboard('[role=dialog]');

The plugin has now created a tab loop using all focusable elements inside the dialog; keyboard focus is now trapped inside the dialog.

Events

keyboardTrap - keyboard has been trapped
keyboardUntrap - keyboard has been untrapped

Options

None.

Dependencies

Notes

Keyboard-trap is a singleton as there can only ever be one active keyboard-trap on a page. Creating a new keyboard-trap will disable the current trap.