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 ?