Add arrow key navigation to the inserter window.

[BE-Webdesign]

In #462, having keyboard navigation for the inserter window is needed.

[aduth]

Related: #323

[BE-Webdesign]

In #462, arrow key navigation is called for. Any reason why tab navigation would be bad?

[jasmussen]

I don't know for sure, and I would imagine that @afercia might have thoughts. However, a couple of things to keep in mind:

1. down the road we could be looking at 50 maybe 100 blocks in the inserter, especially once the customization focus goes into full swing.

2. in one scenario, when you invoke the inserter on a newline ("the newline is the commandline"), you are actually still typing on the newline as opposed to inside the inserter itself. Sort of like Slack slash commands:

☝️ those two points don't necessarily have to affect whether or not tab can work for navigating through items, just figured I'd give them as context for some of the behaviors we've been thinking of. The inserter as a whole is also one of the interface elements that will likely undergo more iteration as we test it.

[afercia]

Yep this kind of menus should work with both the Tab/Shift+Tab and Up/Down Arrow keys. Also, both tabbing and arrowing should be constrained within the inserter. Some good examples are on Twitter. Ideally, the inserter should reproduce their behavior:

The inserter case is a bit different, given the presence of the search field. I'd say both tabbing and arrowing should include the search field, but the actual interaction should be carefully tested so maybe better double check this point later.

Also, pressing Escape should close the inserter and move focus back in a proper place. Also clicking anywhere outside of the inserter should close it.

Worth noting when using screen readers, keyboard events need some special ARIA roles to actually work. Going to open a separate issue for this.

[afercia]

Please notice that arrows navigation should work also with the Left and Right arrow keys. That's the interaction some screen readers expect. For example, by default VoiceOver gives hints about which commands to use:

Seems to me that it would make sense to couple "Down" and "Right" to move to the next item and "Up" and "Left" to move to the previous one.