Блог

Я создаю пользовательский компонент Typeahead и пытаюсь убедиться, что всплывающее окно Typeahead доступно через клавиатурную навигацию. Это моя HTML-разметка:

 <div class="wrapper">
    <input type="text" ...> 
    <div class="data-wrapper" tabindex="-1">
        <ul>
            <li>
                <button tabindex="0">John Doe</button>
            </li>
            <li>
                <button tabindex="0">Mary Poppins</button>
            </li>
        </ul>
    </div>
</div>
  

Я не могу вкладывать вкладки в кнопки (когда я нажимаю TAB, я возвращаюсь в адресную строку, когда присутствует только эта разметка). Однако, если я добавлю tabindex свойство к <li> элементам, я смогу добавлять вкладки в элементы списка. Однако я не могу нажимать кнопки, потому что клавиатура сосредоточена на элементе списка. Как я должен настроить фокус для навигации по кнопкам с помощью клавиатуры?

РЕДАКТИРОВАТЬ: Или, что еще лучше, возможно ли изменить поведение заголовка типа; чтобы по нему можно было перемещаться с помощью клавиш со стрелками (например, полей выбора).