Task list checkboxes lack an accessible name

[patrickhlauke]

Select Topic Area

Bug

Body

Once rendered as HTML, task list checkboxes currently lack an accessible name. Screen readers will just announce them as unlabelled checkboxes.

Current markup of a rendered task list checkbox, simplified:

<li class="…" data-title="Zipped and saved (PL)" data-position="…" draggable="false">
    <span class="handle">
        <svg class="…" aria-hidden="true" width="16" height="16">…</svg>
    </span>
    <input type="checkbox" id="" class="…"> Zipped and saved (PL)
    <button class=…" aria-label="Convert to issue" type="button" aria-describedby="button-description-3-4">
         …
    </button>
    <span hidden="" class="js-clear" id="button-description-3-4">…</span>
</li>

The simples, least disruptive fix to this would be to wrap the <input> and its label in an implicit <label>

…
<label><input type="checkbox" id="" class="…"> Zipped and saved (PL)</label>
…

[patrickhlauke]

Noting here that this is still an issue.

Video recording using Chrome/NVDA tabbing through tasklist checkboxes - note the lack of announcement for the label

github-tasklist.mp4

Current markup (same as before)

<input type="checkbox" id="" class="task-list-item-checkbox">
item one
<button class="…" aria-label="Convert to issue" type="button" aria-describedby="…">…</button>

[cehfisher]

Hello @patrickhlauke - thank you for providing this feedback and confirming it is still an issue. We will file this with our Accessibility team so that it can be reviewed and will follow-up here with any additional questions or updates. Thanks again!