Neurotic and Probably Misinformed

    roving-ux

    1.0.2 • Public • Published

    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


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

    Install

    npm i roving-ux

    DownloadsWeekly Downloads

    11

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    27.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • argyleink