Keyboard traps on some blocks when keeping the Tab key pressed

[afercia]

Keeping the Tab key pressed is a common way to quickly navigate through focusable elements in a page when using only the keyboard. That's a native behavior and should work in any web application.

However, when keeping the Tab key pressed, there's a weird effect on some blocks where tabbing enters in a sort of "loop", I guess because of timings and the non-native focus management Gutenberg does.

This is particularly noticeable on the cover image block and in the image block, but I have been able to reproduce it randomly on other blocks too, for example the paragraph block.

To better illustrate the issue, I've made a short video (25 seconds) of what happens on current master: https://cloudup.com/c8n7UoQGBaZ

[afercia]

I think this depends also on how each browser handles tabbing. Can always reproduce on macOS latest Chrome, ranndomly on Safari, doesn't happen on Firefox.

[ZebulanStanphill]

Can you still reproduce this in Gutenberg 2.6?

[afercia]

I've tested on all browsers I can test with (also on Windows) and couldn't reproduce any longer. Only IE11, tabbing in the demo content, gets stuck on the last block: the one that uses the "wave" emoji 👋

That's probably unrelated so yeah I think this can be closed. @SuperGeniusZeb thanks for testing. One issue less 🙁

[afercia]

Note: I guess the problem with IE 11 and the "wave" image in the last paragraph is because IE11 considers images in a contenteditable element as contenteditable themselves: it focuses the images, applies the resize handlers and there's no way to tab away.
I initially thought it was happening because the emoji in the demo content is a SVG but it happens with all images. Some simple content like the following, triggers the IE11 behavior:

<!-- wp:paragraph -->
<p>Image: <img alt="" src=".../my-jpg.jpg" /></p>
<!-- /wp:paragraph -->

This could be an issue with images nested within paragraphs.