diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts index 86dfb6937c94..5053aab41884 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -22,6 +22,7 @@ describe('MatRadio', () => { InterleavedRadioGroup, TranscludingWrapper, RadioButtonWithPredefinedTabindex, + RadioButtonWithPredefinedAriaAttributes, ] }); @@ -778,6 +779,18 @@ describe('MatRadio', () => { expect(radioButtonEl.getAttribute('tabindex')).toBe('-1'); }); + it('should remove the aria attributes from the host element', () => { + const predefinedFixture = TestBed.createComponent(RadioButtonWithPredefinedAriaAttributes); + predefinedFixture.detectChanges(); + + const radioButtonEl = + predefinedFixture.debugElement.query(By.css('.mat-radio-button'))!.nativeElement; + + expect(radioButtonEl.hasAttribute('aria-label')).toBe(false); + expect(radioButtonEl.hasAttribute('aria-describedby')).toBe(false); + expect(radioButtonEl.hasAttribute('aria-labelledby')).toBe(false); + }); + }); describe('group interspersed with other tags', () => { @@ -991,3 +1004,13 @@ class DefaultRadioButton {} template: `` }) class RadioButtonWithColorBinding {} + + +@Component({ + template: ` + ` +}) +class RadioButtonWithPredefinedAriaAttributes {} diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts index 6cd84d525440..d3101881f4b0 100644 --- a/src/material/radio/radio.ts +++ b/src/material/radio/radio.ts @@ -346,6 +346,9 @@ const _MatRadioButtonMixinBase: // Needs to be -1 so the `focus` event still fires. '[attr.tabindex]': '-1', '[attr.id]': 'id', + '[attr.aria-label]': 'null', + '[attr.aria-labelledby]': 'null', + '[attr.aria-describedby]': 'null', // Note: under normal conditions focus shouldn't land on this element, however it may be // programmatically set, for example inside of a focus trap, in this case we want to forward // the focus to the native element.