Skip to content
Add left/right focus navigation to a web app or KaiOS app
JavaScript TypeScript HTML
Branch: master
Clone or download
Latest commit 873b7fa Nov 9, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix: add summary element (#5) Nov 9, 2019
.travis.yml add travis config file Oct 28, 2019
LICENSE feat: add manual KaiOS packaged app test, UMD build (#6) Nov 9, 2019
index.html feat: add manual KaiOS packaged app test, UMD build (#6) Nov 9, 2019
manifest.webapp feat: add manual KaiOS packaged app test, UMD build (#6) Nov 9, 2019
package-lock.json 1.1.0 Nov 9, 2019
package.json 1.1.0 Nov 9, 2019
tsconfig.json more progress Oct 27, 2019
tslint.json more progress Oct 27, 2019

arrow-key-navigation Build Status


arrow-key-navigation is a simple utility to add left/right focus navigation to a web app. It's designed for KaiOS apps but also available for any browser.

The basic idea is to make the and keys act similar to Tab and Shift+Tab, i.e. to change focus between focusable elements in the DOM. Since the and keys typically scroll the page in KaiOS, this is usually all you need to add basic KaiOS accessibility to an existing web app.

It will also listen for the Enter key for certain special cases like checkbox/radio buttons.


npm install --save arrow-key-navigation

Or browse for a list of build files.


import * as arrowKeyNavigation from 'arrow-key-navigation'

arrowKeyNavigation.register() // start listening for key inputs
arrowKeyNavigation.unregister() // stop listening

Focus traps

To build an accessible dialog, you need to "trap" focus inside of the dialog, i.e. make it so focus cannot escape the dialog while it is active. To accomplish this, you can set a "focus trap test" which takes an element as input and returns truthy/falsy to indicate that the element is a focus trap (e.g. the modal dialog root):

arrowKeyNavigation.setFocusTrapTest(element => {
  return element.classList.contains('my-dialog-class')

If you don't call setFocusTrapTest(), then arrow-key-navigation will assume that there are no focus traps in your app.

Conditional or lazy loading

You can choose to install this module only in KaiOS environments using logic like the following:

if (/KAIOS/.test(navigator.userAgent)) {
  import('arrow-key-navigation').then(arrowKeyNavigation => {



npm run build


npm run lint

Fix most lint issues

npm run lint:fix


npm test

Manual KaiOS app test

The index.html and manifest.webapp files are designed for a quick-and-dirty KaiOS app test.

Run npm run build and then install the root directory as a packaged KaiOS app to test it.

You can’t perform that action at this time.