roving-ux
v1.0.5
Published
stateful roving index for web ui
Downloads
486
Readme
Roving UX
Turns tedious tab UX into a controlled and stateful experience
Learn more in this article by Rob Dodson on web.dev
Try it at this GUI Challenge (use tab
then left || right
arrows)
Features & Why
1️⃣ User's shouldn't need to tab through each item in a list to see the next list
2️⃣ Providing keyboard list UX should be easy
3️⃣ Maintaining the last focused element should be easy
4️⃣ RTL Support
Getting Started
Installation
npm i roving-ux
Use the SkyPack CDN https://cdn.skypack.dev/roving-ux
Looking for a React version, here ya go! https://www.npmjs.com/package/roving-ux-react
Importing
// import from CDN
import { rovingIndex } from 'https://cdn.skypack.dev/roving-ux' // cdn es2020
// import from NPM
import { rovingIndex } from 'roving-ux' // npm es6/common modules
const rovingIndex = require('roving-ux') // commonjs
Syntax
Quick API Overview
rovingIndex({
element: node, // required: the container to get roving index ux
target: "#foo", // optional: a query selector for which children should be focusable
})
Example Usage
import { rovingIndex } from 'roving-ux'
// just one roving ux container
// roving-ux will use direct children as focus targets
rovingIndex({
element: document.querySelector('#carousel')
})
import { rovingIndex } from 'roving-ux'
// many roving ux containers
// passes a custom query selector so the proper elements get focus
document.querySelectorAll('.horizontal-media')
.forEach(scroller => {
rovingIndex({
element: scroller,
target: 'a',
})
})