Tree

The javascript Tree is designed to allow you to create an interactive tree that is accessible, intuitively usable, and consistent with the rest of Moodle's hierarchical interfaces. It is currently used in the Navigation block and Settings block.

The tree is originally based off the tree view example by the Open Ajax Alliance Accessibility Group. and is designed to comply as much as possible with the ARIA specification for accessible trees. For detailed additional information you can read those links.

Using the Tree module

To create an aria accessible tree, you must instantiate a child AMD module of the core/tree using Require JS.

define(['jquery', 'core/tree'], function($, Tree) {
    return {
        init: function() {
        new Tree("css/jquery selector of the tree container");
    }
    };
});

To define a node in your structure, add the "treeitem" role. If the node has children, it must have a child html element with the role "group" to contain it's children.

<div role="treeitem">This is an item which has children
    <div role="group">
        <div role="treeitem">A child</div>
        <div role="treeitem">Another child</div>
    </div>
</div>

In the CSS for your page or module, you will need to target the aria-expanded attribute of group items to hide and show them as tree.js does not assume knowledge of how you want expanding and collapsing to work. For most cases, this will be sufficient:

[role="group"] {
    display: none;
}
[role="group"][aria-expanded="true"] {
    display: inline-block;
}

Tree.js will handle the accessible controls for navigating the tree as well as expanding and collapsing nodes. The controls are as follows:

• Up: Select the previous visible tree item.
• Down: Select next visible tree item.
• Left: Collapse the currently selected parent node if it is expanded. Move to the previous parent node (if possible) when the current parent node is collapsed.
• Right: Expand the currently selected parent node and move to the first child list item.
• Enter: Toggle the expanded or collapsed state of the selected parent node. If it is a link, follow the link
• Home: Select the root parent node of the tree.
• End: Select the last visible node of the tree.
• Tab: Navigate away from tree.
• Space: Expand and collapse node
• * (asterisk on the numpad): Expand all group nodes.
• Clicking on a parent node will toggle its expanded or collapsed state.

Code

• Code location: lib/amd/src/tree.js
• Examples:
  • blocks/navigation/amd/src/navblock.js
  • blocks/settings/amd/src/settingsblock.js