GFM checkboxes need a small adjustment to make them semantically correct

[TheThirdRace]

Description of the bug

When using markdown for making a tasks list, the checkboxes labels aren't parsed as labels but text nodes.

This is semantically incorrect, the text for each checkbox should be a <label> with the appropriate for and id. Not only it allows screen readers to announce what the checkbox actually means, but it also allows you to click on the label to select the checkbox (even if in this case it's not an option we want to give the user given the markdown conversion).

This bug is reported by Google Lighthouse (dev tools) when running accessibility assessment. It's also reported in other reputed accessibility tools.

Markdown used

Here are checkboxes

- [x] Checkbox on
- [ ] Checkbox off

Current HTML output

<ul>
    <li>
        <input type="checkbox" readonly="" checked="">
            Checkbox on
    </li>
    <li>
        <input type="checkbox" readonly="">
            Checkbox off
    </li>
</ul>

As you can see, it's rendering the checkbox text as a DOM Text Node instead of a <label>.

HTML ouput expected

<ul>
    <li>
        <input type="checkbox" readonly="" checked="" id="random-id-1">
        <label for="random-id-1">Checkbox on</label>
    </li>
    <li>
        <input type="checkbox" readonly="" id="random-id-2">
        <label for="random-id-2">Checkbox off</label>
    </li>
</ul>

Possible improvement

Given the <label> is directly linked to the checkbox, the default rendering for this <label> should probably done in the checkbox rendering function.

Not only does it makes it easier to link the id and the for attributes together, but it would also allow an easier time for users when they use component overrides.

Simply passing the text as a prop to the checkbox override would be sufficient. Semantically speaking, there shouldn't be any HTML element within the <label> from the markdown conversion, making it a simple string.