Gutenberg: Typing when the inserter menu has focus should start searching the blocks

Created on 7 Jun 2017  路  9Comments  路  Source: WordPress/gutenberg

Just a little UX enhancement :smile: Would be nice if I could click the +Insert tool and start typing "Twitter" (or whatever I'm looking for) without having to go click in the search box.

Most helpful comment

This is a little frustrating. I think this is a good user experience. It would be nice if we could find a way to do this.

All 9 comments

I think there were some accessibility concerns, that's why we avoid it.

ahhh, for accessibility related keyboard shortcuts... TIL!

This is a little frustrating. I think this is a good user experience. It would be nice if we could find a way to do this.

I was doing some research about this in the last days, and actually a-z search is one of the (optional, not required) interaction models described by the ARIA Authoring Practices for menus/menubars; Reference: https://www.w3.org/TR/wai-aria-practices/#menu

scroll a bit the page, where it describes the expected interaction for each key and you will find:

Any key that corresponds to a printable character (Optional): Move focus to the next menu item in the current menu whose label begins with that printable character.

There are also some linked examples, worth noting this works _moving focus to_ and not filtering the list, see: https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
Once you focus the toolbar, use the arrow keys to move through items, open one of them and press a key corresponding to the first letter of one of the items.

This interaction model is implemented in all the menus/menubars examples:
Navigation Menu Button Example
https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-2/menu-button-2.html
Actions Menu Button Example:
https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-1/menu-button-1.html
Navigation Menubar Example:
https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
Editor Menubar Example:
https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html

Of course, implementation details and discoverability of the feature are key, but it would probably be a very nice improvement for all users.

馃帀 great news! Reopening!

So this would filter all the blocks with the first letter I type, correct?

If so, would it continue filtering as a I type more blocks? That would be ideal to start typing a word and having all the blocks filtering until I get down to 1 or 2.

Filtering is done by the search field, and it'd already working :)
The a-z thing instead, should work differently otherwise it would just replicate the search functionality. As I see it, and as recommended by the ARIA Authoring Practices, it should move focus to the first block that starts with that character. No filtering, just move focus. This would replicate the native behavior of a select element. Pressing a second time the same character, it should move focus to the second block that starts with that character, and so on.

The best examples of this behavior are in the link posted above.

Not sure if from a technical point of view it would be easy to make this work also with more than one character, e.g. typing qu moves focus to the Quote block.

That said, I'm not sure all this would make sense now that the search field is the first thing at the top _and_ is auto-focused 馃檪

@afercia thank you for the clarification, that makes a lot more sense!

That said, I'm not sure all this would make sense now that the search field is the first thing at the top and is auto-focused

I would tend to agree. If the search field is at the top and it's auto-focused, then all you have to do is start typing and the blocks will quickly filter.

closed by #1187

Was this page helpful?
0 / 5 - 0 ratings

Related issues

melchoyce picture melchoyce  路  95Comments

melchoyce picture melchoyce  路  169Comments

SchneiderSam picture SchneiderSam  路  88Comments

maddisondesigns picture maddisondesigns  路  79Comments

DeveloperWil picture DeveloperWil  路  102Comments