DataViews: Improve keyboard accessibility in grid layout

[andrewhayward]

Related: #55083

What problem does this address?

Currently every focusable element (or "widget") in a list layout (header action buttons, linked items, etc) presents as its own tab stop. This can make it difficult and tedious for a non-mouse user to move across content.

What is your proposed solution?

We should utilise an interactive grid to reduce the number of tab stops on the page, and allow users to more efficiently navigate the data:

The grid pattern can be used to group a set of interactive elements, such as links, buttons, or checkboxes. Since only one element in the entire grid is included in the tab sequence, grouping with a grid can dramatically reduce the number of tab stops on a page. ¹

We will have to be careful however how we implement this pattern. At first glance, we might say that each card is a cell within the grid, and directional navigation keys could be used to jump from card to card:

This makes it hard to navigate the interactive elements within each card though, as they should not have their own tab stops.

Instead, we could conceptualise each card as a row in a table, with each interactive element within it a cell. This would mean that users could navigate between each card using the up/down arrow keys, and left/right to move between elements within each card. "Horizontal" navigation could either loop within each card, or jump to the first/last interactive element of the next/previous card.

Alternatively, each navigable element could be a cell within a larger grid, with the card wrappers entirely presentational from a navigation perspective:

Without some experimentation, it is hard to say which of these flows would feel more natural. The third option, of breaking down the entire layout into a sub-grid, is probably the most intuitive, particularly if we appropriately mark each card as a group, and implement access keys such as Home, End, Page Up and Page Down to navigate within and between cards.

Footnotes

1. W3 Grid Pattern: Layout Grids ↩