From fcb3a260be2565d069ace7d075ce53a88c334387 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 4 Nov 2016 19:45:16 +0100
Subject: [PATCH] fix(radio): radio buttons not being a tab stop and missing
 focus indication

* Fixes the radio buttons not being tabable.
* Adds focus indication to the radio buttons.

Referencing #421.
---
 src/lib/radio/radio.html    |  3 ++-
 src/lib/radio/radio.spec.ts | 26 ++++++++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/lib/radio/radio.html b/src/lib/radio/radio.html
index f6ff6f3e15d5..54d5fd17c7d9 100644
--- a/src/lib/radio/radio.html
+++ b/src/lib/radio/radio.html
@@ -1,6 +1,7 @@
 <!-- TODO(jelbourn): render the radio on either side of the content -->
 <!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. -->
-<label [attr.for]="inputId" class="md-radio-label">
+<!-- TODO(crisbeto): only show focus indication if focus came from a keyboard event -->
+<label [attr.for]="inputId" class="md-radio-label" [class.md-ripple-focused]="_isFocused">
   <!-- The actual 'radio' part of the control. -->
   <div class="md-radio-container">
     <div class="md-radio-outer-circle"></div>
diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts
index 6fa1eb6642fe..24dd10130502 100644
--- a/src/lib/radio/radio.spec.ts
+++ b/src/lib/radio/radio.spec.ts
@@ -152,7 +152,7 @@ describe('MdRadio', () => {
       expect(spies[1]).toHaveBeenCalledTimes(1);
     });
 
-    it(`should not emit a change event from the radio group when change group value 
+    it(`should not emit a change event from the radio group when change group value
         programmatically`, () => {
       expect(groupInstance.value).toBeFalsy();
 
@@ -235,7 +235,7 @@ describe('MdRadio', () => {
       }
     }));
 
-    it(`should update the group's selected radio to null when unchecking that radio 
+    it(`should update the group's selected radio to null when unchecking that radio
         programmatically`, () => {
       let changeSpy = jasmine.createSpy('radio-group change listener');
       groupInstance.change.subscribe(changeSpy);
@@ -485,6 +485,24 @@ describe('MdRadio', () => {
 
       expect(fruitRadioNativeInputs[0].getAttribute('aria-labelledby')).toBe('uvw');
     });
+
+    it('should add a ripple when the native input element is focused', () => {
+      let hostElement = seasonRadioInstances[0].getHostElement() as HTMLElement;
+      let input = hostElement.querySelector('input') as HTMLInputElement;
+      let label = hostElement.querySelector('label') as HTMLLabelElement;
+
+      expect(label.classList).not.toContain('md-ripple-focused');
+
+      dispatchEvent('focus', input);
+      fixture.detectChanges();
+
+      expect(label.classList).toContain('md-ripple-focused');
+
+      dispatchEvent('blur', input);
+      fixture.detectChanges();
+
+      expect(label.classList).not.toContain('md-ripple-focused');
+    });
   });
 });
 
@@ -514,11 +532,11 @@ class RadiosInsideRadioGroup {
     <md-radio-button name="season" value="spring">Spring</md-radio-button>
     <md-radio-button name="season" value="summer">Summer</md-radio-button>
     <md-radio-button name="season" value="autum">Autumn</md-radio-button>
-    
+
     <md-radio-button name="weather" value="warm">Spring</md-radio-button>
     <md-radio-button name="weather" value="hot">Summer</md-radio-button>
     <md-radio-button name="weather" value="cool">Autumn</md-radio-button>
-    
+
     <span id="xyz">Baby Banana</span>
     <md-radio-button name="fruit" value="banana" aria-label="Banana" aria-labelledby="xyz">
     </md-radio-button>