From 24794276e8a5ef4910b55c21760c58a538b74f4b Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 23 Oct 2025 10:59:20 +0200
Subject: [PATCH] moved button out of grid, fixed roles, and added aria-label
 to editor

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 CHANGELOG.md                                  |  2 ++
 .../doc-editor/components/BlockNoteEditor.tsx |  9 +++++-
 .../docs/docs-grid/components/DocsGrid.tsx    | 32 +++++++++----------
 .../docs/docs-grid/components/Draggable.tsx   |  2 +-
 .../docs/docs-grid/components/Droppable.tsx   |  2 +-
 5 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 96791f3cd7..c164f5bd45 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,8 @@ and this project adheres to
 
 - 🐛(frontend) fix duplicate document entries in grid #1479
 - 🐛(frontend) show full nested doc names with ajustable bar #1456
+- ♿(frontend) improve accessibility:
+  - ♿(frontend) improve ARIA in document grid and editor for a11y compliance #1519
 
 ## [3.8.2] - 2025-10-17
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index 3b6a67adeb..e252dc50f7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -203,6 +203,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         slashMenu={false}
         editable={!readOnly}
         theme="light"
+        aria-label={t('Document editor')}
       >
         <BlockNoteSuggestionMenu />
         <BlockNoteToolbar />
@@ -219,6 +220,7 @@ export const BlockNoteEditorVersion = ({
   initialContent,
 }: BlockNoteEditorVersionProps) => {
   const readOnly = true;
+  const { t } = useTranslation();
   const editor = useCreateBlockNote(
     {
       collaboration: {
@@ -236,7 +238,12 @@ export const BlockNoteEditorVersion = ({
 
   return (
     <Box $css={cssEditor(readOnly, true)} className="--docs--editor-container">
-      <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
+      <BlockNoteView
+        editor={editor}
+        editable={!readOnly}
+        theme="light"
+        aria-label={t('Document version viewer')}
+      />
     </Box>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 51df82b47f..f8aade75aa 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -152,23 +152,23 @@ export const DocsGrid = ({
                   <DocGridContentList docs={docs} />
                 )}
               </Box>
-              {hasNextPage && !loading && (
-                <InView
-                  data-testid="infinite-scroll-trigger"
-                  as="div"
-                  onChange={loadMore}
-                >
-                  {!isFetching && hasNextPage && (
-                    <Button
-                      onClick={() => void fetchNextPage()}
-                      color="primary-text"
-                    >
-                      {t('More docs')}
-                    </Button>
-                  )}
-                </InView>
-              )}
             </Box>
+            {hasNextPage && !loading && (
+              <InView
+                data-testid="infinite-scroll-trigger"
+                as="div"
+                onChange={loadMore}
+              >
+                {!isFetching && hasNextPage && (
+                  <Button
+                    onClick={() => void fetchNextPage()}
+                    color="primary-text"
+                  >
+                    {t('More docs')}
+                  </Button>
+                )}
+              </InView>
+            )}
           </Box>
         )}
       </Card>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx
index cc554d73ad..a38cf59c0c 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx
@@ -19,7 +19,7 @@ export const Draggable = <T,>(props: DraggableProps<T>) => {
       {...attributes}
       data-testid={`draggable-doc-${props.id}`}
       className="--docs--grid-draggable"
-      role="presentation"
+      role="none"
     >
       {props.children}
     </div>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx
index b530139395..4039f284fd 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx
@@ -35,7 +35,7 @@ export const Droppable = ({
     <Box
       ref={setNodeRef}
       data-testid={`droppable-doc-${id}`}
-      role="presentation"
+      role="none"
       $css={css`
         border-radius: 4px;
         background-color: ${enableHover