React bootstrap：如何在使用 Tab 组件时启用选项卡导航答案

【问题标题】：React bootstrap: How to enable tab navigation when using Tab componentReact bootstrap：如何在使用 Tab 组件时启用选项卡导航
【发布时间】：2022-11-28 00:20:37
【问题描述】：

我正在使用 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"，这使得选项卡导航无法访问。

这是 DOM 在 react bootstrap 生成 HTML 后的样子。您可以看到第一个选项卡按钮（活动按钮）没有 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 Tab 组件并通过选项卡导航访问它？

我看到如果我使用 Nav 组件，它不会有这个问题，因为它不会将 tabindex="-1" 放在 react-bootstrap 生成的 a tag 上。但是我不能使用 Nav 组件，因为我没有要转到的链接，而是要呈现的组件，而这正是 tab 组件的用途。

【问题讨论】：

键盘导航与选项卡一起使用的标准方式是，Tab 键只会让您进入当前活动的选项卡，然后使用左/右箭头键在选项卡之间移动。参见例如mdn。你试过这个吗？
是的！它有效，谢谢！还有一个问题——我正在使用 rtl 对齐，但是当我单击左箭头键时，右侧的选项卡被选中。你知道我该如何解决吗？
恐怕我不知道，我根本不知道这个图书馆。
您是否按照RTL docs 的说明设置了<html dir="rtl">？

标签： reactjs tabs accessibility react-bootstrap tabnavigator

【解决方案1】：

Tabs as per ARIA Practices Guideline (APG) 的预期行为是键盘上的箭头键更改此复合组件内的焦点。

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

React-Bootstrap’s Tab component 实现了箭头键，但向上/向下和向左/向右导航选项卡。

【讨论】：