ARIA Tree Control Demo

• One
  • One.one
    • One.one.one
    • One.one.two
    • One.one.three
  • One.two
    • One.two.one
    • One.two.two
    • One.two.three
• Two
  • Two.one
    • Two.one.one
    • Two.one.two
    • Two.one.three
• Three
  • Three.one supplemental info
    • Three.one.one
    • Three.one.two
    • Three.one.three

The markup for the tree is:

<ul class="tree">
  <li><span>One</span>
    <ul>
    <li><span>One.one</span>
      <ul>
        <li><span>One.one.one</span></li>
        <li><span>One.one.two</span></li>
        <li><span>One.one.three</span></li>
      </ul>
    </li>
    <li><span>One.two</span>
      <ul>
        <li><span>One.two.one</span></li>
        <li><span>One.two.two</span></li>
        <li><span>One.two.three</span></li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="expanded"><span>Two</span>
    <ul>
    <li><span>Two.one</span>
      <ul>
        <li><span>Two.one.one</span></li>
        <li><span>Two.one.two</span></li>
        <li><span>Two.one.three</span></li>
      </ul>
    </li>
    </ul>
  </li>
  <li><span>Three</span>
    <ul>
    <li><span>Three.one</span>
      <span class="supplemental">supplemental info</span>
      <ul>
        <li><span>Three.one.one</span></li>
        <li><span>Three.one.two</span></li>
        <li><span>Three.one.three</span></li>
      </ul>
    </li>
    </ul>
  </li>
</ul>

If the browser has disabled scripting, users sees all items.

You also need to include the following in the head:

<link href="tree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tree.js"></script>

Implemented features

• Initially all items are collapsed unless they have class "expanded".
• Tab/Shift Tab focus in and out of the control.
• Active node highlighted via CSS
• Up/down arrows for moving up/down visible nodes
• Left/right arrows for expanding/collapsing active node
• Enter toggles expand/collapse on active node

The node labels (span elements) could be combined with icons to indicate resource types. Supplemental information could be placed in a second span element before the UL element for nested nodes.

Unimplemented features

• Drag node to new location
• Shift up/down arrow to move node
• Mark node to be deleted, or delete directly
• Insert new node
• Rename node