javascript - Why does tabIndex not work after first tab to select li? - Stack Overflow

admin管理员组

文章数量:1410737

You can view my app here:

Here is the repo: .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:

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

The JSX of the searchModal.js ponent:

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 && <Wele /> }
    <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 ponent

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>
);

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

Here is the repo: https://github./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:

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

The JSX of the searchModal.js ponent:

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 && <Wele /> }
    <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 ponent

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>
);

• javascript
• html
• reactjs
• jsx
• tabindex

Share Improve this question Follow edited Oct 25, 2018 at 21:49 Leon Gaban asked Oct 25, 2018 at 21:27 Leon GabanLeon Gaban 39.1k122122 gold badges349349 silver badges550550 bronze badges 1

• 1 Your additional tab would be expected from the input->button elements before your next tabindex is invoked. As for your issues tabbing there, you'll continue to run into issues there between browsers as li isn't technically a focusable element even if you declare a role and add a tabindex. If it were me, I'd embed a styled anchor or button element in the li's if you want to use ul, or embed styled buttons or anchors in a nav tag and move on with your day. PS - If you're going to do ARIA, apply it fully :) – Chris W. Commented Oct 25, 2018 at 22:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.

• https://developer.mozilla/en-US/docs/Web/HTML/Global_attributes/tabindex
• https://developer.mozilla/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets

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./@andreasmcd/creating-an-accessible-tab-ponent-with-react-24ed30fde86a

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

本文标签： javascriptWhy does tabIndex not work after first tab to select liStack Overflow