fix(material/dialog): mat-dialog-title should work under OnPush viewContainerRef (#28329)

The `mat-dialog-title` directive updates state in a microtask and should
call `ChangeDetectorRef.markForCheck`. Failing to do this will cause the
component tree to not be checked if it lives under an `OnPush` component
that has not otherwise been marked for check. This commit updates the
queue to be a signal so we don't have to think about calling
`markForCheck` at the right times.

Author: atscott

src/cdk/dialog/dialog-container.ts

@@ -25,6 +25,7 @@ import {
 import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ComponentRef,
   ElementRef,
@@ -99,6 +100,8 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
    */
   _ariaLabelledByQueue: string[] = [];
 
+  protected readonly _changeDetectorRef = inject(ChangeDetectorRef);
+
   constructor(
     protected _elementRef: ElementRef,
     protected _focusTrapFactory: FocusTrapFactory,
@@ -118,6 +121,20 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
     }
   }
 
+  _addAriaLabelledBy(id: string) {
+    this._ariaLabelledByQueue.push(id);
+    this._changeDetectorRef.markForCheck();
+  }
+
+  _removeAriaLabelledBy(id: string) {
+    const index = this._ariaLabelledByQueue.indexOf(id);
+
+    if (index > -1) {
+      this._ariaLabelledByQueue.splice(index, 1);
+      this._changeDetectorRef.markForCheck();
+    }
+  }
+
   protected _contentAttached() {
     this._initializeFocusTrap();
     this._handleBackdropClicks();

src/material/bottom-sheet/bottom-sheet-container.ts

@@ -14,7 +14,6 @@ import {OverlayRef} from '@angular/cdk/overlay';
 import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -77,7 +76,6 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
     ngZone: NgZone,
     overlayRef: OverlayRef,
     breakpointObserver: BreakpointObserver,
-    private _changeDetectorRef: ChangeDetectorRef,
     focusMonitor?: FocusMonitor,
   ) {
     super(

src/material/dialog/dialog-content-directives.ts

@@ -120,23 +120,19 @@ export class MatDialogTitle implements OnInit, OnDestroy {
       Promise.resolve().then(() => {
         // Note: we null check the queue, because there are some internal
         // tests that are mocking out `MatDialogRef` incorrectly.
-        this._dialogRef._containerInstance?._ariaLabelledByQueue?.push(this.id);
+        this._dialogRef._containerInstance?._addAriaLabelledBy?.(this.id);
       });
     }
   }
 
   ngOnDestroy() {
-    // Note: we null check the queue, because there are some internal
+    // Note: we null check because there are some internal
     // tests that are mocking out `MatDialogRef` incorrectly.
-    const queue = this._dialogRef?._containerInstance?._ariaLabelledByQueue;
+    const instance = this._dialogRef?._containerInstance;
 
-    if (queue) {
+    if (instance) {
       Promise.resolve().then(() => {
-        const index = queue.indexOf(this.id);
-
-        if (index > -1) {
-          queue.splice(index, 1);
-        }
+        instance._removeAriaLabelledBy?.(this.id);
       });
     }
   }

src/material/dialog/dialog.spec.ts

@@ -30,6 +30,7 @@ import {
   ViewContainerRef,
   ViewEncapsulation,
   forwardRef,
+  signal,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -1623,6 +1624,64 @@ describe('MDC-based MatDialog', () => {
       runContentElementTests();
     });
 
+    it('should set the aria-labelledby attribute to the id of the title under OnPush host', fakeAsync(() => {
+      @Component({
+        standalone: true,
+        imports: [MatDialogTitle],
+        template: `@if (showTitle()) { <h1 mat-dialog-title>This is the first title</h1> }`,
+      })
+      class DialogCmp {
+        showTitle = signal(true);
+      }
+
+      @Component({
+        template: '',
+        selector: 'child',
+        standalone: true,
+      })
+      class Child {
+        dialogRef?: MatDialogRef<DialogCmp>;
+
+        constructor(
+          readonly viewContainerRef: ViewContainerRef,
+          readonly dialog: MatDialog,
+        ) {}
+
+        open() {
+          this.dialogRef = this.dialog.open(DialogCmp, {viewContainerRef: this.viewContainerRef});
+        }
+      }
+
+      @Component({
+        standalone: true,
+        imports: [Child],
+        template: `<child></child>`,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+      })
+      class OnPushHost {
+        @ViewChild(Child, {static: true}) child: Child;
+      }
+
+      const hostFixture = TestBed.createComponent(OnPushHost);
+      hostFixture.componentInstance.child.open();
+      hostFixture.autoDetectChanges();
+      flush();
+
+      const overlayContainer = TestBed.inject(OverlayContainer);
+      const title = overlayContainer.getContainerElement().querySelector('[mat-dialog-title]')!;
+      const container = overlayContainerElement.querySelector('mat-dialog-container')!;
+
+      expect(title.id).withContext('Expected title element to have an id.').toBeTruthy();
+      expect(container.getAttribute('aria-labelledby'))
+        .withContext('Expected the aria-labelledby to match the title id.')
+        .toBe(title.id);
+
+      hostFixture.componentInstance.child.dialogRef?.componentInstance.showTitle.set(false);
+      hostFixture.detectChanges();
+      flush();
+      expect(container.getAttribute('aria-labelledby')).toBe(null);
+    }));
+
     function runContentElementTests() {
       it('should close the dialog when clicking on the close button', fakeAsync(() => {
         expect(overlayContainerElement.querySelectorAll('.mat-mdc-dialog-container').length).toBe(

tools/public_api_guard/cdk/dialog.md

@@ -6,6 +6,7 @@
 
 import { BasePortalOutlet } from '@angular/cdk/portal';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
+import { ChangeDetectorRef } from '@angular/core';
 import { ComponentFactoryResolver } from '@angular/core';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ComponentRef } from '@angular/core';
@@ -45,12 +46,16 @@ export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
 // @public
 export class CdkDialogContainer<C extends DialogConfig = DialogConfig> extends BasePortalOutlet implements OnDestroy {
     constructor(_elementRef: ElementRef, _focusTrapFactory: FocusTrapFactory, _document: any, _config: C, _interactivityChecker: InteractivityChecker, _ngZone: NgZone, _overlayRef: OverlayRef, _focusMonitor?: FocusMonitor | undefined);
+    // (undocumented)
+    _addAriaLabelledBy(id: string): void;
     _ariaLabelledByQueue: string[];
     attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
     // @deprecated
     attachDomPortal: (portal: DomPortal) => void;
     attachTemplatePortal<T>(portal: TemplatePortal<T>): EmbeddedViewRef<T>;
     protected _captureInitialFocus(): void;
+    // (undocumented)
+    protected readonly _changeDetectorRef: ChangeDetectorRef;
     _closeInteractionType: FocusOrigin | null;
     // (undocumented)
     readonly _config: C;
@@ -68,6 +73,8 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig> extends B
     protected _ngZone: NgZone;
     _portalOutlet: CdkPortalOutlet;
     _recaptureFocus(): void;
+    // (undocumented)
+    _removeAriaLabelledBy(id: string): void;
     protected _trapFocus(): void;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<CdkDialogContainer<any>, "cdk-dialog-container", never, {}, {}, never, never, true, never>;

tools/public_api_guard/material/bottom-sheet.md

@@ -8,7 +8,6 @@ import { AnimationEvent as AnimationEvent_2 } from '@angular/animations';
 import { AnimationTriggerMetadata } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
-import { ChangeDetectorRef } from '@angular/core';
 import { ComponentRef } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { DialogConfig } from '@angular/cdk/dialog';
@@ -83,7 +82,7 @@ export class MatBottomSheetConfig<D = any> {
 
 // @public
 export class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
-    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, config: DialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, breakpointObserver: BreakpointObserver, _changeDetectorRef: ChangeDetectorRef, focusMonitor?: FocusMonitor);
+    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, config: DialogConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, breakpointObserver: BreakpointObserver, focusMonitor?: FocusMonitor);
     _animationState: 'void' | 'visible' | 'hidden';
     _animationStateChanged: EventEmitter<AnimationEvent_2>;
     // (undocumented)
@@ -99,7 +98,7 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null]>;
 }
 
 // @public (undocumented)