moved button out of grid, fixed roles, and added aria-label to editor

Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

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
 

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>
   );
 };

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>

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>

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