React JS：返回导航时屏幕阅读器无法读取H1标题问题求助

你的核心问题是组件切换回Component A时，没有重新触发标题的聚焦与屏幕阅读器播报——初始加载的聚焦逻辑只执行了一次，切换回来时不会自动重复。

以下是具体修复方案：

1. 监听组件激活状态，重新触发聚焦 #

在Component A中，使用useEffect监听组件的显示状态（比如控制步进的状态变量），每次组件变为活跃时，主动获取DOM元素并调用focus()方法：

import { useEffect, useRef } from 'react';

const ComponentA = ({ isActive }) => {
  const titleRef = useRef<HTMLAnchorElement>(null);

  useEffect(() => {
    // 当组件激活时，聚焦标题链接
    if (isActive && titleRef.current) {
      titleRef.current.focus();
    }
  }, [isActive]); // 依赖步进状态变量，状态变化时重新执行

  return (
    <fieldset>
      <h1 role="alert">
        <a 
          ref={titleRef}
          id="specialfocusable" 
          tabIndex={-1}
        >
          Component A
        </a>
      </h1>
      {/* 组件其他内容 */}
    </fieldset>
  );
};

2. 优化语义化与播报可靠性 #

• 保持tabIndex={-1}确保元素可通过JS聚焦但不在默认Tab流中
• role="alert"会让屏幕阅读器自动播报，但如果播报不稳定，可以替换为aria-live="polite"（更温和的实时播报属性），配合聚焦使用：

<h1 aria-live="polite">
  <a ref={titleRef} id="specialfocusable" tabIndex={-1}>
    Component A
  </a>
</h1>

3. 确保步进切换时更新状态变量 #

控制步进的父组件中，切换到Component A时，要同步更新isActive（或类似状态变量），触发Component A的useEffect执行。示例父组件切换逻辑：

const [currentStep, setCurrentStep] = useState('A');

// 切换回Component A时
const goBackToA = () => {
  setCurrentStep('A');
};

这样每次从Component B切回A时，都会重新聚焦标题，屏幕阅读器就能正常读取了。

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