From de9259f6365f17af4df9eb3efd4877416a6ad1a9 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 25 Mar 2026 14:27:32 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20localize=20dnd-k?=
 =?UTF-8?q?it=20screen=20reader=20instructions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pass i18n strings for screenReaderInstructions and announcements.
---
 .../components/DocGridContentList.tsx         | 61 ++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx
index 4491c851..3d04afa8 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx
@@ -1,4 +1,9 @@
-import { DndContext, DragOverlay, Modifier } from '@dnd-kit/core';
+import {
+  DndContext,
+  DragOverlay,
+  Modifier,
+  UniqueIdentifier,
+} from '@dnd-kit/core';
 import { getEventCoordinates } from '@dnd-kit/utilities';
 import { useModal } from '@gouvfr-lasuite/cunningham-react';
 import { TreeViewMoveModeEnum } from '@gouvfr-lasuite/ui-kit';
@@ -107,6 +112,59 @@ export const DraggableDocGridContentList = ({
 
   const { t } = useTranslation();
 
+  const dndAccessibility = useMemo(
+    () => ({
+      screenReaderInstructions: {
+        draggable: t(
+          'To pick up a draggable item, press space or enter. While dragging, use the arrow keys to move the item. Press space or enter again to drop the item in its new position, or press escape to cancel.',
+        ),
+      },
+      announcements: {
+        onDragStart({ active }: { active: { id: UniqueIdentifier } }) {
+          return t('Picked up document {{id}}.', { id: active.id });
+        },
+        onDragOver({
+          active,
+          over,
+        }: {
+          active: { id: UniqueIdentifier };
+          over: { id: UniqueIdentifier } | null;
+        }) {
+          if (over) {
+            return t('Document {{activeId}} is over document {{overId}}.', {
+              activeId: active.id,
+              overId: over.id,
+            });
+          }
+          return t('Document {{id}} is no longer over a droppable area.', {
+            id: active.id,
+          });
+        },
+        onDragEnd({
+          active,
+          over,
+        }: {
+          active: { id: UniqueIdentifier };
+          over: { id: UniqueIdentifier } | null;
+        }) {
+          if (over) {
+            return t(
+              'Document {{activeId}} was dropped over document {{overId}}.',
+              { activeId: active.id, overId: over.id },
+            );
+          }
+          return t('Document {{id}} was dropped.', { id: active.id });
+        },
+        onDragCancel({ active }: { active: { id: UniqueIdentifier } }) {
+          return t('Dragging was cancelled. Document {{id}} was dropped.', {
+            id: active.id,
+          });
+        },
+      },
+    }),
+    [t],
+  );
+
   const overlayText = useMemo(() => {
     if (!canDrag) {
       return t('You must be the owner to move the document');
@@ -147,6 +205,7 @@ export const DraggableDocGridContentList = ({
         modifiers={[snapToTopLeft]}
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
+        accessibility={dndAccessibility}
       >
         {docs.map((doc) => (
           <DraggableDocGridItem