fix(menu): trigger should aria-controls panel (#17365)

* fix(menu): trigger should aria-controls panel

* update api golden

* update mdc-based menu

Author: mmalerba

src/material-experimental/mdc-menu/menu.html

@@ -1,6 +1,7 @@
 <ng-template>
   <div
     class="mat-mdc-menu-panel mdc-menu-surface mdc-menu-surface--open"
+    [id]="panelId"
     [ngClass]="_classList"
     (keydown)="_handleKeydown($event)"
     (click)="closed.emit('click')"

src/material-experimental/mdc-menu/menu.spec.ts

@@ -74,6 +74,15 @@ describe('MatMenu', () => {
     overlayContainer.ngOnDestroy();
   }));
 
+  it('should aria-controls the menu panel', () => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.triggerEl.nativeElement.getAttribute('aria-controls'))
+        .toBe(fixture.componentInstance.menu.panelId);
+  });
+
   it('should open the menu as an idempotent operation', () => {
     const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();

src/material/menu/menu-panel.ts

@@ -37,6 +37,7 @@ export interface MatMenuPanel<T = any> {
   lazyContent?: MatMenuContent;
   backdropClass?: string;
   hasBackdrop?: boolean;
+  readonly panelId?: string;
 
   /**
    * @deprecated To be removed.

src/material/menu/menu-trigger.ts

@@ -76,6 +76,7 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({passive: tr
     'class': 'mat-menu-trigger',
     'aria-haspopup': 'true',
     '[attr.aria-expanded]': 'menuOpen || null',
+    '[attr.aria-controls]': 'menuOpen ? menu.panelId : null',
     '(mousedown)': '_handleMousedown($event)',
     '(keydown)': '_handleKeydown($event)',
     '(click)': '_handleClick($event)',

src/material/menu/menu.html

@@ -1,6 +1,7 @@
 <ng-template>
   <div
     class="mat-menu-panel"
+    [id]="panelId"
     [ngClass]="_classList"
     (keydown)="_handleKeydown($event)"
     (click)="closed.emit('click')"

src/material/menu/menu.spec.ts

@@ -76,6 +76,15 @@ describe('MatMenu', () => {
     overlayContainer.ngOnDestroy();
   }));
 
+  it('should aria-controls the menu panel', () => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.triggerEl.nativeElement.getAttribute('aria-controls'))
+        .toBe(fixture.componentInstance.menu.panelId);
+  });
+
   it('should open the menu as an idempotent operation', () => {
     const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
     fixture.detectChanges();

src/material/menu/menu.ts

@@ -90,6 +90,8 @@ export function MAT_MENU_DEFAULT_OPTIONS_FACTORY(): MatMenuDefaultOptions {
  */
 const MAT_MENU_BASE_ELEVATION = 4;
 
+let menuPanelUid = 0;
+
 /** Base class with all of the `MatMenu` functionality. */
 @Directive({
   // TODO(devversion): this selector can be removed when we update to Angular 9.0.
@@ -237,6 +239,8 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
    */
   @Output() close = this.closed;
 
+  readonly panelId = `mat-menu-panel-${menuPanelUid++}`;
+
   constructor(
     private _elementRef: ElementRef<HTMLElement>,
     private _ngZone: NgZone,

tools/public_api_guard/material/menu.d.ts

@@ -20,6 +20,7 @@ export declare class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatM
     lazyContent: MatMenuContent;
     overlapTrigger: boolean;
     panelClass: string;
+    readonly panelId: string;
     parentMenu: MatMenuPanel | undefined;
     templateRef: TemplateRef<any>;
     xPosition: MenuPositionX;
@@ -105,6 +106,7 @@ export interface MatMenuPanel<T = any> {
     hasBackdrop?: boolean;
     lazyContent?: MatMenuContent;
     overlapTrigger: boolean;
+    readonly panelId?: string;
     parentMenu?: MatMenuPanel | undefined;
     removeItem?: (item: T) => void;
     resetActiveItem: () => void;