Widget: Tree

Details

Implementing This Widget

Implementing the Tree widget is done when you want to have an accessible way to navigate hierarchical lists (for example, a file directory navigator). This includes providing visual distinction between focused and selected items (nodes) that may be either expanded or collapsed in the tree that is also communicated by non-visual means. Navigation and selection must be possible with both keyboard and mouse operations.

To implement the Tree widget:

The `createTree` function takes three arguments. The first is the ID of an element in your DOM which will host the tree. The second is config object. The third is your data. Refer to the following usage descriptions and notes for each:

• Config Object: This is an object with one optional key: selectStyle. If you leave this key out, there is no select style and navigating the tree will merely focus nodes, never setting aria-selected anywhere. If you pass in the string "single" then the tree will allow a single selected item. As you navigate the tree, the item will generally change with focus (unless you are holding CTRL, in which case focus can change without changing selection). Finally, if you pass in the string "multi", your tree will support multiple selection. Hold SHIFT while navigating to select multiple nodes. Holding CTRL will again prevent selection change.
• Data Array: An array of objects in which each should have two keys: "label" and "children". The label is a string of text, and children is an array of objects of the same structure. children is optional - any node without it will simply be a terminal node of the tree. Additionally, you can type a letter to advance to the next visible node whose label starts with that letter.

  [{
    label: 'top level tree item #1',
    children: [{
      label: 'child'
    }]
  }, {
    label: 'top level tree item #2',
    children: [{
      label: 'other child'
    }]
  }]

Expected Operation and Accessibility Features

To navigate the tree, press 'right' to expand a currently closed node, or to go to the first child of an open node. Press 'left' to close a currently open node, or to go a closed node's parent. Press 'up' to go to the previous visible node, press 'down' to go to the next visible node.

Additionally, you can type a letter to advance to the next visible node whose label starts with that letter.

Pressing 'home' will take you to the root node, pressing 'end' will take you to the last visible node.

Holding shift while navigating will select all nodes between the starting node and the one you end up on.

Validation and Developer Notes

order to validate this control, you must manually test according to the unique configuration options chosen. Generally, it must be possible to “tab in” to the top-level node of the tree on first load, and only one node is in the tab order of the page at any given time. Navigating forward and backward to focus and select nodes, and then expanding or collapsing nodes must be possible with arrow keys. Depending on the configuration options chosen, additional keyboard shortcuts must also be verified.

Example Implementation Reference

To view an implementation of this widget, see Tree widget example.