FeatureRequest(Component: Tree): Keyboard control for tree expand, collapse, and node focus

[LouisSung]

What problem does this feature solve?

Since NzTree is often used for files display and management, it's better to have keyboard control support like an IDE does.

I know the NzTree is now under refactoring, it might be a good chance to integrate the new features :D

I've also wrote an example @gist (core code), @repo (whole project), and @stackblitz (build failed...), which is highly inspired by Intellij

Demo

(Shift-)Tab > Single Click > Double Click > * > - > + > - > → > ←

Features

• Mouse control
  • Single Click: focus tree node
  • Double Click: toggle between collapsed and expanded (i.e., + & - / Enter)
• Keyboard control
  • (Shift-)Tab: switch between <input> and <nz-tree>
  • Esc: blur
  • Enter: toggle between collapsed and expanded (when !isLeaf) (i.e., Double Click)
  • ↑ ↓: select previous/next node
  • ←: move to parent (when isLeaf or !isExpanded) or collapse recursively (when isExpanded)
  • →: next node (i.e., ↓) (when isLeaf or isExpanded) or expand next level (i.e., +)
  • *: expand recursively
  • +: expand next level only
  • -: collapse recursively

Implementation

1. Get the <input> inside <nz-tree> first so that treeFocuse() can be used to focus treeInputRef and treeNode
2. Bind focus and blur events to treeInputElement to handle Tab and Shift-Tab cases (switch using keyboard rather than mouse clicking)
3. Bind (keydown), (nzClick), and (nzDblClick) events directly on <nz-tree>
4. Check pressed key and do the corresponding action

What does the proposed API look like?

1. There should be a new property focusedNode for each NzTree rather than use the existing isSelected to implement node focus.
2. The ElementRef of <input> may be exposed for user to bind customize events on

[LouisSung]

Maybe I should tag @simplejason ?

[simplejason]

Thanks for your feedback, I will check it as soon as I can. All features of ng-zorro-antd are following the design of ant-design, please make sure ant-design has supported that or if you can implement it with template :)

[LouisSung]

Thanks for your quick reply :D

I did implement it using template; however, it's quite tricky and inefficient (requires each tree to be hacked once).
For example, the NzTreeComponent doesn't expose its ElementRef and <input> thus requires @ViewChild() and querySelector() to get ones.

Seems like the Tree Component in Ant Design does not support keyboard control either : (

Is there any plan to add keyboard control or a11y to components like dropdown, menu, tree, etc. for either Ant Design or NG-ZORRO?
Or at least expose important things like the ElementRef and <input> of NzTree without changing the UI and the existing features _(;3