fix(radio): host element unable to receive focus events (#13956)

In #13323 we started clearing the `tabindex` from the `host` element in order to avoid having two elements with the same `tabindex` when the consumer sets a custom `tabindex`. As a result, the `mat-radio-button` can no longer receive focus and forward it to the `input`. These changes always reset the `tabindex` to -1 so the element is focusable, but not tabbable.

Fixes #13953.

Author: crisbeto

src/lib/radio/radio.scss

@@ -10,6 +10,7 @@ $mat-radio-ripple-radius: 20px;
 .mat-radio-button {
   display: inline-block;
   -webkit-tap-highlight-color: transparent;
+  outline: 0;
 }
 
 // Inner label container, wrapping entire element.
@@ -141,7 +142,7 @@ $mat-radio-ripple-radius: 20px;
     opacity: 0.04;
   }
 
-  .mat-radio-button.cdk-focused & {
+  .mat-radio-button:not(.mat-radio-disabled).cdk-focused & {
     opacity: 0.12;
   }
 

src/lib/radio/radio.spec.ts

@@ -723,7 +723,7 @@ describe('MatRadio', () => {
       const radioButtonEl =
           predefinedFixture.debugElement.query(By.css('.mat-radio-button')).nativeElement;
 
-      expect(radioButtonEl.getAttribute('tabindex')).toBeFalsy();
+      expect(radioButtonEl.getAttribute('tabindex')).toBe('-1');
     });
 
   });

src/lib/radio/radio.ts

@@ -336,7 +336,8 @@ export const _MatRadioButtonMixinBase:
     '[class.mat-radio-checked]': 'checked',
     '[class.mat-radio-disabled]': 'disabled',
     '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
-    '[attr.tabindex]': 'null',
+    // Needs to be -1 so the `focus` event still fires.
+    '[attr.tabindex]': '-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