为何挂载React组件后Mac VoiceOver无法检测到组件？

1. VoiceOver的默认扫描逻辑：页面首次加载时，VoiceOver会自动扫描并识别页面元素，但组件切换属于DOM动态更新，它不会主动重新扫描整个页面——只有当焦点发生变化，或者有明确的ARIA状态通知时，才会感知到新内容。
2. 焦点未转移：点击「Get Started」按钮后，焦点可能还停留在原按钮上，VoiceOver会继续以原焦点为上下文，不会主动去读取新挂载的PhishingWarningPage内容。
3. 组件渲染不规范：你的代码最后是return PhishingWarningPage;，这是返回组件函数本身而非实例，虽然React会自动处理，但不符合规范，可能间接导致辅助技术无法正确识别组件挂载事件。

方案1：优化手动聚焦（规范版） #

在PhishingWarningPage挂载后，聚焦到页面核心元素（比如标题或第一个可交互控件），触发VoiceOver的扫描更新。

代码示例：

const PhishingWarningPage = () => {
  const warningTitleRef = useRef(null);

  useEffect(() => {
    if (warningTitleRef.current) {
      warningTitleRef.current.focus();
    }
  }, []);

  return (
    <div className="warning-page">
      {/* 给非交互元素加tabIndex="-1"，允许脚本聚焦但不干扰键盘导航 */}
      <h2 ref={warningTitleRef} tabIndex="-1" aria-level="1">钓鱼警告</h2>
      {/* 其他页面内容 */}
    </div>
  );
};

方案2：用ARIA Live区域通知更新 #

在页面中添加一个屏幕阅读器专用的Live区域，当组件切换时，主动通知VoiceOver内容已更新。

代码示例：

const WelcomePage = () => {
  const [isWarningPage, setisWarningPage] = useState(false);

  return (
    <>
      {/* ARIA Live区域：视觉隐藏，仅通知屏幕阅读器 */}
      <div aria-live="polite" className="sr-only">
        {isWarningPage ? "已切换至钓鱼警告页面" : ""}
      </div>

      {!isWarningPage ? (
        // 原WelcomePage内容
        <div className="container-fluid">...</div>
      ) : (
        {/* 返回组件实例，而非组件本身 */}
        <PhishingWarningPage />
      )}
    </>
  );
};

• aria-live="polite"表示VoiceOver会在当前朗读结束后读取通知，不会打断用户；sr-only是视觉隐藏类（样式可设为：position:absolute; clip:rect(0,0,0,0); width:1px; height:1px; overflow:hidden;）。

方案3：修正组件返回方式 #

把代码里的return PhishingWarningPage;改成return <PhishingWarningPage />;，这是React组件渲染的正确写法，避免潜在的识别问题。

动态更新页面内容时，必须通过焦点转移或ARIA Live通知告诉辅助技术（比如VoiceOver）内容已变化，不能依赖它自动扫描DOM。

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