JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Accessibility Tree DOM / Accessibility tree comparison</h1>
<p>The following are non-functional ARIA tree controls, purely for the purpose of comparing accessibility mappings.</p>

<h2>Broken tree structure</h2>
<ul role="tree">
  <div class="item-wrapper">
    <li role="treeitem">
      Item 1
      <div role="group">
        <ul class="sub-items">
         <li role="treeitem">Sub-Item 1</li>
         <li role="treeitem">Sub-Item 2</li>
        </ul>
      </div>
    </li>
    <li role="treeitem">Item 2</li>
    <li role="treeitem">Item 3</li>
  </div>
</ul>

<h2>Clean tree structure</h2>
<ul role="tree">
  <div class="item-wrapper" role="presentation">
    <li role="treeitem">
      Item 1
      <div role="group">
        <ul class="sub-items" role="presentation">
         <li role="treeitem">Sub-Item 1</li>
         <li role="treeitem">Sub-Item 2</li>
        </ul>
      </div>
    </li>
    <li role="treeitem">Item 2</li>
    <li role="treeitem">Item 3</li>
  </div>
</ul>