Note: This is a follow up to the File Explorer question, you should complete that question first before attempting this question.

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may be expanded or collapsed to show or hide the children. For example, in a file system navigator that uses a tree view to display folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.

Source: Tree View Pattern

In File Explorer, we built a functional file explorer component that displays an array of file objects in a hierarchical tree format. However, building good UI components goes beyond functionality and we have to ensure our components have great accessibility as well by adding the right ARIA roles, states, and properties to the DOM elements.

Requirements

The ARIA Authoring Practices Guide has a long list of guidelines for the ARIA roles, states, and properties to add to the various elements of a Tree View pattern.

Implement the following ARIA guidelines for this question:

• All tree nodes are contained in or owned by an element with role tree.
• The element with role tree has either a visible label referenced by aria-labelledby or a value specified for aria-label.
• Each element serving as a tree node has role treeitem.
• Each parent node contains or owns an element with role group.
• Each child node is contained in or owned by an element with role group that is contained in or owned by the node that serves as the parent of that child.
• Each element with role treeitem that serves as a parent node has aria-expanded set to false when the node is in a closed state and set to true when the node is in an open state. End nodes do not have the aria-expanded attribute because, if they were to have it, they would be incorrectly described to assistive technologies as parent nodes.
• Each treeitem element has a aria-level, aria-setsize, and aria-posinset specified.

Notes

The skeleton code uses the solution of File Explorer, but you are free to use your own solution as a starting point.

Solution

We'll build on top of File Explorer's solution.

FileExplorer component