fix(material/menu): clear static aria attributes from host node (#21231)

Clears the static `aria-` attributes from the menu host since they're forwarded
to the menu overlay panel.

Fixes #21152.

Author: crisbeto

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: '<mat-menu aria-label="label"></mat-menu>'
+})
+class StaticAriaLabelMenu {}
+
+
+@Component({
+  template: '<mat-menu aria-labelledby="some-element"></mat-menu>'
+})
+class StaticAriaLabelledByMenu {}
+
+
+@Component({
+  template: '<mat-menu aria-describedby="some-element"></mat-menu>'
+})
+class StaticAriaDescribedbyMenu {}

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

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: '<mat-menu aria-label="label"></mat-menu>'
+})
+class StaticAriaLabelMenu {}
+
+
+@Component({
+  template: '<mat-menu aria-labelledby="some-element"></mat-menu>'
+})
+class StaticAriaLabelledByMenu {}
+
+
+@Component({
+  template: '<mat-menu aria-describedby="some-element"></mat-menu>'
+})
+class StaticAriaDescribedbyMenu {}

src/material/menu/menu.ts

@@ -488,6 +488,11 @@ export class _MatMenuBase implements AfterContentInit, MatMenuPanel<MatMenuItem>
   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