/loock

🧲 Refined keyboard navigation for websites and components.

Primary LanguageTypeScriptMIT LicenseMIT

Loock

Refined keyboard navigation for websites and components.

NPM

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 status

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.