✨(frontend) add missing label to improve accessibility and pass axe checks

enhances a11y by adding label to fix axe tool errors on missing attributes

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

Author: Ovgodd

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to
 
 - ♿(frontend) improve accessibility:
   - ♿(frontend) add skip to content button for keyboard accessibility #1624
+  - ♿(frontend) add missing label and fix Axes errors to improve a11y
+    #1693
 
 ### Fixed
 
@@ -22,8 +24,6 @@ and this project adheres to
 - ✨ Add comments feature to the editor #1330
 - ✨(backend) Comments on text editor #1330
 - ✨(frontend) link to create new doc #1574
-- ♿(frontend) improve accessibility:
-  - ♿(frontend) add skip to content button for keyboard accessibility #1624
 
 ### Fixed
 
@@ -52,6 +52,7 @@ and this project adheres to
 - ♻️(frontend) preserve @ character when esc is pressed after typing it #1512
 - ♻️(frontend) make summary button fixed to remain visible during scroll #1581
 - ♻️(frontend) pdf embed use full width #1526
+  #1624
 
 ### Fixed
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -194,6 +194,43 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
 
   useUploadStatus(editor);
 
+  useEffect(() => {
+    if (!refEditorContainer.current) {
+      return;
+    }
+
+    const setEditorAriaAttributes = () => {
+      const editorElement =
+        refEditorContainer.current?.querySelector<HTMLElement>(
+          '.ProseMirror.bn-editor[contenteditable="true"]',
+        );
+
+      if (!editorElement) {
+        return;
+      }
+
+      const label = t('Document editor');
+
+      editorElement.setAttribute('aria-label', label);
+      editorElement.setAttribute('title', label);
+    };
+
+    setEditorAriaAttributes();
+
+    const observer = new MutationObserver(() => {
+      setEditorAriaAttributes();
+    });
+
+    observer.observe(refEditorContainer.current, {
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [t]);
+
   useEffect(() => {
     setEditor(editor);
 
@@ -226,7 +263,6 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         slashMenu={false}
         theme="light"
         comments={canSeeComment}
-        aria-label={t('Document editor')}
       >
         <BlockNoteSuggestionMenu />
         <BlockNoteToolbar />
@@ -247,7 +283,6 @@ export const BlockNoteReader = ({
   const { user } = useAuth();
   const { setEditor } = useEditorStore();
   const threadStore = useComments(docId, false, user);
-  const { t } = useTranslation();
   const editor = useCreateBlockNote(
     {
       collaboration: {
@@ -289,7 +324,6 @@ export const BlockNoteReader = ({
         editor={editor}
         editable={false}
         theme="light"
-        aria-label={t('Document viewer')}
         formattingToolbar={false}
         slashMenu={false}
         comments={false}

src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
 
 import { BoxButton, BoxButtonType, Text, TextType } from '@/components';
 import { EmojiPicker, emojidata } from '@/docs/doc-editor/';
@@ -30,6 +31,7 @@ export const DocIcon = ({
   ...textProps
 }: DocIconProps) => {
   const { updateDocEmoji } = useDocTitleUpdate();
+  const { t } = useTranslation();
 
   const iconRef = useRef<HTMLDivElement>(null);
 
@@ -83,6 +85,8 @@ export const DocIcon = ({
         ref={iconRef}
         onClick={toggleEmojiPicker}
         color="tertiary-text"
+        aria-label={t(emoji ? 'Edit document emoji' : 'Add emoji')}
+        title={t(emoji ? 'Edit document emoji' : 'Add emoji')}
         {...buttonProps}
       >
         {!emoji ? (

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -199,7 +199,6 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
             <ButtonCloseModal
               aria-label={t('Close the share modal')}
               onClick={onClose}
-              tabIndex={-1}
             />
           </Box>
         }