悬停状态下Tab键可访问性问题：无法聚焦容器内按钮与链接

这个问题我之前也碰到过，核心原因是**display: none会让元素彻底脱离浏览器的可访问性树**——哪怕你通过容器聚焦触发了显示，浏览器也不会立刻把这些刚“现身”的元素加入Tab导航队列，所以按下Tab会直接跳到下一个页面元素。

下面是具体的解决方案，我们换一种不会移除元素的隐藏方式，同时保持视觉上的隐藏效果：

步骤1：修改隐藏元素的样式逻辑 #

把display: none换成visibility: hidden + position: absolute（或者opacity: 0 + pointer-events: none），这样元素始终存在于DOM和可访问性树中，只是视觉上不可见、无法交互。当容器聚焦或悬停时，再恢复正常状态。

方案一：基于visibility的隐藏（无过渡动画） #

修改后的SCSS代码：

.HiddenUntilHover {
  /* 初始状态：视觉隐藏但保留DOM位置 */
  visibility: hidden;
  position: absolute;
  pointer-events: none; /* 避免未显示时误触发交互 */
}

.MainContainer:focus .HiddenUntilHover,
.MainContainer:hover .HiddenUntilHover {
  /* 聚焦/悬停时恢复正常 */
  visibility: visible;
  position: static;
  pointer-events: auto;
}

方案二：基于opacity的隐藏（支持过渡动画） #

如果需要平滑的显示/隐藏动画，可以用这个版本：

.HiddenUntilHover {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease; /* 可选：添加过渡动画 */
}

.MainContainer:focus .HiddenUntilHover,
.MainContainer:hover .HiddenUntilHover {
  opacity: 1;
  pointer-events: auto;
}

步骤2：验证焦点行为 #

现在当你Tab聚焦到MainContainer后，内部的按钮和链接已经在可访问性树里了，再按Tab就会依次聚焦到这些元素上，完美符合无障碍访问的要求。

额外无障碍优化提示 #

• 给MainContainer添加aria-label或aria-describedby，让屏幕阅读器用户知道聚焦后会出现操作选项，比如：

  <div tabIndex="0" className="MainContainer" aria-label="内容容器，聚焦后显示操作按钮">
    {/* 内部元素 */}
  </div>
  

• 不要移除MainContainer的焦点样式（默认的outline），如果要自定义样式，确保对比度足够，让键盘用户能清晰看到当前聚焦的容器。
• 完整测试键盘导航流程：从页面开头Tab到容器，确认显示操作元素，再依次Tab到按钮、链接，最后能正常离开容器到下一个页面元素。

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