Navigating Treegrid with keyboard

Flow
1

Treegrid has out-of-the-box keyboard navigation, but it seems a bit weird:

  • Arrow-right opens opens a parent. That’s fine
  • Arrow-right again does "something; I can see the focus ring moving slightly
  • Now I have to do Arrow-left twice to close the parent

The effect is that it looks like arrow-navigation is broken sometimes.

  • Arrow-left on a child does the same “something” as on parent
  • Arrow-right on child does nothing useful. It should’ve moved up to parent

Is there a way for me to fix that, so that Arrow-left on child moves up to parent?
It would mean setting the focus, not selection, so not sure how it should be done

2

The second arrow-right should move the focus from the row to the first column cell. That can be verified on the Tree Grid documentation page:

image
image732×153 16.9 KB

When this happens, one needs to use arrow-left twice to collapse the item, as the first arrow-left will move the focus from the cell to the row, where the item can be collapsed/expanded.

Now, it should be clear that the focus has changed, as seen in the picture, which makes me wonder why the focus ring moves slightly in your case.

3

The tactile feel of the TreeGrid keyboard navigation is very un-intuitive and poor. I was searching our tickets and noticed that I have not yet created an issue about this, although I recall having some internal discussions. Perhaps I have just been too busy. My own experience comes from creation of Tree add-on

Which is basically just one column TreeGrid, and the shortcomings of the TreeGrid keyboard navigation becomes more pronounced in this case.

Furthermore I made TreeComboBox TreeComboBox - Vaadin Add-on Directory Which otherwise works very nicely, but when using Tree in Popup that is part of the field, you would appreciate well working keyboard navigation.

Here is a ticket now: Improve TreeGrid keyboard navigation · Issue #7385 · vaadin/web-components · GitHub

4

Doh! Of course. I have a 1-column treegrid main menu, so didn’t notice.
That explains it. Still awful though :smiley:

:+1:

5

Don’t do this. It’s a literal nightmare for accessibility. There is an official component: Side Navigation | Components | Vaadin Docs

1 Like
6

The current behavior of TreeGrid mostly follows the keyboard interactions defined in the ARIA Authoring Practices Guide: Treegrid Pattern | APG | WAI | W3C

Right Arrow:

  • If focus is on a collapsed row, expands the row.
  • If focus is on an expanded row or is on a row that does not have child rows, moves focus to the first cell in the row.

Left Arrow:

  • If focus is on an expanded row, collapses the row.
  • If focus is on the first cell in a row and row focus is supported, moves focus to the row.

Keyboard navigation on the following example also works pretty much the same as with Vaadin TreeGrid: Treegrid Email Inbox Example | APG | WAI | W3C

7

If a (tree)grid is a problem for accessibility we have bigger problems…

We will probably have a look at the Side Navigation at some point. It looks nice, but it remains to be seen how it scales. We have hundreds of entries in the menu, and a few instances of multiple levels.

We also have a filter above the treegrid, which can use the built-in filtering mechanism of the TreeDataProvider. With Side Navigation I would have to loop over filter the Vaadin components themselves and set hidden/visible. We already do that in other places, but it seems less clean.

Looking at Side Navigation now, I notice that it does not support arrow navigation, only tab / shift-tab. I don’t know what is expected for accessibility, but for my own use I find that to be a regression.

8

Click on the example app. It has one more rule:

Left Arrow: If a row is focused, and it is collapsed, moves to the parent row (if there is one).

Apart from that missing rule, if my treegrid had multiple columns the keyboard navigation would probably make more sense.

9

Click on the example app. It has one more rule:
Left Arrow: If a row is focused, and it is collapsed, moves to the parent row (if there is one).

Please note that such a rule is not listed in the treegrid keyboard interactions linked above but it’s rather a feature in the example treegrid as mentioned on the page.
Not to say this wouldn’t be a nice addition to Vaadin TreeGrid also.