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.
This 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 relies on the browser to
compute values for aria-setsize
, aria-posinset
and arial-level
.
The ARIA 1.0 Spectification for these properties states the browser can compute these values,
but is not required to.
Similar examples include:
- File Directory Treeview using computed properties
- File Directory Treeview using declared properties
- Navigation Treeview using declared properties
Example
Foods
- Fruits
- Vegetables
-
Grains
- Cereal Grains
- Pseudocereal Grains
- 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 thespan
element that is used as the visible label for thetreeitem
. - This example relies on the browser to computer values for
aria-setsize
,aria-posinset
andarial-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 |
|
Down arrow |
|
Left Arrow |
|
Right Arrow |
|
Return |
|
Space |
|
Home |
|
End |
|
a-z, A-Z |
|
* |
|
ARIA Roles, Properties and States
Role | Attribute | Element | Usage |
---|---|---|---|
tree |
ul |
|
|
aria-label="string" |
ul |
|
|
group |
ul |
|
|
treeitem |
li , a |
|
|
tabindex="-1" |
li , a |
|
|
tabindex="0" |
li , a |
|
|
aria-expanded="false" |
li |
|
|
aria-expanded="true" |
li |
|
|
aria-setsize="number" |
li , a |
|
|
aria-posinset="number" |
li , a |
|
|
aria-level="number" |
li , a |
|
|
none
|
li
|
|
Javascript and CSS Source Code
- CSS: treeLinks.css
- Javascript: treeLinks.js
- Javascript: treeitemLinks.js
- Javascript: treeitemClick.js