A grid whose rows can be expanded and collapsed in the same manner as for a tree.
If aria-readonly is set on an element with role treegrid, user agents MUST propagate the value to all gridcell elements owned by the treegrid and expose the value in the accessibility API. An author MAY override the propagated value of aria-readonly for an individual gridcell element.
When the aria-readonly attribute is applied to a focusable gridcell, it indicates whether the content contained in the gridcell is editable. The aria-readonly attribute does not represent availability of functions for navigating or manipulating the treegrid itself.
In a treegrid that provides content editing functions, if the content of a focusable gridcell element is not editable, authors MAY set aria-readonly to true on the gridcell element. However, if a treegrid presents a collection of elements that do not support aria-readonly, such as a collection of link elements, it is not necessary for the author to specify a value for aria-readonly.
To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus.
Example coming soon
Required Owned Elements
- rowgroup → row
Inherited States and Properties
- aria-busy (state)
- aria-current (state)
- aria-disabled (state)
- aria-expanded (state)
- aria-grabbed (state)
- aria-hidden (state)
- aria-invalid (state)
Accessible Name Required
No HTML element equivalent.
- W3C (opens new window)
How widely is this supported?
Not sure, I did not come across any implementation of this component in my entire career. Some of these complex widgets are avoided by design teams and they also cause significant usability challenges for people with disabilities.