Treeview: File system navigator missing appropriate roles and/or attributes - WARNING: VERY RARE

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.

How to Fix

A tree view is a hierarchical structure with parent and child nodes that can expand and collapse. Tree views on the web are not common, but they may be used to represent a file system or other similar structure of folders and files. Screen reader support for treeviews is not consistent, and the keyboard interaction pattern is complicated. More commonly, a simple accordion/toggle component will do the job.

Fix this issue by doing ONE of the following:

1. Follow the ARIA accordion/toggle design pattern including expected keyboard interactions: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
2. Follow the full ARIA treeview design pattern including expected keyboard interactions: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/