File Directory Treeview Example Using Computed Properties

About This Example

The following example implementation of the Tree View Pattern simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer. In the My Documents tree, each parent node represents a folder and each end node represents a file. Activating a node selects the node and puts the name of the folder or file in the read-only edit field that represents the file viewer.

This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. The ARIA specification for these properties states that browsers can, but are not required to, compute their values. So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a File Directory Treeview using declared properties.

Similar examples include:

• File Directory Treeview using declared properties
• Navigation Treeview Example

Example

My Documents

• Projects

  • project-1.docx

  • project-2.docx

  • Project 3

    • project-3A.docx
    • project-3B.docx
    • project-3C.docx

  • project-4.docx

  • Project 5

    • project-5A.docx
    • project-5B.docx
    • project-5C.docx
    • project-5D.docx
    • project-5E.docx
    • project-5F.docx

• Reports

  • report-1

    • report-1A.docx
    • report-1B.docx
    • report-1C.docx

  • report-2

    • report-2A.docx
    • report-2B.docx
    • report-2C.docx
    • report-2D.docx

  • report-3

    • report-3A.docx
    • report-3B.docx
    • report-3C.docx
    • report-3D.docx

• Letters

  • letter-1

    • letter-1A.docx
    • letter-1B.docx
    • letter-1C.docx

  • letter-2

    • letter-2A.docx
    • letter-2B.docx
    • letter-2C.docx
    • letter-2D.docx

  • letter-3

    • letter-3A.docx
    • letter-3B.docx
    • letter-3C.docx
    • letter-3D.docx

File or Folder Selected:

Accessibility Features

To make the focus indicator easier to see, nodes in the tree have custom focus and hover styling created using CSS focus and hover pseudo-classes.

Terms Used to Describe Trees

A tree item that can be expanded to reveal child items is called a parent node. It is a closed node when the children are hidden and an open node when it is expanded. An end node does not have any children. For a complete list of terms and definitions, see the Treeview Pattern.

Keyboard Support

Note that in this example, selection and focus are distinct; moving focus does not change which node is selected. Because selection does not follow focus, keyboard and screen reader users can navigate and explore the tree without changing the content of the file viewer. To learn more about this aspect of the design, see Deciding When to Make Selection Automatically Follow Focus.

• Moves focus to the next node that is focusable without opening or closing a node.
• If focus is on the last node, does nothing.

| | Up arrow |

• Moves focus to the previous node that is focusable without opening or closing a node.
• If focus is on the first node, does nothing.

| | Right Arrow |

• When focus is on a closed node, opens the node; focus does not move.
• When focus is on a open node, moves focus to the first child node.
• When focus is on an end node, does nothing.

| | Left Arrow |

• When focus is on an open node, closes the node.
• When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
• When focus is on a root node that is also either an end node or a closed node, does nothing.

| | Home | Moves focus to first node without opening or closing a node. | | End | Moves focus to the last node that can be focused without expanding any nodes that are closed. | | a-z, A-Z |

• Focus moves to the next node with a name that starts with the typed character.
• Search wraps to first node if a matching name is not found among the nodes that follow the focused node.
• Search ignores nodes that are descendants of closed nodes.

| | * (asterisk) |

• Expands all closed sibling nodes that are at the same level as the focused node.
• Focus does not move.

|

Role, Property, State, and Tabindex Attributes

• Identifies the ul element as a tree widget.
• The tree element is not focusable because it implements the practice described in Managing Focus Within Components Using a Roving tabindex.

| | | aria-labelledby="ID_REFERENCE" | ul | Refers to the heading element that contains the label that identifies the purpose of the tree. | | treeitem | | li | Identifies the element as a treeitem. | | | tabindex="-1" | li |

• Makes the treeitem element focusable without including it in the tab sequence of the page.
• All treeitem elements are focusable, but only one is included in the tab sequence.

| | | tabindex="0" | li |

• Includes the treeitem element in the tab sequence.
• Only one treeitem in the tree has tabindex="0".
• In this implementation, the first treeitem in the tree is included in the tab sequence when the page loads.
• When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in Managing Focus Within Components Using a Roving tabindex.

| | | aria-expanded="false" | li |

• Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
• Indicates the parent node is closed, i.e., the descendant elements are not visible.
• The visual indication of the collapsed state is synchronized by a CSS attribute selector.

| | | aria-expanded="true" | li |

• Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
• Indicates the parent node is open, i.e., the descendant elements are visible.
• The visual indication of the expanded state is synchronized by a CSS attribute selector.

| | | aria-selected="false" | li |

• Applied to treeitem elements.
• Indicates the file or folder for the item is not currently selected.

| | | aria-selected="true" | li |

• Applied to treeitem elements.
• Indicates the file or folder for the item is currently selected.

| | group | | ul |

• Identifies the ul element as a container of treeitem elements that form a branch of the tree.
• The group is contained in the element that serves as the parent treeitem.
• Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch.
• The grouping also prevents browsers from including the content of the nodes in the group in the accessible name for the parent node.

|

JavaScript and CSS Source Code

• CSS: tree.css
• JavaScript: tree.js
• JavaScript: treeitem.js
• JavaScript: treeitemClick.js

HTML Source Code

To copy the following HTML code, please open it in CodePen.