0.2.1

React Tab Controller

Simple roving tabIndex for React.

Motivation

A roving tabIndex is an a11y technique used for making sure only one
element in a list or group of items is focusable at a time, so the user
can quickly skip a possible large list of items without having to tab
through all elements.

This is accomplished by setting only one children in the group of items
with a tabIndex of 0, which is the current selected item, and all other
items with a value of -1. Then, to change the selected item, you can use
the keyboard arrow keys to jump through the items in the group.

Installation

yarn add react-tab-controller
# or
npm install react-tab-controller

Usage

You can also try out the live demo at CodeSandbox!

import React, { useRef } from 'react'
import { TabController, useControlledTabIndex } from 'react-tab-controller'

const MyRadioGroup = () => {
  return (
    <TabController>
      <RadioButton />
      <RadioButton />
      <RadioButton />
    </TabController>
  )
}

const RadioButton = ({ label }) => {
  const buttonRef = useRef(null)

  const { onKeyDown, tabIndex } = useControlledTabIndex(buttonRef, label)

  return (
    <div
      role="radio"
      tabIndex={tabIndex}
      onKeyDown={onKeyDown}
    >
      {label}
    </div>
  )
}