fix(checkbox): missing focus indicator

Adds a ripple when a checkbox is focused.

Referencing #421.

Author: crisbeto

src/lib/checkbox/checkbox.spec.ts

@@ -295,6 +295,20 @@ describe('MdCheckbox', () => {
         expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true);
 
       });
+
+      it('should activate the ripple focused class when the input is focused', () => {
+        expect(checkboxNativeElement.classList).not.toContain('md-ripple-focused');
+
+        checkboxInstance._onInputFocus();
+        fixture.detectChanges();
+
+        expect(checkboxNativeElement.classList).toContain('md-ripple-focused');
+
+        checkboxInstance._onInputBlur();
+        fixture.detectChanges();
+
+        expect(checkboxNativeElement.classList).not.toContain('md-ripple-focused');
+      });
     });
 
     describe('state transition css classes', () => {
@@ -555,13 +569,13 @@ describe('MdCheckbox', () => {
 /** Simple component for testing a single checkbox. */
 @Component({
   template: `
-  <div (click)="parentElementClicked = true" (keyup)="parentElementKeyedUp = true">    
-    <md-checkbox 
+  <div (click)="parentElementClicked = true" (keyup)="parentElementKeyedUp = true">
+    <md-checkbox
         id="simple-check"
         [required]="isRequired"
         [align]="alignment"
-        [checked]="isChecked" 
-        [indeterminate]="isIndeterminate" 
+        [checked]="isChecked"
+        [indeterminate]="isIndeterminate"
         [disabled]="isDisabled"
         [color]="checkboxColor"
         (change)="changeCount = changeCount + 1"
@@ -612,9 +626,9 @@ class MultipleCheckboxes { }
 /** Simple test component with tabIndex */
 @Component({
   template: `
-    <md-checkbox 
-        [tabindex]="customTabIndex" 
-        [disabled]="isDisabled" 
+    <md-checkbox
+        [tabindex]="customTabIndex"
+        [disabled]="isDisabled"
         [disableRipple]="disableRipple">
     </md-checkbox>`,
 })

src/lib/checkbox/checkbox.ts

@@ -69,7 +69,7 @@ export class MdCheckboxChange {
     '[class.md-checkbox-checked]': 'checked',
     '[class.md-checkbox-disabled]': 'disabled',
     '[class.md-checkbox-align-end]': 'align == "end"',
-    '[class.md-checkbox-focused]': 'hasFocus',
+    '[class.md-ripple-focused]': 'hasFocus', // TODO: should only be triggered by keyboard focus
   },
   providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR],
   encapsulation: ViewEncapsulation.None,