fix(radio): able to focus disabled radio button via click

Fixes users being able to focus a disabled radio button by clicking on it. The issue comes from us preserving the -1 tabindex, even if the button is disabled.

Fixes #15493.

Author: crisbeto

src/material/radio/radio.spec.ts

@@ -769,7 +769,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();
 
@@ -791,6 +791,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', () => {
@@ -956,11 +965,11 @@ class RadioGroupWithFormControl {
   formControl = new FormControl();
 }
 
-@Component({
-  template: `<mat-radio-button [tabIndex]="tabIndex"></mat-radio-button>`
-})
+@Component(
+    {template: `<mat-radio-button [disabled]="disabled" [tabIndex]="tabIndex"></mat-radio-button>`})
 class FocusableRadioButton {
   tabIndex: number;
+  disabled = false;
 }
 
 @Component({

src/material/radio/radio.ts

@@ -346,7 +346,7 @@ const _MatRadioButtonMixinBase:
     '[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',