File Directory 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 223.
This example implements the features of the Treeview Design Pattern for simulation of a file selector. This example 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 declared properties
- Navigation Treeview using computed properties
- Navigation Treeview using declared properties
Example
File Viewer
-
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
-
report-1
-
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
-
letter-1
Accessibility Features
- Need to use CSS focus and hover classes to create focus and hover styling of 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 compute values for
aria-setsize
,aria-posinset
andarial-level
.
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 |
|
|
tabindex="-1" |
li |
|
|
tabindex="0" |
li |
|
|
aria-expanded="false" |
li |
|
|
aria-expanded="true" |
li |
|
|
aria-setsize="number" |
li |
|
|
aria-posinset="number" |
li |
|
|
aria-level="number" |
li |
|
Javascript and CSS Source Code
- CSS: tree.css
- Javascript: tree.js
- Javascript: treeitem.js
- Javascript: treeitemClick.js