Angular Material Dialog弹窗出现aria-hidden错误求助

问题原因 #

点击「添加产品」按钮打开Dialog时出现的警告，核心是焦点未正确转移到弹窗内部：Angular Material Dialog会自动给弹窗外的页面元素添加aria-hidden="true"，但如果焦点还留在这些被隐藏的元素里，就会触发无障碍规则冲突，浏览器抛出警告。

解决方案 #

1. 确保Dialog自动聚焦生效 #

Angular Material Dialog默认会聚焦到弹窗内第一个可交互元素，显式配置autoFocus参数确保该行为生效：

// 在打开Dialog的组件中
import { MatDialog } from '@angular/material/dialog';

constructor(private dialog: MatDialog) {}

openAddProductDialog() {
  this.dialog.open(AddProductDialogComponent, {
    autoFocus: true, // 显式开启自动聚焦（默认已开启，可确保无配置冲突）
    // 若需指定聚焦特定元素，可传入选择器
    // autoFocus: '#product-name-input'
  });
}

2. 避免手动修改弹窗外元素的aria-hidden #

不要自行给页面主体（如body或主容器）添加aria-hidden="true"，MatDialog的内置无障碍逻辑会自动处理弹窗外元素的隐藏状态，手动修改会破坏其焦点管理逻辑。

3. 检查弹窗内的可聚焦元素 #

确保弹窗内至少有一个可交互元素（如按钮、输入框），且未被tabindex="-1"禁用聚焦能力。如果弹窗内容全为静态文本，可添加一个隐藏的可聚焦元素（如带sr-only类的按钮）来满足焦点要求：

<!-- 弹窗模板内 -->
<button class="sr-only" tabindex="0">隐藏聚焦元素</button>

（sr-only类用于仅对辅助技术可见，不影响视觉）

4. 手动强制转移焦点（兜底方案） #

若自动聚焦失效，在Dialog打开后手动将焦点设置到内部元素：

openAddProductDialog() {
  const dialogRef = this.dialog.open(AddProductDialogComponent);
  dialogRef.afterOpened().subscribe(() => {
    // 获取弹窗内的目标元素
    const targetElement = dialogRef.componentInstance.elementRef.nativeElement.querySelector('#submit-btn');
    if (targetElement) {
      targetElement.focus();
    }
  });
}

（需在弹窗组件中注入ElementRef：constructor(public elementRef: ElementRef) {}）

原理说明 #

无障碍规则要求：被aria-hidden="true"标记的元素及其后代，不能包含当前拥有焦点的元素。Angular Material Dialog的设计逻辑是将焦点限制在弹窗内部，只要确保焦点在弹窗内，就不会触发该警告。

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