Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

arrow-key-navigation

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

arrow-key-navigation

Add left/right key navigation to a KaiOS app or web app

  • 1.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.5K
increased by20.7%
Maintainers
1
Weekly downloads
 
Created
Source

arrow-key-navigation Build Status

Overview

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. contenteditable and Shadow DOM are also supported.

Install

npm install --save arrow-key-navigation

Or browse unpkg.com for a list of build files.

Usage

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 => {
    arrowKeyNavigation.register()
  })
}

Contributing

Build

npm run build

Lint

npm run lint

Fix most lint issues

npm run lint:fix

Test

npm test

Code coverage

npm run cover

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.

Keywords

FAQs

Package last updated on 20 Jun 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc