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);