Block inserter keyboard navigation

This is an experiment with different approaches for improving Gutenberg Block Inserter's keyboard navigation, more specifically within the list of blocks and the search box.

To test this, try to perform these actions using only the keyboard or screen readers on each version of the block inserter:

  1. Navigate through the blocks using only the keyboard without using the search box. Try to find a specific block (e.g. Form). How does it feel?
  2. Navigate through the blocks without using the search box. Then, after some time, start using the search box using only the keyboard. How does it feel?
  3. Use the search box to find a block from the beginning (e.g. Table). Write only 1-2 letters so you can see more items and navigate through them.

Multiple two-dimensional listboxes

  • The blocks list is built with multiple role="listbox" elements, one for each category.
  • The keyboard navigation is two-dimensional, which means pressing arrow keys will move in both directions.