File Directory Treeview Example Using Declared 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.

The code in this example explicitly declares values for aria-setsize, aria-posinset and aria-level, which overrides browser computation of values for these properties. The ARIA specification for these properties states that browsers can, but are not required to, compute these values.

Similar examples include:

• File Directory Treeview using computed 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 Tree View 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, read the guidance section about 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.

| | | aria-setsize="number" | li | Defines the number of treeitem elements in the set of treeitem elements that are in the same branch and at the same level within the hierarchy. | | | aria-posinset="number" | li |

• Defines the position of the element within the set of other treeitem elements that are in the same branch and at the same level within the hierarchy.
• Counting is one-based, not zero-based.

| | | aria-level="number" | li |

• Defines the level of the treeitem in the hierarchical tree structure.
• Counting is one-based.
• Root treeitem elements have aria-level="1".

| | 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 if those properties are not specified explicitly in the code.
• 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.