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 ( <> { } `} className="--docs--doc-grid-item" + aria-label={t('Open document: {{title}}', { + title: doc.title || t('Untitled document'), + })} > { min-width: 0; `} href={`/docs/${doc.id}`} + onKeyDown={handleKeyDown} >