[blocks]: Tree view Component

[mibaatwork]

Description

Structure: At its core, a tree view consists of parent and child nodes. The parent nodes can be expanded to reveal child nodes, which may themselves be parents of their own child nodes. The Block should have a border as usual dark Background, indicators for collapsing like [+] , [-] and changeable icons like folder …

HTML Elements: Use

(unordered list) for the outer structure and
• (list item) for each node. Parent nodes often contain a or element to facilitate the expand/collapse functionality.

  CSS Styling: CSS is used to style the tree view, including the indentation of child nodes, icons indicating the open or closed state of parent nodes, and hover effects for better user interaction.

  Additional functionality:
  JavaScript Interactivity: JavaScript is needed to handle the expand/collapse functionality. This often involves adding event listeners to the expand/collapse icons or buttons, toggling CSS classes to show or hide child nodes, and managing aria-expanded attributes for accessibility.
  Accessibility: Proper ARIA attributes and roles should be used to make the tree view accessible. For example, role="tree" forthe entire component, role="treeitem" for each node, aria-expanded to indicate the open/closed state of parent nodes, and keyboard navigation support.

  Example