keynav-web v1.4.1

keynav-web

Utility classes to add Keyboard Navigation and Hotkeys for web based UIs.

TODO IE11 support using babel (probably not)

Publish

Build and Test locally

npm install
npm run build
// Load test/keynav.html or test/hotkeys.html in Browser and try it out

Publish NPM Module

// Remember to bump package.json version semantically
npm run build
npm login
npm publish

Keynav Modules/Components

Keyanv

Adds Keyboard navigation to a list of elements with default behavior similar to a native HTML SELECT element. See test/keynav.html for more info.

Example:

// JS
const keynav = new KeynavWeb.Keynav({
    listEl: document.querySelector('.keynav-list'),
    listItemsSelector: '.keynav-list > li',
});
// HTML
<ol class="keynav-list" ...
    <li>List Item A</li>
    <li>List Item B</li>
</ol>

Hotkeys

Adds Hotkeys using data-attributest on an element. Once that element is keyed whatever behavior you added to it is triggered. See test/hotkeys.html for more info.

Example:

// JS
const globalHotkeys = KeynavWeb.Hotkeys.buildGlobal({
    selectorHotkeys: '[data-knw-hotkeys-key]'       // selector can be an attribute or class
});
// HTML
<button data-knw-hotkeys-key='a'>Key a</button>     <!--keying 'a' would click the button -->
<button data-knw-hotkeys-key='b'>Key b</button>

Focus Trap

Traps tabbing withing an element. So you can tab forward or shift+tab on any focussable item within the element BUT not outside it. This is probably only useful in modal dialogs or similar and probably used alongside with Hotkeys. See test/hotkeys.html for more info.

Example:

// JS
const focusTrap = new KeynavWeb.FocusTrap({     // e.g. when opening the dialog
    containerEl: document.querySelector('.my-dialog')
});
focusTrap.remove();     // e.g. when closing the dialog