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

scripts/browserstack/start_tunnel.sh

@@ -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>

src/lib/radio/radio.html

@@ -574,6 +574,24 @@ describe('MdRadio', () => {
         expect(document.activeElement).toBe(fruitRadioNativeInputs[i]);
       }
     });
+
+    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');
+    });
   });
 });