tabtrap
v1.2.6
Published
A plugin for trapping focus inside an object
Downloads
94
Maintainers
sh0jiReadme
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');
}
});