React条件渲染中添加role="alert"的最佳实践咨询

现有代码基础 #

export const RootDialog: React.FC = (mode) => {
    return <Dialog footer={
        <>
            {mode === "normal" && <SomeComponent someprop={mode} />}
            {mode === "success" && <NotificationSuccess someprop={mode} />}
            {mode === "error" && <NotificationError someprop={mode} />}
        </>
    }></Dialog>
}

问题1：两种role="alert"添加方式的适配性对比 #

方式一：统一包裹所有分支 #

<div role="alert">
    {mode === "normal" && <SomeComponent someprop={mode} />}
    {mode === "success" && <NotificationSuccess someprop={mode} />}
    {mode === "error" && <NotificationError someprop={mode} />}
</div>

方式二：每个分支单独包裹 #

<>
    {mode === "normal" && <div role="alert"><SomeComponent someprop={mode} /></div>}
    {mode === "success" && <div role="alert"><NotificationSuccess someprop={mode} /></div>}
    {mode === "error" && <div role="alert"><NotificationError someprop={mode} /></div>}
</>

适配性结论：方式二更适配屏幕阅读器 #

原因如下：

• role="alert"属于WAI-ARIA实时区域（live region），核心触发逻辑是：当带有该role的元素首次被添加到DOM树时，屏幕阅读器会自动播报其内容；如果只是更新元素内部内容，不会触发二次播报。
• 方式一中，外层div[role="alert"]会一直存在于DOM中，当mode切换时只是替换内部子组件，屏幕阅读器不会识别为新的通知，可能无法触发播报。
• 方式二中，每次mode切换时，对应的div[role="alert"]是全新添加到DOM的（旧分支的元素会被卸载），能确保屏幕阅读器每次都能捕捉到新通知并播报，完全符合通知面板的场景需求。
• 额外优势：如果后续业务调整，比如normal模式不需要alert提示，方式二可以快速单独移除该分支的role，灵活性更高。

问题2：RootDialog是否需要设置role="alert"？ #

不需要，原因如下：

• 原生Dialog组件通常默认带有role="dialog"的语义化标记，这是符合WAI-ARIA规范的正确角色，用于标识需要用户交互的对话框容器。
• role="alert"和role="dialog"的定位完全不同：
  • role="alert"是实时区域，用于无需用户交互的简短重要通知，自动播报且不抢占焦点。
  • role="dialog"是交互容器，需要用户主动操作（如关闭按钮），屏幕阅读器会自动将焦点移至对话框内。
• 如果强制给RootDialog设置role="alert"，会覆盖原有的dialog语义，导致屏幕阅读器识别混乱——既会将其当作自动播报的通知，又会当作需要交互的对话框，反而破坏无障碍体验。

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