Navigation Treeview Example Using Declared Properties

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

his example implements the features of the Treeview Design Pattern for navigating and selecting a link in a large set of hierarchically organized links. It is important in this example that the role=treeitem overrides the default role of link for the a elements, since a treeitem widget cannot contain any interactive elements (e.g. a link). This example also explicitly sets the values for aria-setsize, aria-posinset and arial-level, which override any browser compuuted values.

Similar examples include:

Example

Foods

Fruits
- Oranges
- Pineapple
- Apples
- Bananas
- Pears
  - Anjou
  - Bartlett
  - Bosc
  - Concorde
  - Seckel
  - Starkrimson
Vegetables
- Podded Vegetables
  - Lentil
  - Pea
  - Peanut
- Bulb and Stem Vegetables
  - Asparagus
  - Celery
  - Leek
  - Onion
- Root and Tuberous Vegetables
  - Carrot
  - Ginger
  - Parsnip
  - Potato
Grains
- Cereal Grains
  - Barley
  - Oats
  - Rice
- Pseudocereal Grains
  - Amaranth
  - Bucketwheat
  - Chia
  - Quinoa
- Oilseeds

Accessibility Features

Need to use CSS focus and hover classes to create focus and hover styling of the visible label for expandable treeitem widgets. This requires using focus/blur and mouseover/mouseout events to apply classes to the span element that is used as the visible label for the treeitem.
This example relies on the browser to computer values for aria-setsize, aria-posinset and arial-level.
The expandable treeitem widgets cannot behave as links, their only action can be to open and close a leaf in the tree.

Keyboard Support

Key	Function
`Up arrow`	Moves focus to previous visible sibling `treeitem` using a depth first algorithm on the visible `treeitems`. If on first `treeitem`, focus stays on first `treeitem`.
`Down arrow`	Moves focus to next visible sibling `treeitem` using a depth first algorithm on the visible `treeitems`. If on last `treeitem`, focus stays on the last `treeitem`.
`Left Arrow`	For a `treeitem` that is an end node (e.g. no child `treeitem`s) or is in the collapsed state (e.g. has `[aria-expanded=false]`), focus moves to the parent `treeitem`. If a top level `treeitem` (e.g. parent is `tree`), focus stays on current `treeitem`. For a `treeitem` that is in the expanded state (e.g. has `[aria-expanded=true]`) it toogles to the collapsed state. Focus remains on the current `treeitem`.
`Right Arrow`	For a `treeitem` that is an end node (e.g. no child `treeitem`s) focus stays on current `treeitem`. For a `treeitem` that is in the collapsed state (e.g. has `[aria-expanded=false]`) it toogles to the expanded state and focus moves to the first child `treeitem`. If no child, focus stays on current `treeitem`. For a `treeitem` is in the expanded state, focus moves to the first child `treeitem`. If no child, focus stays on current `treeitem`.
`Return`	Performs the default action (e.g. onclick event) on the current `treeitem`, in this example updating the "File or Folder Selected" textbox.
`Space`	Performs the default action (e.g. onclick event) on the current `treeitem`, in this example updating the "File or Folder Selected" textbox.
`Home`	Moves focus to first `treeitem` in the `tree`.
`End`	Moves focus to last visible `treeitem` (e.g. depth first) in the `tree`.
`a-z, A-Z`	Moves focus to next visible `treeitem` that starts with letter character. Search wraps to first `treeitem` if not found after current `treeitem`.
`*`	Opens all the expandable `treeitem`s in the current leaf (e.g. siblings of the current `treeitem`), keyboard focus does not change.

ARIA Roles, Properties and States

Role	Attribute	Element	Usage
`tree`		`ul`	The `role="tree"` attribute identifies the `ul` element as an ARIA `tree` widget. Accessible name for the `tree` widget comes from `aria-label` attribute. The `tree` widget does not need a `tabindex` value, since the `ul[role"tree"]` element never receives keyboard focus.
	`aria-label="string"`	`ul`	Defines an accessible name (e.g. label) for the `tree` widget. The accessible name is important to identify the purpose of the tree in the page and uniquely identify the `tree` widget from other trees on the same page.
`group`		`ul`	The `role="group"` attribute identifies the `ul` element as a container of `treeitem` widgets for a sub-leaf of a tree. The `group` role is important for the browser to compute `aria-level`, `aria-setsize` and `aria-posinset`. The `group` is not required to have an accessible name. The `group` widget does not need a `tabindex` value, since the `ul[role"group"]` element never receives keyboard focus.
`treeitem`		`li`	The `role="treeitem"` attribute identifies the `li` element as an ARIA `tree` widget. Accessible name for the `treeitem` widget comes from child text content of the `li` element or an `aria-label` attribute.
	`tabindex="-1"`	`li`, `a`	Identifies the `treeitem` as an elememt that can receive keyboard focus, but will not be included in the tab order of the page. `tabindex="-1"` is the default value for a `treeitem` widget.
	`tabindex="0"`	`li`, `a`	Only one `treeitem` in the same `tree` has a `tabindex="0"`. Identifies the `treeitem` that last had keyboard focus. The default `treeitem` with `tabindex="0"` is the first `treeitem` in the `tree`. See roving tabindex for more information.
	`aria-expanded="false"`	`li`	Indicates the `treeitem` descendants of the current `treeitem`s are not visible (e.g. tree sub-leaf is collapsed). The visual state of being collapsed is synchronized with `aria-expanded` value using CSS attribute selector [`aria-expanded="false"]` with the CSS `:before` psuedo selector and the CSS `content` property for displaying an image of the collapsed state.
	`aria-expanded="true"`	`li`	Indicates the `treeitem` descendants of the current `treeitem` widgets are visible e.g. tree sub-leaf is expanded). The visual state of being expanded is synchronized with `aria-expanded` value using CSS attribute selector [`aria-expanded="true"]` with the CSS `:before` psuedo selector and the CSS `content` property for displaying an image of the expanded state.
	`aria-setsize="number"`	`li`, `a`	`aria-setsize` is used to indicate the number of `treeitem`s in the current leaf of the tree. This example explicitly sets the `aria-setsize`, for each `treeitem`. Explicitly setting `aria-setsize` will override any computed values by the browser.
	`aria-posinset="number"`	`li`, `a`	`aria-posinset` is used to indicate the position of `treeitem`s in the current leaf of the tree. This example explicitly sets the `aria-posinset`, for each `treeitem`. Explicitly setting `aria-posinset` will override any computed values by the browser.
	`aria-level="number"`	`li`, `a`	`aria-level` is used to indicate the depth of `treeitem`s in the tree structure. This example explicitly sets the `aria-level`, for each `treeitem`. Explicitly setting `aria-level` will override any computed values by the browser.
`none`		`li`	Hides `li` element native role semantics of `listiem` from assistive technologies. If native role semantics of the `li` element are not removed, it could confuse some users of assistive technologies since listitems and treeitems would be interspersed with each other.

Javascript and CSS Source Code

CSS: treeLinks.css
Javascript: treeLinks.js
Javascript: treeitemLinks.js
Javascript: treeitemClick.js