fixup! fix(material/dialog): mat-dialog-title should work under `On…

…Push` `viewContainerRef`

src/cdk/dialog/dialog-container.ts

@@ -35,6 +35,7 @@ import {
   Optional,
   ViewChild,
   ViewEncapsulation,
+  signal,
 } from '@angular/core';
 import {DialogConfig} from './dialog-config';
 
@@ -62,7 +63,7 @@ export function throwDialogContentAlreadyAttachedError() {
     '[attr.id]': '_config.id || null',
     '[attr.role]': '_config.role',
     '[attr.aria-modal]': '_config.ariaModal',
-    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]',
+    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue()[0]',
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
   },
@@ -95,7 +96,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
    * where there are two or more titles in the DOM at a time and the first one is destroyed while
    * the rest are present.
    */
-  _ariaLabelledByQueue: string[] = [];
+  _ariaLabelledByQueue = signal([] as string[]);
 
   constructor(
     protected _elementRef: ElementRef,
@@ -112,7 +113,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
     this._document = _document;
 
     if (this._config.ariaLabelledBy) {
-      this._ariaLabelledByQueue.push(this._config.ariaLabelledBy);
+      this._ariaLabelledByQueue.update(queue => [...queue, this._config.ariaLabelledBy!]);
     }
   }
 

src/material/dialog/dialog-container.ts

@@ -11,6 +11,7 @@ import {OverlayRef} from '@angular/cdk/overlay';
 import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ComponentRef,
   ElementRef,
@@ -20,6 +21,7 @@ import {
   OnDestroy,
   Optional,
   ViewEncapsulation,
+  inject,
 } from '@angular/core';
 import {MatDialogConfig} from './dialog-config';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
@@ -64,7 +66,7 @@ export const CLOSE_ANIMATION_DURATION = 75;
     '[attr.aria-modal]': '_config.ariaModal',
     '[id]': '_config.id',
     '[attr.role]': '_config.role',
-    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue[0]',
+    '[attr.aria-labelledby]': '_config.ariaLabel ? null : _ariaLabelledByQueue()[0]',
     '[attr.aria-label]': '_config.ariaLabel',
     '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
     '[class._mat-animation-noopable]': '!_animationsEnabled',

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

@@ -7,16 +7,15 @@
  */
 
 import {
-  ChangeDetectorRef,
   Directive,
   ElementRef,
-  inject,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
   Optional,
   SimpleChanges,
+  untracked,
 } from '@angular/core';
 
 import {MatDialog} from './dialog';
@@ -104,7 +103,6 @@ export class MatDialogClose implements OnInit, OnChanges {
 })
 export class MatDialogTitle implements OnInit, OnDestroy {
   @Input() id: string = `mat-mdc-dialog-title-${dialogElementUid++}`;
-  private readonly changeDetectorRef = inject(ChangeDetectorRef);
 
   constructor(
     // The dialog title directive is always used in combination with a `MatDialogRef`.
@@ -123,10 +121,10 @@ 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);
-        // Updating state requires calling `markForCheck` in order to ensure
-        // state is synchronized to the DOM.
-        this.changeDetectorRef.markForCheck();
+        this._dialogRef._containerInstance?._ariaLabelledByQueue.update(queue => [
+          ...queue,
+          this.id,
+        ]);
       });
     }
   }
@@ -138,11 +136,10 @@ export class MatDialogTitle implements OnInit, OnDestroy {
 
     if (queue) {
       Promise.resolve().then(() => {
-        const index = queue.indexOf(this.id);
+        const index = untracked(queue).indexOf(this.id);
 
         if (index > -1) {
-          queue.splice(index, 1);
-          this.changeDetectorRef.markForCheck();
+          queue.update(value => [...value.slice(0, index), ...value.slice(index + 1)]);
         }
       });
     }

src/material/dialog/dialog.spec.ts

@@ -30,6 +30,7 @@ import {
   ViewContainerRef,
   ViewEncapsulation,
   forwardRef,
+  signal,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -1627,23 +1628,27 @@ describe('MDC-based MatDialog', () => {
       @Component({
         standalone: true,
         imports: [MatDialogTitle],
-        template: `<h1 mat-dialog-title>This is the first title</h1>`,
+        template: `@if (showTitle()) { <h1 mat-dialog-title>This is the first title</h1> }`,
       })
-      class DialogCmp {}
+      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.dialog.open(DialogCmp, {viewContainerRef: this.viewContainerRef});
+          this.dialogRef = this.dialog.open(DialogCmp, {viewContainerRef: this.viewContainerRef});
         }
       }
 
@@ -1670,6 +1675,11 @@ describe('MDC-based MatDialog', () => {
       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() {