Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

react-untabbable

Package Overview
Dependencies
1
Maintainers
1
Versions
8
Issues
File Explorer

Advanced tools

react-untabbable

An extremely simple utility to make a container and all its children untabbable, but still focusable.

    1.0.4latest
    GitHub

Version published
Maintainers
1
Weekly downloads
760
increased by9.04%

Weekly downloads

Changelog

Source

1.0.4 (May 10, 2020)

  • Include type definitions on build

Readme

Source

npm

react-untabbable

An extremely simple and tiny (1.3kB gzipped) utility to make a container and all its children untabbable, but still focusable. This can be useful in achieving a better accessibility for you components, like a menu with nested panels or the dreaded carousel where you probably want some of the items to be untabbable.

Install

yarn add react-untabbable

or

npm i react-untabbable

How does it work?

It quite simply applies the value -1 to the tabbable elements inside a container, restoring afterwards when needed.

  • First it obtains all the tabbable elements within a container using the package tabbable
  • The current tabindex of each element is saved
  • All focusable elements have their tabindex set to -1
  • When needed, the previous value for the tabindex is restored to the respective elements

How to use

You can either use the hook or the component itself, pick what better suits your needs.

Component

The component supports having more than 1 child and you can mix React elements with simples nodes (string, number, etc..). Elements must support receiving a ref.

PropTypeDefaultDescription
disabledbooleanfalseRestores the tabbable behaviour
import { Untabbable } from 'react-untabbable'; <Untabbable> <button>Can't tab into me 😢</button> You can mix React elements with simple nodes! (string, number, etc...) <div> <button>Can't tab into me as well 😭</button> </div> </Untabbable>

Hook

ParameterTypeDefaultDescription
refref or ref[]One or more refs to DOM elements
options?object{}
options.disabledbooleanfalseRestores the tabbable behaviour
options.includeContainerbooleantrueIf the owner of the ref should also be untabbable
import React, { useRef } from 'react'; import { useUntabbable } from 'react-untabbable'; const MyComponent = () => { const firstButtonRef = useRef(); const secondButtonRef = useRef(); useUntabbable([firstButtonRef, secondButtonRef]); return ( <div> <button ref={firstButtonRef}> Can't tab into me 😢 </button> <div ref={secondButtonRef}> <button>Can't tab into me as well 😭</button> </div> <button>Still tabbable 🎉</button> </div> ); };

Keywords

FAQs

Last updated on 10 May 2020

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc