您可以在此处查看我的应用程序:https://moon.holdings
这是存储库:https://github.com/Futuratum/moon.holdings
如果您选择 [+] 添加 Assets 按钮,单击搜索输入并点击选项卡,则会出现 2 个问题。
第一次没有选择任何内容,您必须再次按 Tab 键才能选择第一个资源。
更重要的是,选择比特币后,按 Tab 键不会选择列表中的下一项。相反,在 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>
);
}
主容器: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
并不像您想象的那样工作。
当您选择
输入并按 Tab 时,它将转到下一个按钮
。这是下一个可聚焦的元素。然后是ul
,然后是li
,然后是打开/关闭按钮
,然后是coinbase按钮
也不鼓励使用正的 tabindex
。
- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
没有 li 元素的 tabindex 属性应该没问题。因为您始终可以使用箭头键来导航选择框项目。
另请在此处检查此:https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a
其中描述了如何使用role
属性,也可以部署该属性来帮助控制焦点流。
关于javascript - 为什么在第一个选项卡选择 li 后 tabIndex 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52998354/