fix(checkbox): missing focus indicator

Adds a ripple when a checkbox is focused. Referencing angular#421.
crisbeto · Dec 18, 2016 · c4712de · c4712de
1 parent 2168d7c
commit c4712de
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/lib/checkbox/checkbox.spec.ts b/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', () => {

diff --git a/src/lib/checkbox/checkbox.ts b/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,