Feature Request: Allow to move focus across items of a grid

Motivation

I was building an interface with a cards grid and wanted the user to be able to navigate in these cards nonlinearly using the arrow keys. I looked for something to help me in the documentation and here in the repository and even found that in the past Reakit had a Grid component but it was removed. Anyway, I implemented a solution by myself but here is the proposal for you to evaluate.

Current behavior

Currently, Rover components can be grouped horizontally or vertically and the useRoverState hook will move focus across items linearly, respecting the chosen orientation.

function Component() {
  const rover = useRoverState();

  return (
    <Group>
      <Rover {...rover} as={Tabbable}></Rover>
      <Rover {...rover} as={Tabbable}></Rover>
      <Rover {...rover} as={Tabbable}></Rover>
    </Group>
  )
}

Proposal

Add a new “grid” value to the orientation option of useRoverState hook that lets you move focus freely in any direction through the Rover components in a grid.

function Component() {
  const rover = useRoverState({
    orientation: 'grid',
    columns: 3 // Number of columns for hook calculate which item is above and below.
  });

  return (
    <Group className="grid">
      <Rover {...rover} as={Tabbable}></Rover>
      <Rover {...rover} as={Tabbable}></Rover>
      <Rover {...rover} as={Tabbable}></Rover>
      <Rover {...rover} as={Tabbable}></Rover>
      <Rover {...rover} as={Tabbable}></Rover>
      <Rover {...rover} as={Tabbable}></Rover>
    </Group>
  )
}

Possible implementations

I think this answer in StackOverflow can help you when implementing the new logic.

[Saeris]

Would there be any way we could make this work with CSS Grid? I’m not thrilled about the idea of specifying rows and columns in the HTML markup, because then re-flow logic would have to be calculated as different break-points are reached.

I realize that would be far from simple to implement, I just have to point it out as a major concern of mine for implementing a responsive arrow-key navigable grid.

[diegohaz]

Thank you for opening the issue, @httpiago!

A Grid component is planned. It will follow the WAI-ARIA Grid Pattern. And the API I’m thinking on is something like this:

const grid = useGridState();
return (
  <Grid {...grid}>
    <GridRow {...grid}>
      <GridCell {...grid}>Row 1 / Col 1</GridCell>
      <GridCell {...grid}>Row 1 / Col 2</GridCell>
      <GridCell {...grid}>Row 1 / Col 3</GridCell>
    </GridRow>
    <GridRow {...grid}>
      <GridCell {...grid}>Row 2 / Col 1</GridCell>
      <GridCell {...grid}>Row 2 / Col 2</GridCell>
      <GridCell {...grid}>Row 2 / Col 3</GridCell>
    </GridRow>
  </Grid>
);

It’s open for discussion though. So feel free to suggest a different idea.

cc @Saeris