fix(menu): trigger should aria-owns panel

angular · Oct 11, 2019 · ba9a41a · ba9a41a
1 parent 43af4c2
commit ba9a41a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 0 deletions.
diff --git a/src/material/menu/menu-panel.ts b/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.

diff --git a/src/material/menu/menu-trigger.ts b/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-owns]': 'menuOpen ? menu.panelId : null',
     '(mousedown)': '_handleMousedown($event)',
     '(keydown)': '_handleKeydown($event)',
     '(click)': '_handleClick($event)',

diff --git a/src/material/menu/menu.html b/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')"

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

diff --git a/src/material/menu/menu.ts b/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,