如何在ReactJS Material UI中禁用Tabs组件的方向键导航？

当然可以实现！我帮你梳理一下具体的实现步骤，完全贴合你想要的交互逻辑：

1. 先禁用默认的方向键导航 #

Material UI的Tabs组件默认自带方向键切换标签的功能，我们可以通过覆盖onKeyDown事件来阻止这个默认行为。只需要判断用户按下的是方向键（左、右、上、下）时，调用event.preventDefault()即可。

示例代码：

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

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

  const handleTabsKeyDown = (event) => {
    // 拦截所有方向键的默认导航行为
    const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
    if (arrowKeys.includes(event.key)) {
      event.preventDefault();
    }
  };

  return (
    <Tabs
      value={activeTab}
      onChange={(_, newTabIndex) => setActiveTab(newTabIndex)}
      onKeyDown={handleTabsKeyDown}
    >
      <Tab label="标签页1" />
      <Tab label="标签页2" />
      <Tab label="标签页3" />
    </Tabs>
  );
}

2. 实现Tab键切换焦点 + Enter/Space键激活标签页 #

默认情况下，Tab键已经可以在各个Tab组件之间切换焦点，但我们需要让用户按下Enter（或者符合无障碍规范的Space键）时，切换到当前焦点对应的标签页。我们可以给每个Tab单独绑定onKeyDown事件来监听这两个按键。

修改后的完整代码：

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

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

  const handleTabsKeyDown = (event) => {
    const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
    if (arrowKeys.includes(event.key)) {
      event.preventDefault();
    }
  };

  const handleTabKeyDown = (event, tabIndex) => {
    // 监听Enter或Space键，激活当前焦点的标签页
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      setActiveTab(tabIndex);
    }
  };

  return (
    <Tabs
      value={activeTab}
      onChange={(_, newTabIndex) => setActiveTab(newTabIndex)}
      onKeyDown={handleTabsKeyDown}
    >
      <Tab 
        label="标签页1" 
        onKeyDown={(e) => handleTabKeyDown(e, 0)} 
      />
      <Tab 
        label="标签页2" 
        onKeyDown={(e) => handleTabKeyDown(e, 1)} 
      />
      <Tab 
        label="标签页3" 
        onKeyDown={(e) => handleTabKeyDown(e, 2)} 
      />
    </Tabs>
  );
}

3. 优化标签页内容的焦点导航体验 #

当切换到目标标签页后，默认情况下Tab键已经能在内容内部的可聚焦元素（按钮、输入框等）之间正常导航。如果想要更流畅的无障碍体验，可以在标签页内容容器上设置tabIndex="-1"，并在切换标签页后自动将焦点移到内容容器，这样用户按下Tab时会直接进入内容区域，而不是回到Tab标签上。

示例代码（包含内容区域）：

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

function CustomTabs() {
  const [activeTab, setActiveTab] = useState(0);
  // 给每个内容容器创建ref
  const contentRefs = [useRef(null), useRef(null), useRef(null)];

  const handleTabsKeyDown = (event) => {
    const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
    if (arrowKeys.includes(event.key)) {
      event.preventDefault();
    }
  };

  const handleTabKeyDown = (event, tabIndex) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      setActiveTab(tabIndex);
    }
  };

  useEffect(() => {
    // 切换标签页后，自动将焦点移到对应内容容器
    contentRefs[activeTab].current?.focus({ preventScroll: true });
  }, [activeTab]);

  return (
    <div>
      <Tabs
        value={activeTab}
        onChange={(_, newTabIndex) => setActiveTab(newTabIndex)}
        onKeyDown={handleTabsKeyDown}
      >
        <Tab 
          label="标签页1" 
          onKeyDown={(e) => handleTabKeyDown(e, 0)} 
        />
        <Tab 
          label="标签页2" 
          onKeyDown={(e) => handleTabKeyDown(e, 1)} 
        />
        <Tab 
          label="标签页3" 
          onKeyDown={(e) => handleTabKeyDown(e, 2)} 
        />
      </Tabs>

      {/* 标签页内容区域 */}
      <Box
        ref={contentRefs[0]}
        tabIndex="-1"
        hidden={activeTab !== 0}
        sx={{ padding: 2, marginTop: 1 }}
      >
        <button>标签页1按钮1</button>
        <input placeholder="标签页1输入框" style={{ marginLeft: 8 }} />
      </Box>
      <Box
        ref={contentRefs[1]}
        tabIndex="-1"
        hidden={activeTab !== 1}
        sx={{ padding: 2, marginTop: 1 }}
      >
        <a href="#">标签页2链接</a>
        <button style={{ marginLeft: 8 }}>标签页2按钮</button>
      </Box>
      <Box
        ref={contentRefs[2]}
        tabIndex="-1"
        hidden={activeTab !== 2}
        sx={{ padding: 2, marginTop: 1 }}
      >
        <textarea placeholder="标签页3文本域" rows={3} />
      </Box>
    </div>
  );
}

这样设置后，就完全符合你的需求了：

• 方向键被禁用，不会切换标签页
• Tab键可以在各个Tab标签之间切换焦点
• 按下Enter或Space键会激活当前焦点的标签页
• 激活标签页后，Tab键可以在内容内部正常导航

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