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.

Author: crisbeto

src/lib/radio/radio.html

@@ -1,6 +1,6 @@
 <!-- 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">
+<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>
@@ -17,6 +17,7 @@
           [checked]="checked"
           [disabled]="disabled"
           [name]="name"
+          [tabIndex]="tabindex"
           [attr.aria-label]="ariaLabel"
           [attr.aria-labelledby]="ariaLabelledby"
           (change)="_onInputChange($event)"

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,28 @@ describe('MdRadio', () => {
 
       expect(fruitRadioNativeInputs[0].getAttribute('aria-labelledby')).toBe('uvw');
     });
+
+    it('should make the native input element a tab stop', () => {
+      expect(fruitRadioNativeInputs[0].tabIndex).toBe(0);
+    });
+
+    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 +536,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>

src/lib/radio/radio.ts

@@ -239,6 +239,9 @@ export class MdRadioButton implements OnInit {
   @HostBinding('class.md-radio-focused')
   _isFocused: boolean;
 
+  /** Tabindex for the input element. */
+  @Input() tabindex: number = 0;
+
   /** Whether this radio is checked. */
   private _checked: boolean = false;