为什么 tabIndex 在第一个选项卡选择 li 后不起作用？答案

【问题标题】：Why does tabIndex not work after first tab to select li?为什么 tabIndex 在第一个选项卡选择 li 后不起作用？
【发布时间】：2018-10-25 21:27:16
【问题描述】：

你可以在这里查看我的应用：https://moon.holdings

这里是回购：https://github.com/Futuratum/moon.holdings

如果您选择 [ + ] Add Asset 按钮，单击搜索输入并点击选项卡有 2 个问题。

第一次未选择任何内容，您必须再次按 Tab 才能选择第一个资产。
更重要的是，在选择比特币后，Tab 键不会选择列表中的下一项。相反，在 4 个选项卡之后，我可以看到选择了 Coinbase 按钮而不是另一个 li。

在这里您可以看到每个li 确实正确地有一个tabindex：

第一个选项卡，未选择任何内容
第二个标签，选择比特币
第三个选项卡，未选择任何内容
第 4 个选项卡，已选择 Coinbase 按钮：

searchModal.js 组件的 JSX：

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

主容器：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>
);

renderSearch 方法：

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

最后是affiliates.js 组件

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

【问题讨论】：

在调用下一个 tabindex 之前， input->button 元素应该会提供额外的选项卡。至于您在那里的选项卡问题，您将继续在浏览器之间遇到问题，因为li 在技术上不是focusable element，即使您声明了一个角色并添加了一个 tabindex。如果是我，如果您想使用 ul，我会在 li 中嵌入样式化的锚点或按钮元素，或者将样式化的按钮或锚点嵌入 nav 标记中，然后继续您的一天。 PS - 如果你要做 ARIA，完全应用它:)

标签： javascript html reactjs jsx tabindex

【解决方案1】：

嗯，tabindex 的工作方式并非您认为的那样。

当您select 输入并按 Tab 时，它会转到下一个 button。这是下一个可聚焦的元素。然后是ul，然后是li，然后是open/close button，然后是coinbase button

也不鼓励使用积极的tabindex。

没有 li 元素的 tabindex 属性应该没问题。因为您总是可以使用箭头键来导航选择框项目。

也可以在这里查看这个：https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a

其中描述了如何使用role 属性，也可以部署该属性来帮助控制焦点流。

【讨论】：