diff --git a/src/material-experimental/mdc-menu/menu.spec.ts b/src/material-experimental/mdc-menu/menu.spec.ts index b2ceb6f94ec5..ba04404b949b 100644 --- a/src/material-experimental/mdc-menu/menu.spec.ts +++ b/src/material-experimental/mdc-menu/menu.spec.ts @@ -994,6 +994,26 @@ describe('MDC-based MatMenu', () => { .toBe(overlayContainerElement.querySelector('.mat-mdc-menu-panel')); })); + it('should clear the static aria-label from the menu host', () => { + const fixture = createComponent(StaticAriaLabelMenu); + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('mat-menu').hasAttribute('aria-label')).toBe(false); + }); + + it('should clear the static aria-labelledby from the menu host', () => { + const fixture = createComponent(StaticAriaLabelledByMenu); + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('mat-menu').hasAttribute('aria-labelledby')) + .toBe(false); + }); + + it('should clear the static aria-describedby from the menu host', () => { + const fixture = createComponent(StaticAriaDescribedbyMenu); + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('mat-menu').hasAttribute('aria-describedby')) + .toBe(false); + }); + describe('lazy rendering', () => { it('should be able to render the menu content lazily', fakeAsync(() => { const fixture = createComponent(SimpleLazyMenu); @@ -2603,3 +2623,21 @@ class LazyMenuWithOnPush { }) class InvalidRecursiveMenu { } + + +@Component({ + template: '' +}) +class StaticAriaLabelMenu {} + + +@Component({ + template: '' +}) +class StaticAriaLabelledByMenu {} + + +@Component({ + template: '' +}) +class StaticAriaDescribedbyMenu {} diff --git a/src/material-experimental/mdc-menu/menu.ts b/src/material-experimental/mdc-menu/menu.ts index 4e76e62d938d..48b81bfcfb1d 100644 --- a/src/material-experimental/mdc-menu/menu.ts +++ b/src/material-experimental/mdc-menu/menu.ts @@ -44,6 +44,11 @@ export const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER: Provider = { changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'matMenu', + host: { + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', + '[attr.aria-describedby]': 'null', + }, animations: [ matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index efa0262fe81f..388005dc6a38 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -937,6 +937,26 @@ describe('MatMenu', () => { expect(document.activeElement).toBe(overlayContainerElement.querySelector('.mat-menu-panel')); })); + it('should clear the static aria-label from the menu host', () => { + const fixture = createComponent(StaticAriaLabelMenu); + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('mat-menu').hasAttribute('aria-label')).toBe(false); + }); + + it('should clear the static aria-labelledby from the menu host', () => { + const fixture = createComponent(StaticAriaLabelledByMenu); + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('mat-menu').hasAttribute('aria-labelledby')) + .toBe(false); + }); + + it('should clear the static aria-describedby from the menu host', () => { + const fixture = createComponent(StaticAriaDescribedbyMenu); + fixture.detectChanges(); + expect(fixture.nativeElement.querySelector('mat-menu').hasAttribute('aria-describedby')) + .toBe(false); + }); + describe('lazy rendering', () => { it('should be able to render the menu content lazily', fakeAsync(() => { const fixture = createComponent(SimpleLazyMenu); @@ -2692,3 +2712,21 @@ class LazyMenuWithOnPush { }) class InvalidRecursiveMenu { } + + +@Component({ + template: '' +}) +class StaticAriaLabelMenu {} + + +@Component({ + template: '' +}) +class StaticAriaLabelledByMenu {} + + +@Component({ + template: '' +}) +class StaticAriaDescribedbyMenu {} diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts index 51e562932668..b33a4409df47 100644 --- a/src/material/menu/menu.ts +++ b/src/material/menu/menu.ts @@ -488,6 +488,11 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'matMenu', + host: { + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', + '[attr.aria-describedby]': 'null', + }, animations: [ matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems