代码之家  ›  专栏  ›  技术社区  ›  Leon Gaban

为什么tabIndex在第一个tab选择li之后不起作用?

  •  0
  • Leon Gaban  · 技术社区  · 6 年前

    您可以在此处查看我的应用程序: https://moon.holdings

    这是回购协议: https://github.com/Futuratum/moon.holdings


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

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

    在这里你可以看到每个 li 是否有正确的 tabindex :

    enter image description here

    enter image description here

    • 第一个选项卡,未选择任何内容
    • 第四个选项卡,选择Coinbase按钮:

    enter image description here

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

    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>
    );
    
    1 回复  |  直到 6 年前
        1
  •  2
  •   Arun Karunagath    6 年前

    好, tabindex 不是你想的那样。

    当你 select button 下一个。下一个可聚焦元素。那么 ul li ,然后到 open/close button 然后到 coinbase button

    使用正片 也不鼓励。

    请在此处检查此项: https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a

    role 属性,也可以部署它来帮助控制焦点流。