Instructions For Both Widgets:
- Use the tab key or mouse to move focus to the tree.
- use the up and down arrow keys to navigate between tree items.
- Use the left and right arrow keys to expand or collapse a branch.
- Multiple selection can be achieved in the following ways:
- Clicking on a tree item label, or moving to it using the arrow keys, will destroy the current selection and select the newly focused tree item.
- Clicking on the visual checkboxes next of a tree item label will add or remove the tree item to the current selection (for mouse users only).
- Holding down the Ctrl key when navigating the tree with the arrow keys will keep the current selection in tact, and will only move focus. To add or remove a tree item to the current selection, hold down the Ctrl key and press the Space bar. Similarly, holding down Ctrl when clicking on a tree item label will achieve the same for mouse users.
- Holding down the Shift key when using arrow key navigation will create a contiguous selection. Similarly, mouse users can hold down the shift key when clicking on a tree item label.
- Roles: tree, treeitem, group
- States / properties : aria-expanded, aria-selected, aria-hidden, aria-multiselectable
- In Internet Explorer using Ctrl or Shift in combination with mouse clicks will incorrectly select the the text of the tree besides selecting the actual treeitems.
- For Mac based browsers, Ctrl + Click and Ctrl + Space will trigger a context menu
- Opera support very buggy