Repository navigation
fix(markdown): name the checkboxes of a task list - #230
Merged
dgesteves merged 1 commit intoOct 30, 2026
Merged
Conversation
remark-gfm renders `- [x] Read the route` as `<input type="checkbox" disabled checked>`, and
`Markdown` had no `input` component, so the checkbox reached the page with no name. axe reports
that as a critical `label` violation, and a screen reader reads an unnamed checkbox before each
item. Agents write task lists for their plans and to-dos, so an `AgentMessage` with one failed
the axe check the kit's own tests run.
`Markdown` renders the checkbox through `TaskCheckbox`, which names it from the new
`labels.markdown.task` ("Task"); it stays disabled, and its state reads as checked or not. The
Portuguese labels in the tests, the gallery and the labels guide add "Tarefa", and the labels
test renders a task list, so the new key has a state that shows it.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What was wrong
GFM task lists render as disabled checkboxes with no name:
Markdownpassed remark-gfm's<input type="checkbox" disabled>through as it is. The existing streaming test renders- [x] searchbut runs no axe check on it.Before:
axe reports a critical
labelviolation on both checkboxes (<input disabled="" type="checkbox" checked="">), and a screen reader announces a checkbox with no name. Agents write- [x]plans and to-do lists all the time, inAgentMessagetoo.After: each checkbox is named "Task", with its checked state as before. axe finds no violations.
What changed
src/markdown.tsx: aninputcomponent,TaskCheckbox, that names a checkbox fromlabels.markdown.task. Other attributes are as remark-gfm sets them: disabled, and checked or not.src/lib/labels.ts: a new key,markdown.task("Task"). The Portuguese labels (test/labels-pt.ts,examples/playground/lib/labels-pt.tsand the copy incontent/docs/labels.md) add "Tarefa".test/labels-locale.test.tsx: the Markdown scenario renders a task list, so the new label has a state that shows it, and no English is left in it.content/components/markdown.mdsays how task lists read.SignoffLabelsneedsmarkdown.taskto type-check, and one passed asSignoffLabelsInputkeeps the English (as in fix(approval-card, diff-review): accessibility and touch: Approve all's focus, what a card runs, code left to right, 16px fields #174).How it was tested
New tests in
test/markdown.test.tsxfail on main and pass here:names the checkboxes of a task list, which read with their state: two checkboxes named "Task", the first checked, both disabled, no axe violations.takes the task name from the labels:labels={{ markdown: { task: 'Tarefa' } }}names it "Tarefa".Checks, all exit 0:
pnpm build:lib,pnpm format:check,pnpm lint,pnpm lint:registry,pnpm registry:check,pnpm typecheck,pnpm test(1601 passed),pnpm size(AgentMessagestays 91.7 kB;/custom-markdownunchanged),pnpm test:site,pnpm examples:check.For the owner to decide
aria-labelledbyand ids per item, which aren't stable while the text streams.