Angular中如何阻止matDialog默认给<app-root>添加aria-hidden？

当MatDialog弹出时，Angular Material默认会给所有非对话框的根级元素（包括<app-root>）添加aria-hidden="true"，这会触发ARC Toolkit的报错，因为<app-root>内部存在可聚焦子元素。除了用jQuery事后移除该属性，你可以通过以下Angular原生方案从根源上阻止默认行为：

方法一：自定义MatDialog服务，过滤目标元素 #

通过扩展MatDialog类，重写其内部的_ariaHidden方法，排除<app-root>元素：

1. 创建自定义Dialog服务：

import { Injectable, Inject, Optional } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { Overlay } from '@angular/cdk/overlay';

@Injectable()
export class CustomMatDialog extends MatDialog {
  constructor(overlay: Overlay, @Optional() @Inject('MAT_DIALOG_DEFAULT_OPTIONS') defaultOptions: MatDialogConfig) {
    super(overlay, defaultOptions);
  }

  protected override _ariaHidden(elements: Element[], isHidden: boolean): void {
    // 过滤掉<app-root>元素，不对其添加/移除aria-hidden
    const filteredElements = elements.filter(el => el.tagName.toLowerCase() !== 'app-root');
    super._ariaHidden(filteredElements, isHidden);
  }
}

2. 在模块中替换默认的MatDialog服务：

import { NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
import { CustomMatDialog } from './custom-mat-dialog.service';

@NgModule({
  imports: [MatDialogModule],
  providers: [
    { provide: MatDialog, useClass: CustomMatDialog }
  ]
})
export class AppMaterialModule { }

方法二：打开Dialog后用Renderer2移除属性（无需jQuery） #

如果不想自定义服务，也可以在Dialog打开后，通过Angular的Renderer2原生API移除<app-root>的aria-hidden属性：

import { Component, Renderer2, ElementRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { YourDialogComponent } from './your-dialog.component';

@Component({
  selector: 'app-some-component',
  templateUrl: './some-component.component.html'
})
export class SomeComponent {
  constructor(
    private dialog: MatDialog,
    private renderer: Renderer2,
    private elRef: ElementRef
  ) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(YourDialogComponent);
    
    dialogRef.afterOpened().subscribe(() => {
      const appRoot = this.elRef.nativeElement.closest('app-root');
      if (appRoot) {
        this.renderer.removeAttribute(appRoot, 'aria-hidden');
      }
    });
  }
}

注意事项 #

从无障碍规范角度来说，模态框打开时，背景内容应被标记为aria-hidden且不可聚焦。如果<app-root>内存在可聚焦元素，建议同时通过**焦点陷阱（Focus Trap）**或禁用元素的方式阻止焦点进入背景，避免破坏无障碍体验。

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