|
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. Nothing is selected the first time, you have to tab again in order to select the first asset. 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 component: render() { const { assets } = this.state; return ( <section> <header className="search-header"> <input type="text" placeholder="Search" onChange={() => this.handleChange()} /> <button className="close-modal-x" onClick={this.closeSquareEdit} /> </header> <ul> { 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> { 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 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}> <li className={l.name}> <h4>{l.h4}</h4> </li> </a> ))} </ul> </div> ); (责任编辑：) |
