Вы можете просмотреть мое приложение здесь: https://moon.holdings
Репо: https://github.com/Futuratum/moon.holdings
Если вы нажмете кнопку [+] Добавить актив, щелкните в поле поиска и нажмите вкладку, есть 2 проблемы.
В первый раз ничего не выбирается, вам нужно снова перейти на вкладку, чтобы выбрать первый актив.
И, что более важно, после выбора биткойна табуляция не выбирает следующий элемент в списке. Вместо этого после 4 вкладок я вижу, что была выбрана кнопка Coinbase вместо другого li.
Здесь вы можете видеть, что каждый li
правильно имеет tabindex
:
JSX компонента searchModal.js:
render() {
const { assets } = this.state;
return (
<section id = "search-modal">
<header className = "search-header">
<input
id = "coin-search"
type = "text"
placeholder = "Search"
onChange = {() => this.handleChangeEvent()}
/>
<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
и нажимаете вкладку, он переходит к button
. Какой следующий элемент, на который можно сфокусироваться. Затем ul
, затем сначала li
, затем open/close button
, затем coinbase button
Использование положительного tabindex
также не приветствуется.
У вас должно быть все в порядке без свойства tabindex для элементов li. Поскольку вы всегда можете использовать клавиши со стрелками для навигации по элементам поля выбора.
Также проверьте это здесь: https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a
В нем описывается, как использовать свойство role
, которое также можно развернуть для управления потоком фокуса.
Ваша дополнительная вкладка ожидается от элементов input-> button до вызова следующего tabindex. Что касается ваших проблем с табуляцией там, вы по-прежнему будете сталкиваться с проблемами там между браузерами, поскольку
li
технически не является фокусируемый элемент, даже если вы объявите роль и добавите tabindex. Если бы это был я, я бы встроил стилизованный элемент привязки или кнопки в li, если вы хотите использовать ul, или встроил стилизованные кнопки или привязки в тегnav
и продолжил свой день. PS - Если собираетесь делать ARIA, примените его полностью :)