Web-stories-wp: Page grid view should support keyboard navigation

[dvoytenko]

Feature Description

When inside the page grid, a user should be able to:

1. Use tab to jump between "Back" button, "Preview size" range control (three stops), and the page list.
2. When jumping to the page list the currently selected page should be focused instead. Not the whole list.
3. Use ↕️ and ↔️ keys to navigate through the grid horizontally and vertically, and with wrapping.
4. Use mod+↕️ and mod+↔️ to reorder pages.
5. Use Enter to select a page.
6. The focus should be trapped inside the dialog. E.g. if at any point the focus leaves the dialog while it's still open, the focus should be returned back to the dialog.
7. Use Esc to exit the dialog at any time.

Make sure to add integration testing for all described scenarios.

Additional Context

In some form, all of these keys are already implemented (in a simpler form) in the useCarouselKeys.js, but need more general implementation here.

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance Criteria

Implementation Brief

[o-fernandez]

@carlos-kelly @barklund is this something that you think Formidable could work on? If so, let's move to the backlog and tag it to the upcoming sprint?

cc: @bmattb @chris-pgm

[barklund]

@carlos-kelly @barklund is this something that you think Formidable could work on? If so, let's move to the backlog and tag it to the upcoming sprint?

This issue is very (extremely!) well-defined and accessible. I don't see any reason why it can't be picked up by Formidable.

[carlos-kelly]

Sounds good.

[dmmulroy]

Updates on requirements/functionality per discussion in slack.

Regarding "wrapping functionality":

1. Going left/right should proceed to the next/previous lines after the last column
2. Going down should adjust for unfilled columns. E.g. down from a column when the next row has an empty column below it should cause it to go to the last element in the grid.

Regarding tabbing to/from the Page list:

1. Initial tab to the page list should focus on the active/current page
2. Subsequent tabs to the page list should focus on the previously focused page.

[csossi]

Which PR branch am I testing in the QA environment? Not seeing PR#3113 in there:

[swissspidy]

@csossi PR #3113 has already been merged. Test on master

[csossi]

Verified in QA

[o-fernandez]

So this all works fine, but when I tab to move to the grid view, it defaults to the currently selected page and I can't tell whether the page is selected. Would be good to restyle the selection in this case to include some outline of the full page. Will file a follow-up ticket for that.