✨(frontend) set empty alt for decorative images in blocknote editor

ensure decorative images have empty alt to comply with RGAA 1.2 accessibility

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

CHANGELOG.md

@@ -17,13 +17,13 @@ and this project adheres to
   - #1262
   - #1244
   - #1270
+  - #1282
 
 ### Fixed
 
 - 🐛(makefile) Windows compatibility fix for Docker volume mounting #1264
 - 🐛(minio) fix user permission error with Minio and Windows #1264
 
-
 ## [3.5.0] - 2025-07-31
 
 ### Added

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -43,7 +43,9 @@ test.describe('Config', () => {
       path.join(__dirname, 'assets/logo-suite-numerique.png'),
     );
 
-    const image = page.getByRole('img', { name: 'logo-suite-numerique.png' });
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
 
     await expect(image).toBeVisible();
 

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -272,7 +272,9 @@ test.describe('Doc Editor', () => {
       path.join(__dirname, 'assets/logo-suite-numerique.png'),
     );
 
-    const image = page.getByRole('img', { name: 'logo-suite-numerique.png' });
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
 
     await expect(image).toBeVisible();
 

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -122,7 +122,9 @@ test.describe('Doc Export', () => {
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(path.join(__dirname, 'assets/test.svg'));
 
-    const image = page.getByRole('img', { name: 'test.svg' });
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
 
     await expect(image).toBeVisible();
 
@@ -182,7 +184,9 @@ test.describe('Doc Export', () => {
     const fileChooser = await fileChooserPromise;
     await fileChooser.setFiles(path.join(__dirname, 'assets/test.svg'));
 
-    const image = page.getByRole('img', { name: 'test.svg' });
+    const image = page
+      .locator('.--docs--editor-container img.bn-visual-media')
+      .first();
 
     await expect(image).toBeVisible();
 

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

@@ -169,6 +169,40 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     };
   }, [setEditor, editor]);
 
+  // Accessibility: make all images decorative by default
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+
+    const applyDecorativeAlt = () => {
+      const imgs = document.querySelectorAll<HTMLImageElement>(
+        '.--docs--editor-container img.bn-visual-media',
+      );
+      imgs.forEach((img) => {
+        img.setAttribute('alt', '');
+        img.setAttribute('role', 'presentation');
+        img.setAttribute('aria-hidden', 'true');
+      });
+    };
+
+    applyDecorativeAlt();
+
+    const unsubscribe = editor.onChange(() => {
+      applyDecorativeAlt();
+    });
+
+    return () => {
+      try {
+        if (typeof unsubscribe === 'function') {
+          unsubscribe();
+        }
+      } catch {
+        /* no-op */
+      }
+    };
+  }, [editor]);
+
   return (
     <Box
       $padding={{ top: 'md' }}