Loock

Refined keyboard navigation for websites and components.

Introducing Loock

• Organize your web page or web application by navigation areas.
• Never lose the context while navigating the area with the TAB key.
• Leave the context with the ESC key.

Install

NPM

npm install @chialab/loock

yarn add @chialab/loock

CDN

import { focusTrapBehavior } from 'https://unpkg.com/@chialab/loock?module';

Usage

import { focusTrapBehavior } from '@chialab/loock';

const dialog = document.getElementById('.dialog');
const trap = focusTrapBehavior(dialog, {
    inert: true,
});

dialog.addEventListener('open', () => {
    trap.connect();
});

Development

Build

Install the dependencies and run the build script:

yarn install

yarn build

This will generate the bundles in the dist folder, as well as the declaration file.

Test

Run the test script:

yarn test

License

Loock is released under the MIT license.