stateful roving index for web ui

Related tags

React ui accessibility ux keyboard-navigation
Overview

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',
    })
  })
Comments
  • Add destroy() method to avoid memory leaks in SPAs

    Add destroy() method to avoid memory leaks in SPAs

    I love the functionality of your script, but I realized that if I used it in a site that uses pushState for page loading, it would leak memory as the event handlers are never removed. In order to avoid this problem, I changed rovingIndex to a constructor function — while still allowing it to be called without new — and added a destroy() method to it.

    I put together a codepen so you can see how this would work at https://codepen.io/kswedberg/pen/VwbrgNy

    Let me know if you have any questions or would like me to change anything

    opened by kswedberg 6
  • Ability to set prev and next keys

    Ability to set prev and next keys

    I have a use case where I want to use the up and down keys for the previous and next focus.

    API usage example

    rovingIndex({
  element: document.querySelector('#vertical-accordions'),
  target: '.toggle',
  prev: ['ArrowUp'],
  next: ['ArrowDown'],
})
    opened by kunukn 4
  • Add type definitions

    Add type definitions

    fix #15

    Adds type definitions for the public API, which allows this script to be used with Typescript without any warnings/errors.

    This PR introduces a relatively manual process to keep types updated. AFAIK the only way to automate this is by writing the source using typescript.

    opened by pimdewit 1
  • Type definitions

    Type definitions

    Hi!

    Are type definitions for TypeScript planned to be added to this package? Or perhaps separately in DefinitelyTyped as @types/roving-ux?

    I could open a pull request for this ✌️

    opened by pimdewit 1
  • Add up and down keys

    Add up and down keys

    I have a use case where I want to use the up and down keys for the previous and next focus.

    API usage example

    rovingIndex({
  element: document.querySelector('#vertical-accordions'),
  target: '.toggle'
})
    opened by kunukn 1
  • Use mutation observer

    Use mutation observer

    Replacing deprecated Mutation Events with mutationObserver. Had to move some code around so every instance did not create a new observer. Mainly the event functions Cleanup code now part of mutationObserver's callback.

    opened by Mash19 0
  • Release notes old and no changelog

    Release notes old and no changelog

    Currently roving-ux is at v1.0.5, but the release notes are only for v1.0.2 and older.

    There is also no changelog to at least show any changes.

    Consider adding a changelog or update the release notes to the current version

    opened by GrimLink 1
  • `inert` option

    `inert` option

    Would be worth testing and investigating the option to have inert set on the elements instead of tabindex="-1", as then all the descendants would not be focusable too.

    opened by argyleink 0
  • Feature: API to set the current element programatically

    Feature: API to set the current element programatically

    If the keyboard / roving-ux didnt change the focus, how can this library get the update so it's state can match the new state. could just be exporting active() for users to call themselves? Would also be nice to not have focus called too, so an extra parameter would be nice.

    todo:

    • [ ] decide on an api function to export
    • [ ] add the extra parameter whether or not focus should be called, can default to todays behavior
    • [ ] add a test or 2
    • [ ] update the docs
    opened by argyleink 0
Releases(v1.0.2)
Owner
Adam Argyle
#argyleink { position: #CSS @GoogleChrome @CSSWG; maker: #VisBug; luv: CSS/JS/UX; role: parentNode; }
Adam Argyle
GitHub
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Dec 30, 2022
📋 React Hooks for forms validation (Web + React Native)

English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Русский | Deutsch | Türkçe Features Built with performance and DX in mind

React Hook Form 32.4k Dec 29, 2022
A React-based UI toolkit for the web

Blueprint Blueprint is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications

Palantir Technologies 19.5k Jan 3, 2023
An easily internationalizable, mobile-friendly datepicker library for the web

react-dates An easily internationalizable, accessible, mobile-friendly datepicker library for the web. Live Playground For examples of the datepicker

Airbnb 12k Dec 30, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
Aplicação web desenvolvida durante a Imersão React #3 da Alura

Sobre o projeto ?? O Alurakut é uma aplicação web clone do nosso queridíssimo e já falecido Orkut, porém trazendo uma interface mais moderna e utiliza

Vinícius Figueiroa 35 May 2, 2022
Web Audio API based Pitch Tuner application made with ReactJS.

Pitch Tuner Pitch Tuner is a ReactJS application based on WebAudio API. You can tune your guitar/ukelele from online without any application! The algo

Jalal Uddin 27 Jul 11, 2022
Aplikasi web serderhana untuk mencari resep masakan khas indonesia yang dibuat menggunakan ReactJS.

Gorecipe Aplikasi web serderhana untuk mencari resep masakan khas indonesia yang dibuat menggunakan ReactJS. Setup Download ZIP / Clone repo gorecipe

Indra Adi Kusuma 20 Dec 13, 2021
A web application which has leetcode questions listed on the basis of different companies.

URL A web application which has leetcode questions listed on the basis of different companies. This project was made using React.js and Flask to help

Pulkit 21 May 24, 2022
Work from is a web app created by Josh Cawthorne for the Supabase Hackathon.

Work From What is Work From? Work from is a web app created by Josh Cawthorne for the Supabase Hackathon. The concept of the app is for companies to b

Josh Cawthorne 86 Jan 3, 2023
A Workspace Web App powered by React and Node Js.

zc_main This is the Zuri Chat frontend built with ExpressJS (Backend) and React (Frontend) Getting Started. Make sure you have nodejs installed by run

Zuri Chat 189 Dec 14, 2022
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
A web application that allows users to book rockets and join selected space missions, Using the SpaceX API.

Space-Travelers-Hub A web application that allow users to book rockets and join selected space missions, Using the SpaceX API. This project was bootst

Rachid Boudaoudi 6 Dec 9, 2021
This web application aim to produce an contest notifier utility and a modern open-source compiler.

This web application aim to produce an contest notifier utility and a modern open-source compiler. The current features of the application include : Code Runner , Upcoming and Ongoing Contests.

ABHAY GUPTA 6 Dec 3, 2022
A React application for AddressBook to manage contacts on web. It will use JSON-server to create backend apis.

Available Scripts In the project directory, you can run: npm install To install all related packages npm start Runs the app in the development mode. O

null 1 Jan 10, 2022
The CryptoVerse is a Cryptocurrency web application developed using Reactjs for providing the latest updates, value statistics, market cap, supply and news regarding the Cryptocurrency market.

CryptoVerse - A Crptocurrency Web Application Getting Started with Create React App This project was bootstrapped with Create React App. Available Scr

Eesha Srivastava 5 Oct 26, 2022
This is not my code, just trained with "From Scratch - Développement Web" youtube video

React-Countries-API DISCLAIMER FR : Ceci n'est pas mon code, je me suis juste entraîné à partir de la vidéo de From Scratch - Développement Web ! EN :

LejusVDP 1 Jan 4, 2022
Annotation-Wizard - a web-based image annotation platform that allows authors to create annotation tasks and annotators to take tasks and annotate images.

Annotation Wizard Annotation Wizard is a web-based image annotation platform. Functionalies User login and register create your own image annotation t

null 2 Aug 12, 2022