Navigation Treeview Example Using Computed Properties

Code is complete for this example.
Feedback and progress on editorial work on this page are being tracked in
issue 225.

The below example demonstrates how the
Treeview Design Pattern
can be used to build a navigation tree for a set of hierarchically organized web pages.
In this example, the user can browse a set of pages about foods that is organized into categories.
Activating an item in the tree will open a page about the chosen food.

Since a tree item is the only kind of interactive element that can be contained in a tree, links to web pages in a navigation tree have the treeitem role.

This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level.
The ARIA 1.0 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
Navigation Treeview using declared properties.

Accessibility Features

To make the focus indicator easier to see, nodes in the tree have a 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 parrent 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 Design Pattern.