Javascript 为什么tabIndex在选择li的第一个选项卡之后不起作用？

您可以在此处查看我的应用程序：

以下是回购协议：

---

如果选择[+]添加资产按钮，单击搜索输入并点击选项卡，则有两个问题

第一次未选择任何内容，您必须再次单击选项卡才能选择第一个资源

更重要的是，选择比特币后，tabbing不会选择列表中的下一项。在4个选项卡之后，我可以看到Coinbase按钮被选中，而不是另一个li

在这里，您可以看到每个

li

都正确地有一个

tabindex

：

• 第一个选项卡，未选择任何内容
• 第二个选项卡，选择比特币
• 第三个选项卡，未选择任何内容
• 第四个选项卡，选择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>
  );
}

render（）{
const{assets}=this.state；
返回(
this.handleChange（）}
/>

{资产！=='未定义'
？assets.map（（asset，i）=>(
this.setFocus（资产）}
onBlur={this.onBlur}
onClick={（）=>this.handleSelect（资产）}
>
{asset.name}
{asset.currency}
））
：
正在加载
}

);
}

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

返回(
{this.renderPortfolio（sortedAssets）}
{edit&&this.renderSquareEdit（硬币）}
{search&&this.renderSearchModal（）}
{正在加载&&moonPortfolio&&}
{portfolio.length==0&&}
))}

);

嗯，

tabindex

的工作方式与您认为的不同

当您

选择输入并按tab键时，它进入
按钮
下一步。哪一个是下一个可聚焦的元素。然后是
ul
然后是
li
，然后是
open/close按钮
，然后是
coinbase按钮

也不鼓励使用正向
tabindex





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

请在此处选中此项：

它描述了如何使用
角色
属性，也可以部署该属性来帮助控制焦点流。
好吧，
选项卡索引
的工作方式与您认为的不同

当您
选择输入并按tab键时，它进入
按钮
下一步。哪一个是下一个可聚焦的元素。然后是
ul
然后是
li
，然后是
open/close按钮
，然后是
coinbase按钮

也不鼓励使用正向
tabindex





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

请在此处选中此项：

它描述了如何使用
角色
属性，也可以部署该属性来帮助控制焦点流。
在调用下一个tabindex之前，需要从input->button元素中获得额外的选项卡。至于您在那里的问题选项卡，您将继续在浏览器之间遇到问题，因为即使您声明了角色并添加了选项卡索引，
li
在技术上也不是问题。如果是我，如果你想使用ul，我会在li中嵌入一个样式化的锚或按钮元素，或者在
nav
标签中嵌入样式化的按钮或锚，然后继续你的一天。PS-如果要执行ARIA，请完全应用它：）在调用下一个tabindex之前，需要从input->button元素中获得额外的选项卡。至于您在那里的问题选项卡，您将继续在浏览器之间遇到问题，因为即使您声明了角色并添加了选项卡索引，
li
在技术上也不是问题。如果是我，如果你想使用ul，我会在li中嵌入一个样式化的锚或按钮元素，或者在
nav
标签中嵌入样式化的按钮或锚，然后继续你的一天。PS-如果你要做ARIA，请充分应用它：）
renderSearchModal() {
  return (
    <div>
      <Search
        handleClose={() => this.toggleSquareEdit(false, {})}
        openEdit={this.toggleSquareEdit}
      />
      <div id="overlay" onClick={this.handleSearchButton} />
    </div>
  );
}

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