Arrow key navigation in table block

[oandregal]

Spun off from #14462 (comment)

When the caret is at the table block:

• the arrow down should move to the cell below instead of to the right cell
• the arrow up key should move the caret to the cell above instead of the left cell

[ellatrix]

Currently, this roughly how the logic is:

1. We look for the closest tabbable element in a given direction.
2. We place the caret at the closet y position.

The problem is (1): DOM positioning may not be just vertical, but also horizontal, as is the case in a table block. Similar to #14462, we come to the same conclusion: we're looking for a visual position, but we're checking DOM position.

The solution is to find the closest element vertically that can receive the caret in the closest block. If there is no such element, the block should be selected.

Practically this probably means that we have to test if the browser can set a range at any x position with that fixed y position, perhaps skipping a few x positions at a time.

[tellthemachines]

Noting here, as per the issue linked above, that currently it's impossible to move focus with the left and right arrow keys to a cell that's hidden from view. So if we have a wide table with horizontal scroll:

with the cursor at the "basil" column I am not able, by using the right arrow, to navigate to the next column. If I scroll the hidden column into view, I am able to focus it normally.

[ellatrix]

@tellthemachines could you open a new issue for that? It seems unrelated.

[ellatrix]

The up/down arrow issue should be fixed in #22105.