From dfd5dc1545baf2dd542ecf13e542f28883e87902 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 11 Sep 2025 10:49:22 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20document=20visible=20in?=
 =?UTF-8?q?=20list=20are=20now=20openable=20via=20enter=20key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the document now appears in the list and can be opened using the enter key

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 CHANGELOG.md                                         |  5 +++++
 .../docs/docs-grid/components/DocsGridItem.tsx       | 12 ++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0d596b985..b39ec100d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,11 @@ and this project adheres to
 
 - 🐛(backend) duplicate sub docs as root for reader users
 
+### Changed
+
+- ♿(frontend) improve accessibility:
+  - ✨ add document visible in list and openable via enter key #1365
+
 ## [3.7.0] - 2025-09-12
 
 ### Added
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
index aaf26cd237..efb1418e93 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
@@ -1,5 +1,6 @@
 import { Tooltip, useModal } from '@openfun/cunningham-react';
 import { DateTime } from 'luxon';
+import { KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
@@ -33,6 +34,13 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
     shareModal.open();
   };
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      (e.target as HTMLAnchorElement).click();
+    }
+  };
+
   return (
     <>
       <Box
@@ -52,6 +60,9 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
           }
         `}
         className="--docs--doc-grid-item"
+        aria-label={t('Open document: {{title}}', {
+          title: doc.title || t('Untitled document'),
+        })}
       >
         <Box
           $flex={flexLeft}
@@ -68,6 +79,7 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
               min-width: 0;
             `}
             href={`/docs/${doc.id}`}
+            onKeyDown={handleKeyDown}
           >
             <Box
               data-testid={`docs-grid-name-${doc.id}`}