A focus trap helper for keyboard navigation on the web.

Loock logo

Loock • A focus trap helper for keyboard navigation on the web.


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.

  • Use a default context.

Medium article - "How to improve keyboard navigation of your web page"

Try out the demo!


$ npm install @chialab/loock
$ yarn add @chialab/loock

Use via cdn:

<script src="https://unpkg.com/@chialab/loock"></script>


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

const manager = new Manager();
const mainElem = document.getElementById('main');
const navigationElem = document.getElementById('main');

// define the default context
const mainContext = manager.createDefaultContext(mainElem);

// define one context
const context = manager.createContext(navigationElem);

// listen context state
navigationElem.addEventListener('focusenter', () => {
    console.log('entered the navigation context');
    // do stuff

navigationElem.addEventListener('focusexit', () => {
    console.log('exited the navigation context');
    // do stuff

// activate the context
        <nav id="navigation" aria-label="Main navigation">
            <a href="/">Home</a>
            <a href="/posts">Posts</a>
            <a href="/login">Login</a>
        <section id="main" aria-label="Main content">

On page load, the #navigation will be automatically focused and you can navigate the links using the TAB key without losing focus from the nav element. Press ESC to exit the navigation context and skip to the default context, the #main element.

For a more complete example, please see the demo source code.


Build status codecov


Install the dependencies and run the build script:

$ yarn
$ yarn build

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


Run the test script:

$ yarn test

The release script uses Semantic Release to update package version, create a Github release and publish to the NPM registry.

An environment variable named GH_TOKEN with a generated Github Access Token needs to be defined in a local .env file.

$ echo 'export GH_TOKEN="abcxyz"' > .env

Now you are ready to run the release command:

$ yarn release


Loock is released under the MIT license.