fix(material-experimental/mdc-radio): able to focus disabled radio button via click

src/material-experimental/mdc-radio/radio.spec.ts

@@ -776,7 +776,7 @@ describe('MDC-based 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();
 
@@ -798,6 +798,15 @@ describe('MDC-based MatRadio', () => {
       expect(radioButtonEl.hasAttribute('aria-labelledby')).toBe(false);
     });
 
+    it('should remove the tabindex from the host element when disabled', () => {
+      const radioButton = fixture.debugElement.query(By.css('.mat-mdc-radio-button')).nativeElement;
+
+      fixture.componentInstance.disabled = true;
+      fixture.detectChanges();
+
+      expect(radioButton.hasAttribute('tabindex')).toBe(false);
+    });
+
   });
 
   describe('group interspersed with other tags', () => {
@@ -964,10 +973,11 @@ class RadioGroupWithFormControl {
 }
 
 @Component({
-  template: `<mat-radio-button [tabIndex]="tabIndex"></mat-radio-button>`
+  template: `<mat-radio-button [disabled]="disabled" [tabIndex]="tabIndex"></mat-radio-button>`
 })
 class FocusableRadioButton {
   tabIndex: number;
+  disabled = false;
 }
 
 @Component({

src/material-experimental/mdc-radio/radio.ts

@@ -81,7 +81,7 @@ export class MatRadioGroup extends BaseMatRadioGroup {
     '[class.mat-primary]': 'color === "primary"',
     '[class.mat-accent]': 'color === "accent"',
     '[class.mat-warn]': 'color === "warn"',
-    '[attr.tabindex]': '-1',
+    '[attr.tabindex]': 'disabled ? null : -1',
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
     '[attr.aria-describedby]': 'null',