diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts index 33e0d86eb8ab..f4a7b901795b 100644 --- a/src/material/button-toggle/button-toggle.spec.ts +++ b/src/material/button-toggle/button-toggle.spec.ts @@ -271,6 +271,7 @@ describe('MatButtonToggle without forms', () => { ButtonToggleWithTabindex, ButtonToggleWithStaticName, ButtonToggleWithStaticChecked, + ButtonToggleWithStaticAriaAttributes, ], }); @@ -756,6 +757,16 @@ describe('MatButtonToggle without forms', () => { fixture.detectChanges(); expect(buttonElement.getAttribute('aria-label')).toBe('Super effective'); }); + + it('should clear the static aria from the host node', () => { + const fixture = TestBed.createComponent(ButtonToggleWithStaticAriaAttributes); + fixture.detectChanges(); + const hostNode: HTMLElement = fixture.nativeElement.querySelector('mat-button-toggle'); + + expect(hostNode.hasAttribute('aria-label')).toBe(false); + expect(hostNode.hasAttribute('aria-labelledby')).toBe(false); + }); + }); describe('with provided aria-labelledby ', () => { @@ -1073,3 +1084,11 @@ class ButtonToggleWithStaticChecked { @ViewChild(MatButtonToggleGroup) group: MatButtonToggleGroup; @ViewChildren(MatButtonToggle) toggles: QueryList; } + + +@Component({ + template: ` + + ` +}) +class ButtonToggleWithStaticAriaAttributes {} diff --git a/src/material/button-toggle/button-toggle.ts b/src/material/button-toggle/button-toggle.ts index e7a89f7eaff7..f784dc2a10bd 100644 --- a/src/material/button-toggle/button-toggle.ts +++ b/src/material/button-toggle/button-toggle.ts @@ -398,6 +398,8 @@ const _MatButtonToggleMixinBase: CanDisableRippleCtor & typeof MatButtonToggleBa // Always reset the tabindex to -1 so it doesn't conflict with the one on the `button`, // but can still receive focus from things like cdkFocusInitial. '[attr.tabindex]': '-1', + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', '[attr.id]': 'id', '[attr.name]': 'null', '(focus)': 'focus()',