不使用component="button"时如何让Material UI Link支持Tab键获取焦点

Material UI 的 Link 组件默认渲染为 <a> 锚点标签，浏览器原生的Tab键聚焦规则是：仅当锚点标签携带有效href属性时，才会被纳入页面焦点遍历序列。如果没有传href，这个锚点就属于普通文本元素，无法被Tab键选中聚焦，这也是之前需要嵌套在Button内部才能实现聚焦效果的本质原因——Button本身就是浏览器默认支持Tab聚焦的交互元素。

所有方案均不需要嵌套Button，完全通过Link本身的Props配置实现：

• 方案一：补充带拦截逻辑的href属性
  给Link传入占位用的href值，同时阻止锚点的默认跳转行为，让浏览器识别该元素为可交互的链接元素：

  <Link 
    href="#interactive-link"
    onClick={(e) => {
      // 阻止锚点默认跳转行为，避免页面被定位到顶部
      e.preventDefault();
      handleClick();
    }}
  >
    Link
  </Link>
  

  这种方式是最符合原生无障碍规范的实现，不需要额外处理键盘交互逻辑，聚焦后按回车会自动触发绑定的onClick事件。
• 方案二：手动指定tabIndex强制纳入焦点序列
  如果完全不想加href属性，可以直接给Link传入tabIndex={0}，让元素按照DOM顺序被纳入Tab遍历范围：

  <Link 
    onClick={handleClick}
    tabIndex={0}
    onKeyDown={(e) => {
      // 适配键盘操作习惯，聚焦后按回车触发点击逻辑
      if (e.key === "Enter") handleClick();
    }}
  >
    Link
  </Link>
  

  注意：这种方式必须补充回车触发的键盘事件，否则聚焦后无法通过键盘完成交互，不符合无障碍访问要求。

默认的Link聚焦态轮廓可能视觉辨识度较低，可以通过样式配置强化聚焦反馈，让用户能清晰识别当前聚焦的元素：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      "& > * + *": {
        marginLeft: theme.spacing(2)
      },
      // 自定义Link聚焦态样式
      "& .MuiLink-root:focus-visible": {
        outline: "2px solid #1976d2",
        outlineOffset: 2,
        borderRadius: 2
      }
    }
  })
);

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