From 0d596e338ccb759c15d763b1184b19a94b73d3ba Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 23 Oct 2025 10:59:20 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20move=20editor=20button=20?=
 =?UTF-8?q?out=20of=20grid=20and=20fix=20roles/aria-label?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

improves accessibility and layout consistency of editor interface

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7e1ace17d0..9598bd9c05 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,11 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Fixed
+
+- ♿(frontend) improve accessibility:
+  - ♿(frontend) improve ARIA in doc grid and editor for a11y #1519
+
 ## [3.9.0] - 2025-11-10
 
 ### Added
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 4d23e1be98..eee27c2241 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
@@ -186,6 +186,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         formattingToolbar={false}
         slashMenu={false}
         theme="light"
+        aria-label={t('Document editor')}
       >
         <BlockNoteSuggestionMenu />
         <BlockNoteToolbar />
@@ -200,6 +201,7 @@ interface BlockNoteReaderProps {
 
 export const BlockNoteReader = ({ initialContent }: BlockNoteReaderProps) => {
   const { setEditor } = useEditorStore();
+  const { t } = useTranslation();
   const editor = useCreateBlockNote(
     {
       collaboration: {
@@ -231,6 +233,7 @@ export const BlockNoteReader = ({ initialContent }: BlockNoteReaderProps) => {
         editor={editor}
         editable={false}
         theme="light"
+        aria-label={t('Document version viewer')}
         formattingToolbar={false}
         slashMenu={false}
       />
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