fix(checkbox): missing focus indicator

Adds a ripple when a checkbox is focused.

Referencing #421.

Author: crisbeto

src/lib/checkbox/checkbox.spec.ts

@@ -332,6 +332,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', () => {

src/lib/checkbox/checkbox.ts

@@ -73,7 +73,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,