fix(checkbox): missing focus indicator

Adds a ripple when a checkbox is focused. Referencing angular#421.
crisbeto · Nov 19, 2016 · 82a9d3e · 82a9d3e
1 parent a0d85d8
commit 82a9d3e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/lib/checkbox/checkbox.spec.ts b/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>`,
 })

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