Nested lists

[jurokapsiar]

Feature Request

Nested (closable) list

Problem description

Even though Accordion does conform ARIA best practices and renders correct HTML from this point of view, we were not able to successfully use it in the nested lists use case (similar to https://stardust-ui.github.io/react/components/accordion#variations-list)

The HTML structure does not allow the screen readers to navigate correctly using virtual cursor.

To achieve the correct navigation, the structure needs to be changed in a way that resembles nested lists:

<ul id="main" style="list-style-type:none">
  <li><a href="#">Header 1</a>
    <div class="panel-content">
      <ul>
        <li><a href="#">item 1</a></li>
        <li><a href="#">item 2</a></li>
        <li><a href="#">item 3</a></li>
      </ul>
    </div>
  </li>
...
</ul>

Proposed solution

Either add a new variant of Accordion that renders this nested structure or create a separate component that allows that.

[notandrew]

Is this a common pattern/component that we'll need to support, or should this be built as a one-off component?

[levithomason]

Agreed. From a UI component usability standpoint, we need to support nested <List /> components as well as nested <Accordion /> components.

[levithomason]

We should take our new Tree component and extend it with design features necessary to create other variations.

[pkumarie2011]

Tree component is the solution here.