fix(material/menu): aria-expanded not updating in an OnPush component (#26279)

Fixes that the value for `aria-expanded` wasn't being updated when the menu is closed inside an OnPush parent.

Fixes #26262.

Author: crisbeto

src/material/menu/menu-trigger.ts

@@ -26,9 +26,11 @@ import {
 import {TemplatePortal} from '@angular/cdk/portal';
 import {
   AfterContentInit,
+  ChangeDetectorRef,
   Directive,
   ElementRef,
   EventEmitter,
+  inject,
   Inject,
   InjectionToken,
   Input,
@@ -93,6 +95,7 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
   private _hoverSubscription = Subscription.EMPTY;
   private _menuCloseSubscription = Subscription.EMPTY;
   private _scrollStrategy: () => ScrollStrategy;
+  private _changeDetectorRef = inject(ChangeDetectorRef);
 
   /**
    * We're specifically looking for a `MatMenu` here since the generic `MatMenuPanel`
@@ -436,11 +439,15 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
 
   // set state rather than toggle to support triggers sharing a menu
   private _setIsMenuOpen(isOpen: boolean): void {
-    this._menuOpen = isOpen;
-    this._menuOpen ? this.menuOpened.emit() : this.menuClosed.emit();
+    if (isOpen !== this._menuOpen) {
+      this._menuOpen = isOpen;
+      this._menuOpen ? this.menuOpened.emit() : this.menuClosed.emit();
 
-    if (this.triggersSubmenu()) {
-      this._menuItemInstance._setHighlighted(isOpen);
+      if (this.triggersSubmenu()) {
+        this._menuItemInstance._setHighlighted(isOpen);
+      }
+
+      this._changeDetectorRef.markForCheck();
     }
   }
 

src/material/menu/menu.spec.ts

@@ -897,6 +897,26 @@ describe('MDC-based MatMenu', () => {
     expect(triggerEl.getAttribute('aria-expanded')).toBe('false');
   }));
 
+  it('should toggle aria-expanded on the trigger in an OnPush component', fakeAsync(() => {
+    const fixture = createComponent(SimpleMenuOnPush, [], [FakeIcon]);
+    fixture.detectChanges();
+    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+
+    expect(triggerEl.getAttribute('aria-expanded')).toBe('false');
+
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    expect(triggerEl.getAttribute('aria-expanded')).toBe('true');
+
+    fixture.componentInstance.trigger.closeMenu();
+    fixture.detectChanges();
+    tick(500);
+
+    expect(triggerEl.getAttribute('aria-expanded')).toBe('false');
+  }));
+
   it('should throw if assigning a menu that contains the trigger', fakeAsync(() => {
     expect(() => {
       const fixture = createComponent(InvalidRecursiveMenu, [], [FakeIcon]);
@@ -2737,34 +2757,34 @@ describe('MatMenu default overrides', () => {
   }));
 });
 
-@Component({
-  template: `
-    <button
-      [matMenuTriggerFor]="menu"
-      [matMenuTriggerRestoreFocus]="restoreFocus"
-      #triggerEl>Toggle menu</button>
-    <mat-menu
-      #menu="matMenu"
-      [class]="panelClass"
-      (closed)="closeCallback($event)"
-      [backdropClass]="backdropClass"
-      [aria-label]="ariaLabel"
-      [aria-labelledby]="ariaLabelledby"
-      [aria-describedby]="ariaDescribedby">
-
-      <button mat-menu-item> Item </button>
-      <button mat-menu-item disabled> Disabled </button>
-      <button mat-menu-item disableRipple>
-        <mat-icon>unicorn</mat-icon>
-        Item with an icon
-      </button>
-      <button mat-menu-item>
-        <span>Item with text inside span</span>
-      </button>
-      <button *ngFor="let item of extraItems" mat-menu-item> {{item}} </button>
-    </mat-menu>
-  `,
-})
+const SIMPLE_MENU_TEMPLATE = `
+  <button
+    [matMenuTriggerFor]="menu"
+    [matMenuTriggerRestoreFocus]="restoreFocus"
+    #triggerEl>Toggle menu</button>
+  <mat-menu
+    #menu="matMenu"
+    [class]="panelClass"
+    (closed)="closeCallback($event)"
+    [backdropClass]="backdropClass"
+    [aria-label]="ariaLabel"
+    [aria-labelledby]="ariaLabelledby"
+    [aria-describedby]="ariaDescribedby">
+
+    <button mat-menu-item> Item </button>
+    <button mat-menu-item disabled> Disabled </button>
+    <button mat-menu-item disableRipple>
+      <mat-icon>unicorn</mat-icon>
+      Item with an icon
+    </button>
+    <button mat-menu-item>
+      <span>Item with text inside span</span>
+    </button>
+    <button *ngFor="let item of extraItems" mat-menu-item> {{item}} </button>
+  </mat-menu>
+`;
+
+@Component({template: SIMPLE_MENU_TEMPLATE})
 class SimpleMenu {
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
   @ViewChild('triggerEl') triggerEl: ElementRef<HTMLElement>;
@@ -2780,6 +2800,9 @@ class SimpleMenu {
   ariaDescribedby: string;
 }
 
+@Component({template: SIMPLE_MENU_TEMPLATE, changeDetection: ChangeDetectionStrategy.OnPush})
+class SimpleMenuOnPush extends SimpleMenu {}
+
 @Component({
   template: `
     <button [matMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>