Writing flow: Arrow key navigation gets stuck on non-text inputs

[mirka]

Description

Block navigation with arrow keys can get stuck on input element types that don't support selection ranges, such as checkbox. This effectively makes it a "focus trap", and the rest of the writing flow content cannot be accessed by keyboard.

Step-by-step reproduction instructions

1. Add a <input type="checkbox" /> to the edit component of a Core block, such as Code.
2. Try to navigate through the blocks with the Down arrow.

Expected behaviour

I can navigate through the checkbox element to the next tabbable element, similar to any other tabbable element like <button>.

Actual behaviour

The arrow key gets stuck on the checkbox, and the page scrolls instead of navigating to the next tabbable.

Screenshots or screen recording (optional)

WordPress information

Latest trunk in wp-env container.

Device information

• Device: Desktop
• Operating system: macOS 11.3
• Browser: Chrome 91.0.4472.77