feat: add accessible label wrapping for GFM task list checkboxes

[Copilot]

GFM task list checkboxes lack proper label association, causing accessibility issues flagged by Lighthouse and screen readers.

Changes

• React: Added GfmTaskListItem component using React.useId (18+) with counter fallback for unique IDs
• HTML: Added counter-based ID generation with <label for="..."> wrapping
• SolidJS/Vue: Same pattern with global counters
• Tests: Updated snapshots and added accessibility verification tests

Output

Before:

<li><input type="checkbox"/> Task text</li>

After:

<li><input id="task-1" type="checkbox"/><label for="task-1"> Task text</label></li>

Notes

• HTML adapter uses disabled per GFM spec; React/Solid/Vue use readOnly for better form handling
• Global counters ensure unique IDs within a JS context; _resetGfmTaskIdCounter() exposed for testing

Original prompt

---

This section details on the original issue you should resolve

<issue_title>GFM checkboxes need a small adjustment to make them semantically correct</issue_title>
<issue_description>### 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.</issue_description>

Comments on the Issue (you are @copilot in this section)

@quantizor Good idea

• Fixes GFM checkboxes need a small adjustment to make them semantically correct #369

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

🦋 Changeset detected

Latest commit: 13f0a88

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
markdown-to-jsx	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR