https://github.com/nolanlawson/arrow-key-navigation
Add left/right focus navigation to a web app or KaiOS app
https://github.com/nolanlawson/arrow-key-navigation
Last synced: 3 months ago
JSON representation
Add left/right focus navigation to a web app or KaiOS app
- Host: GitHub
- URL: https://github.com/nolanlawson/arrow-key-navigation
- Owner: nolanlawson
- License: apache-2.0
- Created: 2019-10-27T20:34:48.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:14:41.000Z (over 2 years ago)
- Last Synced: 2025-01-14T00:43:39.628Z (3 months ago)
- Language: JavaScript
- Size: 2.5 MB
- Stars: 30
- Watchers: 3
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
arrow-key-navigation [](https://travis-ci.org/nolanlawson/arrow-key-navigation)
=====
## 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](https://unpkg.com/browse/arrow-key-navigation/) for a list of build files.
## Usage
```js
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](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal), 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):
```js
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:
```js
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.