Tree item role placed on the wrong element in the hierarchy tree (WCAG 4.1.2)

[tinskuu]

Problem description

role="treeitem", aria-expanded, aria-selected, and tabindex are placed on the <a> link nested inside the <li>. The <li> itself has no role. As a result, Chrome doesn't compute the <li> as part of the tree structure — it falls back to a generic node — and the <ul role="group"> (the group of child nodes) ends up outside the treeitem's subtree, despite its DOM nesting. Screen readers therefore have no way of knowing which tree level and node the expanded state actually belongs to.

Testing instructions

• Open the page in Chrome, using NVDA.
• Navigate to the hierarchy tree and move between nodes with the arrow keys.
• Expected: NVDA announces something like "oliot, expanded, tree item, level 1, 1 of 12."
• Current incorrect result: NVDA reads the rows as plain links, with no announcement of level, expanded state, or tree context.
• You can confirm the root cause in Chrome DevTools' Accessibility panel: check that the node's computed role is treeitem (not link or generic) and that the child group appears as its descendant.

Severity

Critical
Screen reader users cannot use the tree as intended at all; the tree's structure and navigation are not conveyed to NVDA in any usable way.

Fix instructions

Move the role, states, and focus handling from <a> to <li>. No need to move the role="group" list since it's already a child of <li>.

Original issue: #1982

Also this issue is related to this and still exists: #1981