tab-indexer

Setting tabIndex can be tricky (especially when using React. Components may have a different rendering order, etc). Also in other platforms down to plain HTML, just by adding another element to the page may change the tab order, or the order you may want it to be. So, a lot of attention this seemingly esoteric issue requires.

Lately, I had to build a system which all navigation had to be done with the keyboard alone. Modal had to be opened and close, and many other challenges. tabIndex needed a lot of maintenance!!! This was the birth of this little useful tabIndexer utility.

tabIndexer is basically a counter, a context counter that can be initialized (or not). Just a simple counter according to a given context. It cannot get any simpler and efficient then that.

Installation

$ npm install tab-indexer

Usage

import tabIndexer from "tab-indexer";

Examples are in JSX format for convenient. It can be used in any Javascript platform.

tabIndexer`context`;
tabIndexer`context${initValue}`;
tabIndexer`context${initValue}${numerator}`;

const Fn = () =>
    <input ... tabIndex={tabIndexer`context`} /> {/** tabindex="1" */}
    <input ... tabIndex={tabIndexer`context`} /> {/** tabindex="2" */}

const Fn = () => {
    tabIndexer`context${100}`;
    return (
        <input ... tabIndex={tabIndexer`context`} /> {/** tabindex="101" */}
        <input ... tabIndex={tabIndexer`context`} /> {/** tabindex="102" */}
    );
};

const Fn = () => {
    tabIndexer`context${0}${100}`;
    return (
        <input ... tabIndex={tabIndexer`context`} /> {/** tabindex="100" */}
        <input ... tabIndex={tabIndexer`context`} /> {/** tabindex="200" */}
        <input ... tabIndex={tabIndexer`other`} /> {/** tabindex="1" */}
    );
};

Surprise surprise!!! The plot get a bit trickier

Especially in React when you open a modal, and you move around with TAB or SHIFT-TAB. Because elements in the page keep their tabIndex, the focus navigates through all the elements and not just the elements you set tabIndex to in the modal. This is a big problem. So setting tabIndex to minus will solve this problem. tabIndecies with minus are ignored by the browser. This is good but now this little utility does not help because (once again) I have to start program this B.S. The solution for the problem has been found in the manner of a checker function that can be passed to the tabIndexer. If the checker function returns zero or greater or true, tabIndexer will continue to do what it does best. BUT if the function returns less than zero or false tabIndexer will returns -1. For this to occur two methods exists: setChecker and clearChecker.

const Fn = () => {
    const checker = (context, currentValue, numerator) => {
        // you can do something with the currentValue and numerator
        // but for this example I'll use only the context
        return context === 'myContext';
    }
    tabIndexer`myContext{0}`;
    tabIndexer.setChecker(checker);
    return (
        <input ... tabIndex={tabIndexer`myContext`} /> {/** tabindex="1" */}
        <input ... tabIndex={tabIndexer`otherContext`} /> {/** tabindex="-1" */}
    );
};

const Fn = () => {
    // Somewhere else
    tabIndexer.clearChecker();
};    

So I put the setChecker in the function that opens the modal and the clearChecker in the function that closes it. PROBLEM SOLVED In general, I set for every region of the system a different initial number from small to large. tabIndex values don't have to be in sequence, they can jump from 1000 to 2000, and it will work fine.

For more complex use of the setChecker / clearChecker. It may be used regarding a context. In that manner the checker function receives two parameters: currentValue and numerator. (Because the context should be known to it). The syntax is in Tag function:

const Fn = () => {
    const checker = (currentValue, numerator) => {
        // Let's say we want to skip values
        return ((currentValue + numerator) % 2) -1;
    }
    tabIndexer`myContext{0}`;
    tabIndexer.setChecker`myContext${checker}`;
    return (
        <input ... tabIndex={tabIndexer`myContext`} /> {/** tabindex="1" */}
        <input ... tabIndex={tabIndexer`myContext`} /> {/** tabindex="-1" */}
    );
};    

const Fn = () => {
    // Somewhere else
    tabIndexer.clearChecker`myContext`;
};    

Note

The global checker function is precedence to the context checker function.

Have a good productive day :)

If you like this package please consider donation Click Here

• MIT license
• Copyright 2015 © FVCproductions.