Skip to content

chialab/loock

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Loock logo

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

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.
  • Use a default context.

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

Try out the demo!

Install

NPM

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

CDN

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

Usage

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
context.enter();
<html>
    <body>
        <nav id="navigation" aria-label="Main navigation">
            <a href="/">Home</a>
            <a href="/posts">Posts</a>
            <a href="/login">Login</a>
        </nav>
        <section id="main" aria-label="Main content">
            ...
        </section>
    </body>
</html>

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.


Development

Build status codecov

Build

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.

Test

Run the test script:

yarn test

License

Loock is released under the MIT license.