From 42ed317ce13c47542d329745903b18d99cb7a951 Mon Sep 17 00:00:00 2001
From: vthinkxie <vthinkxie@users.noreply.github.com>
Date: Fri, 1 Mar 2019 18:06:39 +0800
Subject: [PATCH] fix(module:checkbox): fix checkbox a11y error (#3009)

close #3000
---
 components/checkbox/nz-checkbox.component.html |  5 +----
 components/checkbox/nz-checkbox.component.ts   |  8 ++++++--
 components/checkbox/nz-checkbox.spec.ts        | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/components/checkbox/nz-checkbox.component.html b/components/checkbox/nz-checkbox.component.html
index 3cfc2648d1a..c0f1fef1520 100644
--- a/components/checkbox/nz-checkbox.component.html
+++ b/components/checkbox/nz-checkbox.component.html
@@ -2,10 +2,7 @@
   [class.ant-checkbox-checked]="nzChecked && !nzIndeterminate"
   [class.ant-checkbox-disabled]="nzDisabled"
   [class.ant-checkbox-indeterminate]="nzIndeterminate">
-  <input #inputElement
-    [checked]="nzChecked"
-    type="checkbox"
-    class="ant-checkbox-input">
+  <input #inputElement [checked]="nzChecked" [ngModel]="nzChecked" [disabled]="nzDisabled" (ngModelChange)="innerCheckedChange($event)" (click)="$event.stopPropagation();" type="checkbox" class="ant-checkbox-input">
   <span class="ant-checkbox-inner"></span>
 </span>
 <span #contentElement (cdkObserveContent)="checkContent()"><ng-content></ng-content></span>
\ No newline at end of file
diff --git a/components/checkbox/nz-checkbox.component.ts b/components/checkbox/nz-checkbox.component.ts
index 5e0d7328a81..204fe834ff1 100644
--- a/components/checkbox/nz-checkbox.component.ts
+++ b/components/checkbox/nz-checkbox.component.ts
@@ -37,7 +37,7 @@ import { NzCheckboxWrapperComponent } from './nz-checkbox-wrapper.component';
     }
   ],
   host               : {
-    '(click)'                     : 'hostClick($event)'
+    '(click)': 'hostClick($event)'
   }
 })
 export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChanges, AfterViewInit, OnDestroy {
@@ -57,8 +57,12 @@ export class NzCheckboxComponent implements OnInit, ControlValueAccessor, OnChan
   hostClick(e: MouseEvent): void {
     e.preventDefault();
     this.focus();
+    this.innerCheckedChange(!this.nzChecked);
+  }
+
+  innerCheckedChange(checked: boolean): void {
     if (!this.nzDisabled) {
-      this.nzChecked = !this.nzChecked;
+      this.nzChecked = checked;
       this.onChange(this.nzChecked);
       this.nzCheckedChange.emit(this.nzChecked);
       if (this.nzCheckboxWrapperComponent) {
diff --git a/components/checkbox/nz-checkbox.spec.ts b/components/checkbox/nz-checkbox.spec.ts
index 9bf2e450d66..6c00230f8d4 100644
--- a/components/checkbox/nz-checkbox.spec.ts
+++ b/components/checkbox/nz-checkbox.spec.ts
@@ -45,6 +45,20 @@ describe('checkbox', () => {
       expect(checkbox.nativeElement.firstElementChild.classList.contains('ant-checkbox-checked')).toBe(true);
       expect(testComponent.modelChange).toHaveBeenCalledTimes(1);
     });
+    it('should click input a11y correct', () => {
+      fixture.detectChanges();
+      const inputElement = checkbox.nativeElement.querySelector('input');
+      expect(testComponent.checked).toBe(false);
+      expect(inputElement.checked).toBe(false);
+      expect(checkbox.nativeElement.firstElementChild.classList.contains('ant-checkbox-checked')).toBe(false);
+      expect(testComponent.modelChange).toHaveBeenCalledTimes(0);
+      inputElement.click();
+      fixture.detectChanges();
+      expect(testComponent.checked).toBe(true);
+      expect(checkbox.nativeElement.firstElementChild.classList.contains('ant-checkbox-checked')).toBe(true);
+      expect(inputElement.checked).toBe(true);
+      expect(testComponent.modelChange).toHaveBeenCalledTimes(1);
+    });
     it('should ngModel change', fakeAsync(() => {
       testComponent.checked = true;
       fixture.detectChanges();