✨(frontend) document visible in list are now openable via enter key

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

@@ -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

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}`}