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.
This commit is contained in:
Kristiyan Kostadinov
2018-06-12 18:49:39 +02:00
committed by Jeremy Elbourn
parent 13f3f56878
commit bf8870269c
2 changed files with 19 additions and 0 deletions
+1
View File
@@ -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)',
+18
View File
@@ -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);