Inserter: Autofocus the Search input

[oskosk]

Makes the inserter menu autofocus on the input search. We can autofocus if the search input is on the top as the first focusable item.

Related to #1064

Testing instructions

1. Run this branch
2. Click the "Insert" button
3. Expect the focus to be set on the search input.

[oskosk]

cc @mtias and @jasmussen for review

[youknowriad]

This works great for me but I wondering if there're accessibility issues with this.

Not totally related: We should select the first block automatically and allow "type type + enter" to add the first selected block.

[nb]

We chatted with @afercia again today and we can autofocus if we move the search input to the top. If you think that will be a better experience, feel free to change to that, otherwise 👍 from me.

[aduth]

With the search input moved, we may also need to update this logic, which assumed that the search input would appear at the end of the inserter when keyboarding through the set:

https://github.com/WordPress/gutenberg/blob/19ecc2c/editor/inserter/menu.js#L92-L93

[youknowriad]

We chatted with @afercia again today and we can autofocus

Should we change the logic here and just use the autoFocus prop instead of detecting alpha keys?

[oskosk]

@aduth indeed. Will update this. Thanks!

@youknowriad I think you're right. Autofocus was accepted if we moved the search input to the top

[mtias]

@oskosk can you rebase this so there are no conflicts?

[oskosk]

I've updated this PR (code, description and title) to just introduce the autoFocus prop on the search input and move it to the top of the inserter.

Also removed the onKeydown behaviour for focusing the search input when a letter key is pressed. This turned out to be an unexpected behaviour in terms of accessible menu navigation. If pressing letter keys is to be implemented as a control for navigation it's expected that pressing the key, will focus the first item with text starting with that letter as detailed by @afercia's research on menu navigation.

[youknowriad]

Such a nice improvement. Ship it 👍

[afercia]

@youknowriad not sure if this is still needed onClick={ this.setSearchFocus } ?

[oskosk]

@afercia calling setSearchFocus updates a currentFocus var in the component's state which is used for later sequential navigation among blocks and the search input.

[oskosk]

@afercia thanks to your comment I ended up realizing that this state variable was being initialized as null instead of "search" which probably makes more sense since we're autofocusing it now. I've updated this PR to do this

[afercia]

Thanks @oskosk I see now changeMenuSelection() not only sets the focus but also updates the state.

[oskosk]

@afercia are you OK with merging this and handling the observations in #1378 afterwards ?

[afercia]

@oskosk Sure, I was just asking a question, not arguing anything.

[oskosk]

Oh, didn't parse it as arguing. I just wanted to bring the observations from #1378 into this convo so you knew I'm aware of those :P