Improve TreeGrid keyboard navigation

[TatuLund]

Describe your motivation

The tactile feel of the TreeGrid keyboard navigation is very un-intuitive and poor. My own experience comes from creation of Tree add-on

https://vaadin.com/directory/component/tree

Which is basically just one column TreeGrid, and the shortcomings of the TreeGrid keyboard navigation becomes more pronounced in this case. E.g. space key toggles both the expand/collapse and selection. So there is a conflict. This is less severe in multi column case, as you can navigate out of hierarchy column, and handle selection by hitting space in other column.

You can use additional arrow left key press to go row navigation mode, after which you can toggle row selection by space, and it no longer toggles expand/collapse. However it is very easy mix between the modes by accidental additional arrow strokes and hence do un-intentional expand/collapse or select.

Furthermore I made TreeComboBox https://vaadin.com/directory/component/treecombobox Which otherwise works very nicely, but when using Tree in Popup that is part of the field, you would appreciate well working keyboard navigation.

Describe the solution you'd like

Clearer navigation where there is no overloading of the same keys for different things.

Describe alternatives you've considered

No response

Additional context

No response

[TatuLund]

The workaround is to extend vaadin-grid-tree-toggle and override the default keyboard navigation with our own:

Example:

https://github.com/TatuLund/tree-flow/blob/v24/src/main/resources/META-INF/resources/frontend/custom-grid-tree-toggle.js

And

https://github.com/TatuLund/tree-flow/blob/v24/src/main/java/org/vaadin/tatu/Tree.java#L130

In this version ENTER toggles the selection and SPACE toggles the expand/collapse