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/lib/radio/radio.spec.ts

@@ -738,7 +738,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();
 
@@ -748,6 +748,15 @@ describe('MatRadio', () => {
       expect(radioButtonEl.getAttribute('tabindex')).toBe('-1');
     });
 
+    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', () => {
@@ -876,11 +885,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/lib/radio/radio.ts

@@ -323,7 +323,7 @@ export const _MatRadioButtonMixinBase:
     '[class.mat-radio-disabled]': 'disabled',
     '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
     // Needs to be -1 so the `focus` event still fires.
-    '[attr.tabindex]': '-1',
+    '[attr.tabindex]': 'disabled ? null : -1',
     '[attr.id]': 'id',
     // 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
@@ -332,9 +332,10 @@ export const _MatRadioButtonMixinBase:
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatRadioButton extends _MatRadioButtonMixinBase
-    implements OnInit, AfterViewInit, OnDestroy, CanColor, CanDisableRipple, HasTabIndex {
-
+export class MatRadioButton extends _MatRadioButtonMixinBase implements OnInit, AfterViewInit,
+                                                                        OnDestroy, CanColor,
+                                                                        CanDisableRipple,
+                                                                        HasTabIndex {
   private _uniqueId: string = `mat-radio-${++nextUniqueId}`;
 
   /** The unique ID for the radio button. */
@@ -558,5 +559,4 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
       }
     }
   }
-
 }