React Bootstrap Tab组件如何启用Tab键导航？

针对非激活Tab按钮被自动设置tabindex="-1"导致无法通过Tab键访问的问题，你可以通过以下几种方式解决，且无需替换为Nav组件：

1. 直接覆盖Tab按钮的tabindex属性 #

利用React Bootstrap 2.4.0中Tab组件提供的tabBtnProps属性，给每个Tab按钮手动设置tabindex="0"，覆盖默认的-1值：

import { Tabs, Tab } from 'react-bootstrap';
import { useState } from 'react';

function AccessibleTabs() {
  const [activeKey, setActiveKey] = useState('home');

  return (
    <Tabs activeKey={activeKey} onSelect={(k) => setActiveKey(k)}>
      <Tab
        eventKey="home"
        title="首页"
        tabBtnProps={{ tabIndex: 0 }}
      >
        首页内容区域
      </Tab>
      <Tab
        eventKey="profile"
        title="个人中心"
        tabBtnProps={{ tabIndex: 0 }}
      >
        个人中心内容区域
      </Tab>
      <Tab
        eventKey="settings"
        title="设置"
        tabBtnProps={{ tabIndex: 0 }}
      >
        设置内容区域
      </Tab>
    </Tabs>
  );
}

2. 配合焦点管理优化无障碍体验 #

仅设置tabindex还不够，建议添加焦点自动切换逻辑，确保切换Tab后激活的Tab按钮获得焦点，同时支持Enter/Space键触发Tab切换：

import { Tabs, Tab } from 'react-bootstrap';
import { useState, useRef, useEffect } from 'react';

function AccessibleTabs() {
  const [activeKey, setActiveKey] = useState('home');
  const tabBtnRefs = useRef({});

  // 组件更新时设置所有Tab按钮的tabindex，并聚焦当前激活的Tab
  useEffect(() => {
    Object.values(tabBtnRefs.current).forEach(btn => {
      if (btn) btn.setAttribute('tabindex', '0');
    });
    tabBtnRefs.current[activeKey]?.focus();
  }, [activeKey]);

  // 处理键盘事件：Enter/Space键切换Tab
  const handleTabKeyDown = (e, key) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      setActiveKey(key);
    }
  };

  return (
    <Tabs activeKey={activeKey} onSelect={(k) => setActiveKey(k)}>
      <Tab
        eventKey="home"
        title="首页"
        tabBtnProps={{
          ref: el => tabBtnRefs.current['home'] = el,
          onKeyDown: e => handleTabKeyDown(e, 'home'),
          tabIndex: 0
        }}
      >
        首页内容区域
      </Tab>
      <Tab
        eventKey="profile"
        title="个人中心"
        tabBtnProps={{
          ref: el => tabBtnRefs.current['profile'] = el,
          onKeyDown: e => handleTabKeyDown(e, 'profile'),
          tabIndex: 0
        }}
      >
        个人中心内容区域
      </Tab>
    </Tabs>
  );
}

3. 批量处理Tab按钮（可选） #

如果Tab数量较多，可以通过自定义Tab组件封装逻辑，避免重复代码：

import { Tab, TabsContext } from 'react-bootstrap';
import { useRef, useEffect, useContext } from 'react';

const AccessibleTab = ({ eventKey, title, children }) => {
  const { activeKey, setActiveKey } = useContext(TabsContext);
  const btnRef = useRef(null);

  useEffect(() => {
    if (btnRef.current) btnRef.current.setAttribute('tabindex', '0');
  }, []);

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      setActiveKey(eventKey);
    }
  };

  return (
    <Tab
      eventKey={eventKey}
      title={title}
      tabBtnProps={{
        ref: btnRef,
        onKeyDown: handleKeyDown,
        tabIndex: 0
      }}
    >
      {children}
    </Tab>
  );
};

// 使用方式
function TabContainer() {
  const [activeKey, setActiveKey] = useState('home');
  return (
    <Tabs activeKey={activeKey} onSelect={setActiveKey}>
      <AccessibleTab eventKey="home" title="首页">首页内容</AccessibleTab>
      <AccessibleTab eventKey="profile" title="个人中心">个人中心内容</AccessibleTab>
    </Tabs>
  );
}

以上方案均无需替换为Nav组件，直接基于现有Tab组件修改即可实现所有Tab项通过Tab键访问的需求，同时兼顾无障碍导航的基本要求。

内容的提问来源于stack exchange，提问作者orel eliyahu