https://github.com/argyleink/roving-ux

stateful roving index for web ui
https://github.com/argyleink/roving-ux

accessibility keyboard-navigation ui ux

Last synced: 3 days ago
JSON representation

stateful roving index for web ui

• Host: GitHub
• URL: https://github.com/argyleink/roving-ux
• Owner: argyleink
• Created: 2021-04-30T16:28:52.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-26T05:05:07.000Z (7 months ago)
• Last Synced: 2025-01-15T05:59:57.620Z (10 days ago)
• Topics: accessibility, keyboard-navigation, ui, ux
• Language: JavaScript
• Homepage:
• Size: 341 KB
• Stars: 131
• Watchers: 4
• Forks: 7
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Roving UX



  

  

  



> Turns tedious tab UX into a controlled and stateful experience




**Learn more** in [this article by Rob Dodson on web.dev](https://web.dev/control-focus-with-tabindex/)  

**Try it** at this [GUI Challenge](https://gui-challenges.web.app/media-scroller/dist/) (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

```bash

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

```js

// 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

```js

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

```js

import { rovingIndex } from 'roving-ux'

// just one roving ux container

// roving-ux will use direct children as focus targets

rovingIndex({

  element: document.querySelector('#carousel')

})

```

```js

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

    })

  })

```