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',