为什么 tabIndex 在第一个选项卡到 select 里后不起作用?
Why does tabIndex not work after first tab to select li?
您可以在这里查看我的应用程序:https://moon.holdings
这是回购协议:https://github.com/Futuratum/moon.holdings
如果您 select [+] 添加资产按钮,单击搜索输入并点击选项卡,则有 2 个问题。
第一次 select 没有任何内容,您必须再次按 Tab 键才能 select 第一个资产。
更重要的是,在比特币被 select 编辑后,制表符不会 select 列表中的下一项。相反,在 4 个选项卡之后,我可以看到 Coinbase 按钮被 selected 而不是另一个 li.
在这里你可以看到每个 li
确实正确地有一个 tabindex
:
- 第一个选项卡,没有 selected
- 第二个选项卡,比特币 selected
- 第 3 个选项卡,无内容 selected
- 第 4 个选项卡,Coinbase 按钮 select编辑:
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
并不像您认为的那样有效。
当您 select
输入并按 Tab 键时,它会转到 button
下一个。这是下一个可聚焦的元素。然后是 ul
,然后是 li
,然后是 open/close button
,然后是 coinbase button
也不鼓励使用正 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 属性 应该没问题。因为您总是可以使用箭头键来导航 select 框项目。
也在这里检查这个:https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a
其中描述了如何使用 role
属性,也可以部署它来帮助控制焦点流。
您可以在这里查看我的应用程序:https://moon.holdings
这是回购协议:https://github.com/Futuratum/moon.holdings
如果您 select [+] 添加资产按钮,单击搜索输入并点击选项卡,则有 2 个问题。
第一次 select 没有任何内容,您必须再次按 Tab 键才能 select 第一个资产。
更重要的是,在比特币被 select 编辑后,制表符不会 select 列表中的下一项。相反,在 4 个选项卡之后,我可以看到 Coinbase 按钮被 selected 而不是另一个 li.
在这里你可以看到每个 li
确实正确地有一个 tabindex
:
- 第一个选项卡,没有 selected
- 第二个选项卡,比特币 selected
- 第 3 个选项卡,无内容 selected
- 第 4 个选项卡,Coinbase 按钮 select编辑:
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
并不像您认为的那样有效。
当您 select
输入并按 Tab 键时,它会转到 button
下一个。这是下一个可聚焦的元素。然后是 ul
,然后是 li
,然后是 open/close button
,然后是 coinbase button
也不鼓励使用正 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 属性 应该没问题。因为您总是可以使用箭头键来导航 select 框项目。
也在这里检查这个:https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a
其中描述了如何使用 role
属性,也可以部署它来帮助控制焦点流。