如何设置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进入按钮（当我单击TAB时，当仅显示此标记时，我将返回到地址栏）。但是，如果我将tabindex属性添加到<li>元素中，则可以进入列表项。但是，我无法单击按钮，因为键盘集中在列表项上。我应该如何为使用键盘导航的按钮设置焦点？

编辑：或者更好的是，是否可以更改预输入的行为；因此，可以使用箭头键（例如选择框）进行导航。