Document grid: incomplete keyboard navigation on the grid component

[cyberbaloo]

Bug Report

Problematic behavior
The document grid uses the ARIA roles role="grid", role="row", role="gridcell", role="rowgroup", and role="columnheader". This pattern requires keyboard navigation using arrow keys between cells (ARIA grid pattern). However, no handling of these keys is implemented: navigation remains that of the classic Tab.

<div role="grid" aria-label="Grille des documents">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Nom</div>
      <div role="columnheader">Mise à jour le</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">...</div>
      <div role="gridcell">...</div>
    </div>
  </div>
</div>

Expected behavior/code
The role="grid" pattern requires the following keyboard handling:

• Arrow keys to navigate between cells
• Tab to move between interactive widgets inside a cell
• Home / End to go to the first / last cell of a row
• Page Up / Page Down to navigate between rows

If this handling is not desired, replace role="grid" with role="list" / role="listitem" with normal links.

Steps to Reproduce

1. Open the Docs homepage with a screen reader active (application mode triggered by role="grid")
2. Try to navigate the grid using arrow keys
3. Arrow key navigation does not work

Possible Solution
Two options:

Option A — Implement complete keyboard handling for the grid pattern (if arrow key navigation is desired): add keydown handlers to the grid component in accordance with the [ARIA Grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).

Option B — Replace with a list pattern (recommended if drag-and-drop remains the only non-standard interaction):

// Avant
<div role="grid" aria-label="Grille des documents">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Nom</div>
      <div role="columnheader">Mise à jour le</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-label="Ouvrir le document : Mon doc">
      <div role="gridcell"><a href="...">Mon doc</a></div>
      <div role="gridcell"><a tabindex="-1" href="...">il y a 3 jours</a></div>
    </div>
  </div>
</div>

// Après
<ul aria-label="Tous les documents">
  <li>
    <a href="...">Mon doc</a>
    <span>il y a 3 jours</span>
    <button aria-label="Ouvrir le menu des actions du document : Mon doc">...</button>
  </li>
</ul>

Critères RGAA

Critère 7.1 : Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?