HTML checkboxes are not checked/unchecked when checkboxes are clicked

[oestrogen]

Reproduction link

https://ng-zorro-checkboxes.stackblitz.io

Steps to reproduce

• Click on a checkbox (the actual checkbox, not the label or the space between the checkbox and the label)
• Or: Tab to a checkbox with the keyboard and press space to toggle it.

What is expected?

• The checkbox changes state

What is actually happening?

• The nz-checkbox changes state, but the HTML checkbox remains unchanged, which becomes apparent if you use a screen reader. It will read a checked nz-checkbox as "Checkbox, not checked"

Environment	Info
ng-zorro-antd	7.0.0
Browser	Chrome , Edge

---

So, this only happens when the actual HTML checkbox (hidden with opacity:0, on top of the nz-checkbox) is clicked (or keyboard triggered).
Clicking the label or the space between the label and the checkbox do work as expected.

Problem shown with partly transparent HTML checkbox:

This is not how antd works. See antd demo: https://14wkrozj1q.codesandbox.io/

This makes the NG-Zorro checkboxes useless for our blind users.

This can easily be tested with the screen reader ChromeVox, a free Chrome extension.

[wzhudev]

@vthinkxie When you click the box itself instead of the label, the tick is still there.

[oestrogen]

@wendzhue Yes, the opacity is to show when the nz-checkbox changes state and when the HTML checkbox changes state.

Clicking on the label changes the state of both the nz-checkbox and the HTML checkbox. This is correct.
Clicking on the checkbox (regardless of opacity) changes only the nz-checkbox, not the HTML checkbox. This is wrong.

[oestrogen]

This is no problem for sighted users, but for blind users and others using a screen reader it breaks the checkboxes. Antd do not have this problem.