Fix : removed parent div from check box element

[Forchapeatl]

Before

After

Resolves #5422

Changes:

Screenshots of the change:

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[Forchapeatl]

@limzykenneth , please for a review.

[limzykenneth]

Hi @Forchapeatl, we are currently tied up on some other work related to the 2.0 version of p5.js but we'll review this in a couple week's time. Thanks!

[limzykenneth]

Sorry for taking so long to get to this and thanks for the PR.

I think this does solve the original problem presented in the issue nicely although I'm thinking whether there should be a larger review of other DOM elements. Specifically the use of <label> which in most cases would be beneficial to have, eg. for text input fields.

The other thing is that createCheckbox() currently behaves in the same manner as createRadio() in that they both wrap the created elements in a <div> creating block elements. Should createRadio() also have its surrounding <div> removed for consistency sake? ie. all DOM elements unless inherently being a block element, should have their default display property. createRadio()'s options are also by default inline which may not be what people needed.

@Qianqianye @davepagurek I think there are some potential breaking changes to the overall DOM API that may be needed here that we may do for 2.0 to get things like form input creation more intuitive and accessible with proper use of <label>.

Overall I think this PR is a breaking change as the <div> will never be created so those who were expecting createCheckbox() including with a label to create a block display checkbox will have the behavior differ. I'm still unsure how to resolve this with minimal complexity. 🤔