❤
npm
Sign UpSign In

tabtrap

1.2.6 • Public • Published

tabtrap

Trap focus inside an object. Useful for ensuring keyboard accessibility of modal dialogs.

Usage

Tabtrap comes with versions for two environments: a dev module version, and a standalone browser version. There are multiple ways to initialize the trap in both versions.

tabtrap.module.js

The module version should be used in dev environments that are using import/require module patterns. It won't work as a standalone file in the browser.

// es6
import tabtrap from 'tabtrap'
// non-es6
var tabtrap = require('tabtrap')
 
// initialize with the static .trapAll() method to trap multiple elements
tabtrap.trapAll('.modal')
 
// initialize with the class (only traps the first element found)
new tabtrap('.modal')

tabtrap.browser.js

The browser version can be used directly in the browser as a standalone file. jQuery is optional.

<body>
    ...
    <script src="jquery.min.js" type="text/javascript"></script> 
    <script src="tabtrap.browser.js" type="text/javascript"></script> 
    <script type="text/javascript">
        // initialize with jQuery
        $('.modal').tabtrap()
 
        // initialize without jQuery
        new tabtrap('.modal')
    </script> 
</body>

Options

Option Type Default
disableOnEscape boolean false
tabbableElements object (view source)

Methods

Tabtrap.trapAll(element[, options])

Tabtrap.trapAll('.modal', { disableOnEscape: true })

You can also place the element or element selector inside the options object:

Tabtrap.trapAll(options)

Tabtrap.trapAll({
    element: '.modal',
    disableOnEscape: true
})

The following methods are used with jQuery .tabtrap('enable')

$('#open').on('click', (e) => {
  $('.modal').tabtrap('enable')
})

.tabtrap('disable')

$('#close').on('click', (e) => {
  $('.modal').tabtrap('disable');
});

.tabtrap('toggle')

// probably don't do this.
$(document).on('keydown', function (e) {
  if (e.which === 84) {     // 't'
    $('.modal').tabtrap('toggle');
  }
});

/tabtrap/

    Package Sidebar

    Install

    npm i tabtrap

    Repository

    github.com/sh0ji/tabtrap

    Homepage

    github.com/sh0ji/tabtrap#readme

    Weekly Downloads

    48

    Version

    1.2.6

    License

    GPL-3.0

    Last publish

    Collaborators

    • sh0ji
    Try on RunKit
    Report malware