Split off from PR review feedback on #42.
In commit mode, each tree row in TreeItem (src/App.tsx, around line 6194) renders a .tree-row-line div that wraps two siblings: a checkbox <input> and a <button role="treeitem">. The containing list carries role="tree", so per the ARIA tree pattern, interactive content that belongs to a row should sit inside that row's role="treeitem" element. Here the checkbox sits outside it, as a sibling rather than a descendant.
That matters for anyone navigating the tree with a screen reader: the checkbox isn't announced as part of the row it visually belongs to, and depending on the assistive tech, arrowing through the tree may skip the checkbox entirely or announce it as an unrelated standalone control between rows rather than "row X, checkbox, selected/not selected."
Reviewer comment (copilot-pull-request-reviewer) that raised this:
In commit/selection mode the checkbox is rendered as a sibling of the element with role="treeitem" (the button). Since the surrounding container uses role="tree", this introduces interactive descendants (checkboxes) that are not contained within the owning treeitem, which can confuse assistive tech navigation/announcement for the tree.
This is deferred out of PR #42 rather than fixed inline because the correct fix touches the row's focus/ARIA architecture: for example, moving role="treeitem" and its aria-expanded/aria-level/aria-selected attributes from the button up to the wrapping div so the checkbox becomes a genuine descendant, or restructuring how the row handles focus and clicks. Either of those needs to be validated with a real screen reader (VoiceOver) to confirm it actually improves announcement and keyboard navigation, rather than just swapping one kind of ambiguity for another. That verification couldn't happen inside the PR's review loop, so it's tracked here instead of shipped as an untested guess.
Source: PR #42, src/App.tsx around line 6194-6215.
Split off from PR review feedback on #42.
In commit mode, each tree row in
TreeItem(src/App.tsx, around line 6194) renders a.tree-row-linediv that wraps two siblings: a checkbox<input>and a<button role="treeitem">. The containing list carriesrole="tree", so per the ARIA tree pattern, interactive content that belongs to a row should sit inside that row'srole="treeitem"element. Here the checkbox sits outside it, as a sibling rather than a descendant.That matters for anyone navigating the tree with a screen reader: the checkbox isn't announced as part of the row it visually belongs to, and depending on the assistive tech, arrowing through the tree may skip the checkbox entirely or announce it as an unrelated standalone control between rows rather than "row X, checkbox, selected/not selected."
Reviewer comment (copilot-pull-request-reviewer) that raised this:
This is deferred out of PR #42 rather than fixed inline because the correct fix touches the row's focus/ARIA architecture: for example, moving
role="treeitem"and itsaria-expanded/aria-level/aria-selectedattributes from the button up to the wrapping div so the checkbox becomes a genuine descendant, or restructuring how the row handles focus and clicks. Either of those needs to be validated with a real screen reader (VoiceOver) to confirm it actually improves announcement and keyboard navigation, rather than just swapping one kind of ambiguity for another. That verification couldn't happen inside the PR's review loop, so it's tracked here instead of shipped as an untested guess.Source: PR #42,
src/App.tsxaround line 6194-6215.