mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
Jeremy Elbourn
parent
13f3f56878
commit
bf8870269c
@@ -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)',
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user