Document grid: untranslated drag-and-drop instructions

[cyberbaloo]

Bug Report

Problematic behavior
The keyboard instructions associated with the draggable elements in the document grid are written in English. The text of the #DndDescribedBy-0 div, referenced via aria-describedby on each draggable element, contains:

<div id="DndDescribedBy-0" style="display: none;">
    To pick up a draggable item, press the space bar.
    While dragging, use the arrow keys to move the item.
    Press space again to drop the item in its new position, or press escape to cancel.
</div>

Additionally, dnd-kit dynamically injects announcements via an aria-live region at each navigation interaction in the grid. These announcements are also in English and are read out by the screen reader at each focus change.

Expected behavior/code
The keyboard instructions of the drag-and-drop component must be rendered in the interface language (French). The expected text:

<div id="DndDescribedBy-0" class="sr-only">
    Pour saisir un élément, appuyez sur la barre d'espace.
    Pendant le déplacement, utilisez les touches fléchées pour déplacer l'élément.
    Appuyez à nouveau sur espace pour déposer l'élément à sa nouvelle position,
    ou sur Échap pour annuler.
</div>

Note: display: none should also be replaced with an sr-only class (accessible hiding via clip/position: absolute) so that the content is actually read via aria-describedby. Warning, all Drag-and-drop instructions are affected and do not work with the keyboard.

Steps to Reproduce

1. Open the Docs homepage with an active screen reader
2. Navigate using the keyboard to a document in the grid
3. The screen reader attempts to read the description associated with the draggable element

Possible Solution
The dnd-kit library, used for drag-and-drop, exposes a screenReaderInstructions prop on the <DndContext> component to localize these messages:

// Avant
<DndContext>
  {/* instructions par défaut en anglais */}
</DndContext>

// Après
<DndContext
  screenReaderInstructions={{
    draggable: `Pour saisir un élément déplaçable, appuyez sur la barre d'espace.
Pendant le déplacement, utilisez les touches fléchées pour déplacer l'élément.
Appuyez à nouveau sur espace pour déposer l'élément à sa nouvelle position,
ou sur Échap pour annuler.`,
  }}
  accessibility={{
    announcements: {
      onDragStart: ({ active }) => `Déplacement de ${active.id} commencé.`,
      onDragOver: ({ active, over }) => over ? `${active.id} au-dessus de ${over.id}.` : undefined,
      onDragEnd: ({ active, over }) => over ? `${active.id} déposé sur ${over.id}.` : `Déplacement de ${active.id} annulé.`,
      onDragCancel: ({ active }) => `Déplacement de ${active.id} annulé.`,
    },
  }}
>

Critères RGAA

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

Impact
A blind user navigating with the keyboard focuses on a document in the grid. The screen reader reads out the movement instructions in English. If the user does not understand English, they cannot use the document reorganization feature.