如何为PrimeNg DynamicDialog添加aria-dialog-name属性？

针对你遇到的动态对话框缺少可访问名称导致无障碍测试不通过的问题，可以通过以下几种方式解决，无需重构现有对话框模式：

方法1：使用官方配置项ariaLabel直接设置 #

PrimeNg的DialogService.open()方法支持ariaLabel配置参数，设置后会自动为生成的role=dialog元素添加aria-label属性（该属性等价于无障碍测试要求的aria-dialog-name语义）。

修改代码如下：

private dialogService: DialogService
...
...
this.dialogService.open(MyComponent, {
  showHeader: false,
  modal: true,
  autoZIndex: true,
  ariaLabel: "你的对话框可访问名称", // 添加此配置
  data: {
    key: "value"
  }
});

方法2：通过组件内元素关联ariaLabelledBy #

如果需要用对话框内部的文本作为可访问名称（比如隐藏的标题），可以使用ariaLabelledBy配置：

1. 在MyComponent的模板中添加一个屏幕阅读器可见的隐藏标题：

<!-- 添加隐藏标题，sr-only类用于视觉隐藏但保留屏幕阅读器可访问性 -->
<h2 id="my-dialog-title" class="sr-only">用户操作确认对话框</h2>
<!-- 组件其他内容 -->

对应的辅助样式（可全局引入）：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

2. 打开对话框时配置ariaLabelledBy指向该标题的ID：

this.dialogService.open(MyComponent, {
  showHeader: false,
  modal: true,
  autoZIndex: true,
  ariaLabelledBy: "my-dialog-title", // 关联隐藏标题的ID
  data: {
    key: "value"
  }
});

方法3：针对旧版本PrimeNg手动设置属性 #

如果你的PrimeNg版本不支持上述配置项，可以通过DialogRef获取对话框DOM元素，手动添加无障碍属性：

const dialogRef = this.dialogService.open(MyComponent, {
  showHeader: false,
  modal: true,
  autoZIndex: true,
  data: {
    key: "value"
  }
});

// 获取对话框原生元素并添加aria-label
const dialogDom = dialogRef.dialogElement.nativeElement;
dialogDom.setAttribute('aria-label', '对话框可访问名称');

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