Как настроить tabindex для кнопки внутри элемента списка?

Question

Я создаю пользовательский компонент 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>, я смогу перейти на элементы списка. Однако я не могу нажимать кнопки, потому что клавиатура сфокусирована на элементе списка. Как мне настроить фокус, чтобы кнопки были ориентированы с помощью клавиатуры?

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