React bootstrap:如何在使用tab组件时启用tab导航

Question

我使用的是react-bootstrap 2.4.0版本，我使用的是Tab组件。我希望网站可以通过选项卡导航访问，但是当我使用选项卡组件时，焦点只设置在活动选项卡项目上，而永远不会到达其他选项卡。

<Tabs
className="mb-3"
defaultActiveKey="A"
mountOnEnter={true}
unmountOnExit={true} >
<Tab eventKey="A" title="A">
<A/>
</Tab>
<Tab eventKey="B" title="B">
<B/>
</Tab>
<Tab eventKey="C" title="C">
<C/>
</Tab>
</Tabs>

我注意到，当页面呈现时，所有其他选项卡(不是活动选项卡)的按钮上都有tabindex="-1"，这使得它们无法访问选项卡导航。

这是react-bootstrap生成HTML后DOM的样子。您可以看到第一个选项卡按钮(活动按钮)上没有tabindex="-1"属性。其他按钮有它，所以当我使用选项卡导航时，它们永远不会得到焦点，我永远不能点击它们。

<ul class="mb-3 nav-tabs nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" id="react-aria2325882265-4-tab-A" role="tab" data-rr-ui-event-key="A" aria-selected="true" class="nav-link active" aria-controls="react-aria2325882265-4-tabpane-A">A</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" id="react-aria2325882265-4-tab-B" role="tab" data-rr-ui-event-key="B" aria-selected="false" tabindex="-1" class="nav-link">B</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" id="react-aria2325882265-4-tab-C" role="tab" data-rr-ui-event-key="C" aria-selected="false" class="nav-link" tabindex="-1">C</button>
</li>
</ul>

我如何使用Bootstrap选项卡组件，并使其可访问的选项卡导航?

我看到，如果我使用Nav组件，它不会有这个问题，因为它不会把tabindex="-1"放在由反应引导生成的a tag上。然而，我不能使用Nav组件，因为我没有一个链接去，但一个组件来渲染，这正是标签组件的用途。

Answer 1

根据ARIA实践指南(APG)，选项卡的预期行为是键盘上的箭头键在这个复合组件内改变焦点。

根据选项卡的视觉表现，左右方向键用于水平排列，上下方向键用于垂直排列。

React-Bootstrap的Tab组件实现了方向键，但是上下和左/右导航选项卡。