Tree component needed for accessibility reasons

[AndreasSamjeske]

Describe your motivation

Vaadin 8 had component Tree, which had pretty decent web accessibility features: aria-labelledby, aria-level and aria-expanded were automatically managed by Vaadin. Only drawback: every element was a <div>. <ul> and <li> would have been better.

Describe the solution you'd like

Vaadin needs to have a tree, that consists of <ul> and <li>. This ensures users with screen readers are able to understand the structure easily.

Describe alternatives you've considered

Since Vaadin 10+ there isn't any Tree component. In 2019 Vaadin suggested to use TreeGrid with a single column. But in regards of web accessibility this is insufficient: For screen reader users the grid structure is way too confusing and unnecessarily complex.

In Vaadin directory there is a tree, too. But in HTML this is a grid as well.

Additional context

Accordion might be an alternative, if you have only one level of depth. But it lacks attribute aria-level and aria-expanded.

[web-padawan]

Related issue in the web components repo: https://github.com/vaadin/web-components/issues/4414

[yuriy-fix]

Have renamed the issue to make it more discoverable.

[enver-haase]

@yuriy-fix can you maybe add something about a11y to the issue title? The current one IMHO is not nailing it.

[web-padawan]

There is an existing issue for Tree component: https://github.com/vaadin/flow-components/issues/1547. Since that issue has 12 👍 reactions and we use these as a way of feedback regarding highly requested features, let's keep it open and close this one (as it's essentially a duplicate).