Skip to content

argyleink/roving-ux

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Roving UX

Total Downloads Latest Release License

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',
    })
  })