From ba8f893045009777d8e76e05921c8a004a39ce3e Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 9 Nov 2018 09:35:24 +0000
Subject: [PATCH] fix(radio): host element unable to receive focus events

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.
---
 src/lib/radio/radio.scss    | 3 ++-
 src/lib/radio/radio.spec.ts | 2 +-
 src/lib/radio/radio.ts      | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index 02d50f4569c0..2d867d5eb742 100644
--- a/src/lib/radio/radio.scss
+++ b/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;
   }
 
diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts
index 49e03a8b30e6..d87b9bdcbc38 100644
--- a/src/lib/radio/radio.spec.ts
+++ b/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');
     });
 
   });
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index dc77a2ef91f6..733e72fa7569 100644
--- a/src/lib/radio/radio.ts
+++ b/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