Chrome+JAWS环境下MUI Dialog组件未播报dialog角色求助

可行修复方案： #

1. 显式声明ARIA属性强化识别 #

尽管MUI Dialog默认会设置role="dialog"，但在Chrome+JAWS 2022的组合下，显式指定核心ARIA属性可提升识别率，同时确保标题与对话框的关联：

<Dialog
  open={open}
  onClose={handleClose}
  role="dialog"
  aria-labelledby="dialog-title"
  aria-modal="true"
>
  <DialogTitle id="dialog-title">操作提示</DialogTitle>
  {/* 对话框内容 */}
</Dialog>

2. 触发焦点强制唤醒JAWS播报 #

JAWS在Chrome下对动态DOM更新的感知有时需要焦点触发，可在Dialog打开时聚焦到容器或内部第一个可交互元素：

import { useRef, useEffect } from 'react';

const CustomDialog = ({ open, onClose }) => {
  const dialogRef = useRef(null);

  useEffect(() => {
    if (open && dialogRef.current) {
      // 聚焦对话框容器（需设置tabIndex="-1"确保可聚焦）
      dialogRef.current.focus();
    }
  }, [open]);

  return (
    <Dialog
      ref={dialogRef}
      open={open}
      onClose={handleClose}
      tabIndex="-1"
    >
      {/* 对话框内容 */}
    </Dialog>
  );
};

3. 适配版本兼容性 #

JAWS 2022的官方兼容文档显示，其对Chrome 115这类高版本的支持存在间隙，可尝试：

• 升级MUI到最新稳定版，修复框架层面的浏览器兼容问题
• 暂时降级Chrome到JAWS 2022推荐的兼容版本（如Chrome 109及以下）

4. 排查DOM结构冲突 #

检查Dialog父容器是否存在冲突的ARIA属性（如错误设置的role或aria-hidden），避免覆盖Dialog的角色识别逻辑。

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