Open Gee-Bee opened 2 years ago
I worked around this issue by importing TreeContext
and rendering it conditionally within <ul role="tree">
element.
import React from 'react'
import TreeContext from '@devtools-ds/tree/dist/esm/TreeContext'
const Level = ({ parentId }) => {
const items = ...
if (!parentId) {
return (
<ul
role="tree"
tabIndex={0}
>
<TreeContext.Provider value={{ isChild: true, depth: 0, hasHover: true }} >
{items}
</TreeContext.Provider>
</ul>
)
} else {
return items
}
}
It's not an ideal solution, because I lost some attributes on the root <ul>
, but the tree structure is at least valid now.
It looks like the tree component could only build trees with one root node.
"School Activities" in examples.
In my use case I need to build a tree with multiple items at the root level. Deque University has such an example: https://dequeuniversity.com/library/aria/tree-view
I tried to workaround the issue, placing multiple components one under another:
but this does not produce a valid tree structure and I lost the ability to move around the root nodes.