From bf8870269c6d117572773abe3281328353b75944 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 12 Jun 2018 18:49:39 +0200
Subject: [PATCH] fix(menu): toggle aria-expanded attribute on menu trigger
 (#11751)

[Based on the accessibility guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton), buttons that trigger a menu should have the `aria-expanded` attribute.
---
 src/lib/menu/menu-trigger.ts |  1 +
 src/lib/menu/menu.spec.ts    | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index fd8e906a865..091a4bc60ec 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -70,6 +70,7 @@ export const MENU_PANEL_TOP_PADDING = 8;
   selector: `[mat-menu-trigger-for], [matMenuTriggerFor]`,
   host: {
     'aria-haspopup': 'true',
+    '[attr.aria-expanded]': 'menuOpen || null',
     '(mousedown)': '_handleMousedown($event)',
     '(keydown)': '_handleKeydown($event)',
     '(click)': '_handleClick($event)',
diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
index fe611643519..f1c23643f64 100644
--- a/src/lib/menu/menu.spec.ts
+++ b/src/lib/menu/menu.spec.ts
@@ -388,6 +388,24 @@ describe('MatMenu', () => {
       expect(items[2].classList).toContain('cdk-keyboard-focused');
     }));
 
+  it('should toggle the aria-expanded attribute on the trigger', () => {
+    const fixture = createComponent(SimpleMenu, [], [FakeIcon]);
+    fixture.detectChanges();
+    const triggerEl = fixture.componentInstance.triggerEl.nativeElement;
+
+    expect(triggerEl.hasAttribute('aria-expanded')).toBe(false);
+
+    fixture.componentInstance.trigger.openMenu();
+    fixture.detectChanges();
+
+    expect(triggerEl.getAttribute('aria-expanded')).toBe('true');
+
+    fixture.componentInstance.trigger.closeMenu();
+    fixture.detectChanges();
+
+    expect(triggerEl.hasAttribute('aria-expanded')).toBe(false);
+  });
+
   describe('lazy rendering', () => {
     it('should be able to render the menu content lazily', fakeAsync(() => {
       const fixture = createComponent(SimpleLazyMenu);