Search code examples
javascripthtmlreactjsjsxtabindex

Why does tabIndex not work after first tab to select li?

You can view my app here: https://moon.holdings

Here is the repo: https://github.com/Futuratum/moon.holdings

If you select the [ + ] Add Asset button, click in the search input and hit tab there are 2 issues.

  1. Nothing is selected the first time, you have to tab again in order to select the first asset.

  2. And more importantly after Bitcoin is selected, tabbing does not select the next item in the list. Instead after 4 tabs the I can see that the Coinbase button was selected instead of another li.

Here you can see that each li does correctly have a tabindex:

enter image description here

enter image description here

  • 1st tab, nothing selected
  • 2nd tab, Bitcoin selected
  • 3rd tab, nothing selected
  • 4th tab, Coinbase button selected:

enter image description here

The JSX of the searchModal.js component:

render() {
  const { assets } = this.state;

  return (
    <section id="search-modal">
      <header className="search-header">
        <input
          id="coin-search"
          type="text"
          placeholder="Search"
          onChange={() => this.handleChange()}
        />
        <button className="close-modal-x" onClick={this.closeSquareEdit} />
      </header>

      <ul id="coins-list">
        { assets !== 'undefined'
          ? assets.map((asset, i) => (
            <li
              key={asset.currency}
              role="button"
              tabIndex={i}
              onFocus={() => this.setFocus(asset)}
              onBlur={this.onBlur}
              onClick={() => this.handleSelect(asset)}
            >
              {asset.name}
              <span className="symbol">{asset.currency}</span>
            </li>))
          : <li>Loading...</li>
        }
      </ul>
    </section>
  );
}

The main container: Board.js

return (
  <div id="board">
    { this.renderPortfolio(sortedAssets) }
    { edit && this.renderSquareEdit(coin) }
    { search && this.renderSearchModal() }
    { loading && moonPortfolio && <Loading /> }
    { portfolio.length === 0 && <Welcome /> }
    <PlusButton toggleSearch={this.handleSearchButton} />
    <Affiliates />
    <Nomics />
    <Astronaut logo={isTrue} />
  </div>
);

The renderSearch method:

renderSearchModal() {
  return (
    <div>
      <Search
        handleClose={() => this.toggleSquareEdit(false, {})}
        openEdit={this.toggleSquareEdit}
      />
      <div id="overlay" onClick={this.handleSearchButton} />
    </div>
  );
}

Finally the affiliates.js component

const links = [
  { name: 'coinbase', link: coinbase, h4: 'Buy Bitcoin' },
  { name: 'binance', link: binance, h4: 'Buy Altcoins' },
  { name: 'changelly', link: changelly, h4: 'Swap coins' }
];

export default () => (
  <div className="affiliates">
    <ul>
      {links.map(l => (
        <a href={l.link} key={l.name} target="_blank" rel="noopener">
          <li className={l.name}>
            <h4>{l.h4}</h4>
          </li>
        </a>
      ))}
    </ul>
  </div>
);
Solution

  • Well, tabindex doesn't work the way you think it works.

    When you select the input and press tab, it goes to the button next. Which is the next focusable element. Then ul then first li, then to the open/close button then to coinbase button

    Using positive tabindex is not encouraged either.

    You should be fine without the tabindex property for li elements. As you could always use arrow keys to navigate the select box items.

    Also check this one here: https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a

    Which describes how to use role property, which can also be deployed to help control focus flow.