Tree view

A tree view is a structure that displays data in a hierarchical view. It can be used in a dropdown, drawer, primary-detail, modal, or wizard.

Accessibility

To implement an accessible PatternFly tree view:

Provide a unique label for the tree view via aria-label or aria-labelledby.
Only pass custom interactive content as a tree view item's secondary action, and never as part of a tree view item's displayed name.
Ensure any interactive actions for a tree view item follow any applicable accessibility guideliens.
Provide a typeahead search when the tree view has more than 7 nodes.

For the PatternFly React library:

Enure the root TreeView component's isNested prop is false, and that any nested TreeView components' isNested prop are true.
Pass the isMultiselectable property if more than 1 tree node can be selected at a time.

For the HTML/CSS library:

Ensure only the root ul.pf-v6-c-tree-view__list element has the attribute role="tree", and that any nested ul.pf-v6-c-tree-view__list elements instead have role="group".
Pass the aria-multiselectable="true" attribute to the tree view list if more than 1 tree node can be selected at a time.

Testing

At a minimum, a tree view should meet the following criteria:

The tree view has a unique accessible name provided via aria-label or aria-labelledby.If there are multiple tree views on a page, or other table elements, a unique accessible name makes it easier for users to distinguish one from the others. It also provides improved context if a user is navigating via rotor menu from any assistive technologies such as a screen reader.
Only the root ul element within the tree view has the attribute role="tree". Any nested ul elements instead have the attribute role="group"
If there are more than 7 nodes in the tree view, a typeahead search is provided.
Within the context of the tree view, each tree view item can be navigated to and interacted with via keyboard. Up Arrow and Down Arrow will navigate to the next or previous item without expanding or collapsing any, respectively. Left Arrow will collapse an expanded item or navigate to its parent. Right Arrow will expand a collapsed item or navigate to its first child. Enter and Space will trigger a default action, typically selecting an item and/or expanding/collapsing it.
A tree view item does not have any custom interactive content passed to it, except as a secondary action.
If a tree view item contains interactive, secondary actions, those actions follow any applicable accessibility guidelines.
If more than 1 tree view item can be selected at a time, ensure the tree view list has the aria-multiselectable="true" attribute.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
`aria-label="[text that labels the tree view]"`	`TreeView`	Adds an accessible name to the tree view. Required if the `aria-labelledby` prop is not passed in.
`aria-labelledby="[id of the element that labels the tree view]"`	`TreeView`	Adds an accessible name to the tree view. Required if the `aria-label` prop is not passed in.
`badgeProps={[object of badge props]}`	`TreeView`	Customizes the badge component when rendered for tree view items. See our badge accessibility for more information.
`checkProps={[object of checkbox props]}`	`TreeView`	Customizes the checkbox when rendered for tree view items. See our checkbox accessibility for more information.
`isMultiSelectable`	`TreeView`	Indicates that multiple tree view items can be selected. Required if the tree view is intended to allow the selection of multiple items, and should only be passed to the root tree view component. Note that passing this prop simply indicates that the tree view is multiselectable, and any selection logic must still be handled manually.
`isNested`	`TreeView`	Determines the `role` of the tree view list. If true, the role is et to "group", otherwise the role is "tree". Required to be true if the tree view is placed within another tree view.
`aria-label="[text that labels the tree view search]"`	`TreeViewSearch`	Adds an accessible name to the tree view search. Required.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class	Applied to	Reason
`aria-label="[text that labels the tree view]"`	`ul.pf-v5-c-tree-view__list`	Adds an accessible name to the tree view. Required if the `aria-labelledby` attribute is not passed in.
`aria-labelledby="[id of the element that labels the tree view]"`	`ul.pf-v5-c-tree-view__list`	Adds an accessible name to the tree view. Required if the `aria-label` attribute is not passed in.
`aria-multiselectable="true"`	`ul.pf-v5-c-tree-view__list[role="tree"]`	Indicates that multiple tree view items can be selected. Required if the tree view is intended to allow the selection of multiple items. Note that passing this prop simply indicates that the tree view is multiselectable, and any selection logic must still be handled manually.
`role="group"`	`ul.pf-v5-c-tree-view__list`	Identifies the element as a group of nested tree view items. Required `ul` elements nested within the root `ul[role="tree"]`.
`role="tree"`	`ul.pf-v5-c-tree-view__list`	Identifies the element as a tree widget. Required on the root level `ul` of the tree view only.
`aria-expanded="false"`	`li.pf-v5-c-tree-view__list-item`	Indicates that the tree view item is collapsed to assistive technologies, and that its children are not visible nor navigable. Required if a tree view item is collapsed and it has children nodes.
`aria-expanded="true"`	`li.pf-v5-c-tree-view__list-item.pf-m-expanded`	Indicates that the tree view item is expanded to assistive technologies, and that its children are visible and navigable. Required if a tree view item is expanded and it has children nodes.
`aria-selected="false"`	`li.pf-v5-c-tree-view__list-item`	Indicates that a tree view item is not selected. Required if a tree view item is not selected.
`aria-selected="true"`	`li.pf-v5-c-tree-view__list-item`	Indicates that a tree view item is currently selected. Required if a tree view item is selected.
`role="treeitem"`	`li.pf-v5-c-tree-view__list-item`	Identifies the element as a group of nested tree view items. Required `ul` elements nested within the root `ul[role="tree"]`.
`aria-label="[text that labels the tree view search]"`	`.pf-v5-c-tree-view__search input`	Adds an accessible name to the tree view search. Required.

Tree view

Accessibility

Testing

React customization

HTML/CSS customization

Further reading