[Checkbox] Bug fixes 🔥

[jjenzz]

Cleans this up a bit to use the same BubbleInput approach that Slider uses and fixes a bunch of bugs in the process.

• Fixes [Checkbox] onClick stopPropagation() not working inside Checkbox #667
• Fixes [Checkbox] Inconsistent behavior with plain label #512
• Removes additional tab stop on checkbox that was a regression from [Checkbox][Switch][RadioGroup] Fix native form validation #650
• Improves accessibility when wrapped in a native label 🎉
• Updates onCheckedChange(event) to onCheckedChange(checked: CheckedState) (this follows the shape of all our other handlers, e.g. onOpenChange) 🔥

CleanShot.2021-05-28.at.18.11.13.mp4

Accessibility

Screen.Recording.2021-05-31.at.13.06.14.mov

Interesting that our custom checkbox with custom label also improves cursor position accuracy in VoiceOver.

[benoitgrelard]

There seems to be some issues with this.

If I have:

<div onClick={() => alert('click bubble')}>
      <Checkbox className={rootClass}>
        <CheckboxIndicator className={indicatorClass} />
      </Checkbox>
    </div>

It happens straight on page load, and then also it doesn't seem to have resolved the double event that we see in #667

[jjenzz]

@benoitgrelard This should be ready for a review now 🙏