Tree does not follow the expected ARIA structure

[jelbourn]

Reference https://www.w3.org/TR/wai-aria-practices-1.1/#tree_roles_states_props

First of all, our entire concept of a flat tree isn't super compatible with the expected ARIA structure for trees. Each treeitem element is supposed to either contain or aria-own a role="group" element that contains all of its child nodes. To keep the notion of the flat-tree alive, we've have to use aria-owns in a way that looks something like this:

<div role="tree">
  <div role="treeitem" aria-owns="greek-children">Greek</div>
  <div role="group" id="greek-children">
    <div role="treeitem">Alpha</div>
    <div role="treeitem">Beta</div>
    <div role="treeitem">Gamma</div>
  </div>
</div>

Which means that it would be the responsibility of the tree to figure out where to insert these role="group" elements, which I'm not totally sure is possible.

The nested tree is easier to reconcile, since we actually do nest the nodes; the main problem is that we're missing the role="group" element for nodes that have children. The desired structure would look something like

<div role="tree">
  <div role="treeitem">
    Greek
    <div role="group">
      <div role="treeitem">Alpha</div>
      <div role="treeitem">Beta</div>
      <div role="treeitem">Gamma</div>
    </div>
  </div>
</div>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}