ARIA Tree From XML Module Demo

The ARIA Tree From XML Module dynamically generates an ARIA Tree control from an external XML file.
Module files:

1. aria_tree_module.js : Automatically generates an ARIA tree using an XML file to populate folder values.
2. google.js : Automatically registers an AccDC Object for Google Map rendering.
3. tree.xml : Where all values are declared.

The packaged file for this demo can be downloaded from WhatSock.com under Downloads.

Instructions:

• Using the mouse, click once to set focus on a tree item; click again to expand/collapse the selected subfolder.
• Using a screen reader, press Tab or Arrow to the TreeView control and press Enter to activate.
• Use the arrow keys to traverse and expand/collapse selected items and folders.
• Press Home or End to jump to the first or last item in the tree.

ARIA Tree functionality simulates the software browsing functionality of the Windows Explorer TreeView control.

After the DOM finishes loading, a top level AccDC Object is opened, which queries the XML file and builds the initial list markup for the top level folder of the tree.

When a subfolder is expanded, a new AccDC Object is created to contain all child folder nodes, and then opened as a child of the parent AccDC Object.

The XML node "id" attribute is used to bind each folder item with the associated AccDC Object, and each expanded subfolder object is set as the child of the parent AccDC Object.
The XML "name" attribute is used to render link text for each folder item.

The "handlers" object can be used to assign event handlers with any binding type, so that custom handlers can be added to all tree items, or to individual tree items using their "id" attribute.
E.G.
var handlers = {
bind: 'click',
'id': function(ev, dc){
// Do something
ev.preventDefault();
}
};
The "treeTitle" variable specifies a hidden label for the tree for screen reader users.

For this demo, the "handlers" object is used to query the Google Map AccDC Object with new coordinates pulled from the selected XML node.
The Google Map AccDC Object is registered during setup, and then interfaced with at runtime.

<?xml version="1.0" encoding="UTF-8" ?>
<tree>
<folder id="uniqueID1" name="Folder Name">
<subfolder id="uniqueID2" name="Subfolder Name">
<item id="uniqueID3" name="Item Name"></item>
</subfolder>
<item id="uniqueID4" name="Item Name"></item>
</folder>
</tree>