diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts index 20e72ebed397..073f68b8714f 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -783,7 +783,7 @@ describe('MatRadio', () => { .toBe(4, 'Expected the tabindex to be set to "4".'); }); - it('should remove the tabindex from the host element', () => { + it('should set the tabindex to -1 on the host element', () => { const predefinedFixture = TestBed.createComponent(RadioButtonWithPredefinedTabindex); predefinedFixture.detectChanges(); @@ -815,6 +815,15 @@ describe('MatRadio', () => { expect(radioButtonEl.hasAttribute('aria-labelledby')).toBe(false); }); + it('should remove the tabindex from the host element when disabled', () => { + const radioButtonEl = fixture.debugElement.query(By.css('.mat-radio-button')).nativeElement; + + fixture.componentInstance.disabled = true; + fixture.detectChanges(); + + expect(radioButtonEl.hasAttribute('tabindex')).toBe(false); + }); + }); describe('group interspersed with other tags', () => { @@ -982,11 +991,11 @@ class RadioGroupWithFormControl { formControl = new FormControl(); } -@Component({ - template: `` -}) +@Component( + {template: ``}) class FocusableRadioButton { tabIndex: number; + disabled = false; } @Component({ diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts index 95b364e2ab57..e6ef4fcb504b 100644 --- a/src/material/radio/radio.ts +++ b/src/material/radio/radio.ts @@ -641,7 +641,7 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple '[class.mat-accent]': 'color === "accent"', '[class.mat-warn]': 'color === "warn"', // Needs to be -1 so the `focus` event still fires. - '[attr.tabindex]': '-1', + '[attr.tabindex]': 'disabled ? null : -1', '[attr.id]': 'id', '[attr.aria-label]': 'null', '[attr.aria-labelledby]': 'null',