如何修改MUI Tabs组件的Tab Index属性？

MUI Tabs 默认仅对当前激活的Tab设置tabIndex=0，其余标签的tabIndex默认为-1，因此按下Tab键时只能聚焦到当前选中的标签，无法遍历所有标签项，按以下步骤修改即可实现预期效果：

• 给Tabs组件添加disableKeyboardNavigation属性（可选）：如果不需要默认的方向键切换标签逻辑，可以开启该属性避免冲突，保留方向键能力则可以跳过该配置
• 为每一个Tab组件手动设置tabIndex={0}：tabIndex为0的元素会按照DOM排列顺序被Tab键依次聚焦，如果需要自定义非DOM顺序的聚焦优先级，可将tabIndex设置为1、2、3这类正整数，数字越小优先级越高
• （可选）如果需要聚焦标签时自动激活选中对应标签，给每个Tab绑定onFocus事件触发选中逻辑

完整代码示例：

import { Tabs, Tab } from '@mui/material';
import { useState } from 'react';

function SequenceFocusTabs() {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabChange = (_, newValue) => {
    setActiveTab(newValue);
  };

  return (
    <Tabs
      value={activeTab}
      onChange={handleTabChange}
      // 不需要保留方向键切换时可开启
      // disableKeyboardNavigation
    >
      <Tab
        label="第一个标签"
        tabIndex={0}
        onFocus={() => setActiveTab(0)}
      />
      <Tab
        label="第二个标签"
        tabIndex={0}
        onFocus={() => setActiveTab(1)}
      />
      <Tab
        label="第三个标签"
        tabIndex={0}
        onFocus={() => setActiveTab(2)}
      />
    </Tabs>
  );
}

注意：该修改会偏离WAI-ARIA对标签页组件的标准交互约定，标准约定为Tab键进入标签区域后仅聚焦当前激活标签，后续通过左右方向键切换标签，如有合规要求建议优先保留默认行为。

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