Needling Perl Mongers

    @chialab/loock
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.9 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @chialab/loock

    DownloadsWeekly Downloads

    389

    Version

    3.2.9

    License

    MIT

    Unpacked Size

    96.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • chialab-admin
    • chialab-developers