Gutenberg: Button block acts as keyboard trap on Firefox

[braders]

Steps to Reproduce

1. Open the demo post on Firefox (I am using Firefox developer edition, which is currently numbered at Firefox 60).
2. Insert cursor in a paragraph block, and navigate down the page with the down arrow key.
3. Once you reach the button block the URL is focussed, with the carat before the http:// and the keyboard down arrow does not work. You have to tab into the next block, which is jaring for anyone expecting to be able to use their arrow keys.

I am using Windows.

Expected Behavior

All editors that I can remember using recently have allowed moving between all text blocks using the left/ right/ up/ down arrow keys alone. This behaivour should be fully supported in Gutenburg.

[designsimply]

Tested with Firefox 61.0.1 on macOS 10.13.5 and was unable to trigger the problem. Going to download and test with Windows for good measure.

[afercia]

I can reproduce with Firefox 61 on Windows (as the reporter reported.. it happens on Windows(. With a small addition: I first have to move the cursor right or left in the URL field and then the Up or Down arrows don't do anything. Seems the writing flow definitely needs to be reviewed in the Button block.

[afercia]

Also, on Windows / FF the caret is at the end of the URL but isi out of view (the field content doesn't scroll horizontally as in Chrome) so that it's not really clear where the caret is.

[timwright12]

I'll take a run at this one (via @10up) - cc @tofumatt @afercia

[timwright12]

Just tested this, it seems like the root issue is that in Win FF the up and down arrows don't move the caret within the input like they do in Mac FF|Chrome|Safari, so the focus is getting stuck. When the caret is manually moved to the start, the up key works, and when the caret is moved the end, the down key works.

If you test this Pen you'll see a similar behavior: https://codepen.io/timwright12/pen/JeGKMr

Ultimately, this seems like a bug (or feature?) with Windows Firefox (not Gutenberg), but I don't see much harm in added a key binding for up and down when the input is focused just to move the caret around.

Thoughts @tofumatt @afercia ?

[timwright12]

Pretty small fix: https://github.com/WordPress/gutenberg/pull/11601