File Directory 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 224.
This example implements the features of the Treeview Design Pattern for simulation of a file selector. This example explicitly sets the values for aria-setsize
, aria-posinset
and arial-level
, which override any browser compuuted values.
Similar examples include:
- File Directory Treeview using computed 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 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 explicitly sets the values for
aria-setsize
,aria-posinset
andarial-level
, which override any browser compuuted values.
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