carbon-for-ibm-dotcom icon indicating copy to clipboard operation
carbon-for-ibm-dotcom copied to clipboard

[Tree view] New component

Open shixiedesign opened this issue 3 years ago • 3 comments

Background

Carbon's tree view component currently exist in Carbon react experimental: Tree view and is a very accessibility friendly navigational component. We have many use cases that could benefit from this component include IBM Docs and SDMA. We would like to build this component in Carbon for IBM.com web components, and later contribute any enhancement to Carbon react.

Task

This is a new component for us. Bulk of the design work should be done and specs exist. It needs a little bit of review / evaluation with adopters (IBM Docs, SDMA) to make sure the design is complete and will serve their needs. Then functional spec, and development, website and QA.

The website ticket we may work with Carbon core team. Here are the existing documentations: Draft PR: https://carbon-website-git-fork-designertyler-treeview03092020-c-54d75e.vercel.app/components/tree-view/usage Notion (latest from Lauren): https://carbondesignsystem.notion.site/Usage-941b49cbba5c4f0abc7b072294f61bbf

Enhancements needed on

  1. Text label wrap to multiple lines
  2. Micro animation
  3. Number of tiers of indent

Regarding accessibility

Regarding keyboard accessibility: https://w3c.github.io/aria-practices/#TreeView

from Michael Gower (IBM)

Trees are also very keyboard friendly :) There are no tabs in a tree view. It's one tab stop all arrow interaction

Teams interested to adopt this component

  • IBM Docs
  • Carbon for Carbon Next
  • Cloud documentation

shixiedesign avatar Sep 20 '21 16:09 shixiedesign