fix(module:checkbox): fix checkbox a11y error (NG-ZORRO#3009)

close NG-ZORRO#3000
hsuanxyz · Mar 1, 2019 · b11ec37 · b11ec37
1 parent 174e7c1
commit b11ec37
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git 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>
diff --git 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
@@ -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();