React Hook Form中aria-live错误播报异常：如何仅读取新增错误？

核心问题出在这三点： #

• key的错误使用：你用index作为列表项的key，React在新增错误项时会复用已有组件而非创建新组件，导致aria-live区域无法准确识别新增内容，反而触发整个列表的重新渲染，让屏幕阅读器读取全部错误。
• 单个live容器的局限：所有错误都放在同一个aria-live容器里，新增错误时容器内的DOM结构发生整体变化，即使设置了aria-atomic="false"，屏幕阅读器仍会读取容器内的全部可见内容，而非仅新增项。
• 缺少对新增内容的明确声明：没有告诉屏幕阅读器只需要关注容器内的新增元素，默认行为会检测容器的整体变更。

修复方案： #

1. 替换为唯一key：
   用错误对应的表单字段名作为key（因为errors对象的键就是字段名，天然唯一），确保React能正确识别新增的错误项：

   const {
       control,
       register,
       setValue,
       getValues,
       formState: { errors },
   } = useFormContext()
   
   return <div aria-live="assertive" aria-atomic="false">
       {Object.entries(errors)?.map(([fieldName, error]) => {
         return <div key={fieldName}>{error?.message}</div>
       })}
    </div>
   

2. 添加aria-relevant明确关注新增内容：
   配合正确的key，给live容器加上aria-relevant="additions"，明确告诉屏幕阅读器只关注容器内新增的元素：

   <div aria-live="assertive" aria-atomic="false" aria-relevant="additions">
       {Object.entries(errors)?.map(([fieldName, error]) => {
         return <div key={fieldName}>{error?.message}</div>
       })}
   </div>
   

3. 进阶方案：单个错误单独播报：
   如果上述方案仍不满足需求，可以在新增错误时，动态渲染独立的临时live区域来播报单个错误，播报完成后自动移除（避免重复读取）：

   // 示例逻辑：监听errors变化，新增错误时创建临时播报元素
   useEffect(() => {
     const currentErrorKeys = new Set(Object.keys(errors));
     // 需自行维护上一次的错误集合prevErrors
     const newErrorKeys = [...currentErrorKeys].filter(key => !prevErrors.has(key));
     newErrorKeys.forEach(key => {
       const tempLive = document.createElement('div');
       tempLive.setAttribute('aria-live', 'assertive');
       tempLive.textContent = errors[key].message;
       document.body.appendChild(tempLive);
       setTimeout(() => document.body.removeChild(tempLive), 1000);
     });
     setPrevErrors(currentErrorKeys);
   }, [errors]);
   

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