Почему tabIndex не работает после первой вкладки для выбора li?

Вы можете просмотреть мое приложение здесь: https://moon.holdings

Репо: https://github.com/Futuratum/moon.holdings


Если вы нажмете кнопку [+] Добавить актив, щелкните в поле поиска и нажмите вкладку, есть 2 проблемы.

  1. В первый раз ничего не выбирается, вам нужно снова перейти на вкладку, чтобы выбрать первый актив.

  2. И, что более важно, после выбора биткойна табуляция не выбирает следующий элемент в списке. Вместо этого после 4 вкладок я вижу, что была выбрана кнопка Coinbase вместо другого li.

Здесь вы можете видеть, что каждый li правильно имеет tabindex:

Почему tabIndex не работает после первой вкладки для выбора li?

Почему tabIndex не работает после первой вкладки для выбора li?

  • 1-я вкладка, ничего не выбрано
  • 2-я вкладка, выбран биткойн
  • 3-я вкладка, ничего не выбрано
  • 4-я вкладка, выбрана кнопка Coinbase:

Почему tabIndex не работает после первой вкладки для выбора li?

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

Ваша дополнительная вкладка ожидается от элементов input-> button до вызова следующего tabindex. Что касается ваших проблем с табуляцией там, вы по-прежнему будете сталкиваться с проблемами там между браузерами, поскольку li технически не является фокусируемый элемент, даже если вы объявите роль и добавите tabindex. Если бы это был я, я бы встроил стилизованный элемент привязки или кнопки в li, если вы хотите использовать ul, или встроил стилизованные кнопки или привязки в тег nav и продолжил свой день. PS - Если собираетесь делать ARIA, примените его полностью :)

Chris W. 26.10.2018 00:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
3 290
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Что ж, 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, которое также можно развернуть для управления потоком фокуса.

Другие вопросы по теме