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

Author: AntoLC

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

@@ -286,6 +286,11 @@ test.describe('Doc Editor', () => {
     expect(await image.getAttribute('src')).toMatch(
       /http:\/\/localhost:8083\/media\/.*\/attachments\/.*.png/,
     );
+
+    await expect(image).toHaveAttribute('role', 'presentation');
+    await expect(image).toHaveAttribute('alt', '');
+    await expect(image).toHaveAttribute('tabindex', '-1');
+    await expect(image).toHaveAttribute('aria-hidden', 'true');
   });
 
   test('it checks the AI buttons', async ({ page, browserName }) => {

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

@@ -33,7 +33,11 @@ import { randomColor } from '../utils';
 
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import { CalloutBlock, DividerBlock } from './custom-blocks';
+import {
+  AccessibleImageBlock,
+  CalloutBlock,
+  DividerBlock,
+} from './custom-blocks';
 import {
   InterlinkingLinkInlineContent,
   InterlinkingSearchInlineContent,
@@ -50,6 +54,7 @@ const baseBlockNoteSchema = withPageBreak(
       ...defaultBlockSpecs,
       callout: CalloutBlock,
       divider: DividerBlock,
+      image: AccessibleImageBlock,
     },
     inlineContentSpecs: {
       ...defaultInlineContentSpecs,
@@ -169,40 +174,6 @@ 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' }}

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/AccessibleImageBlock.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  BlockFromConfig,
+  BlockNoteEditor,
+  createBlockSpec,
+  imageBlockConfig,
+  imageParse,
+  imageRender,
+  imageToExternalHTML,
+} from '@blocknote/core';
+
+export const accessibleImageRender = (
+  block: BlockFromConfig<typeof imageBlockConfig, any, any>,
+  editor: BlockNoteEditor<any, any, any>,
+) => {
+  const imageRenderComputed = imageRender(block, editor);
+  const dom = imageRenderComputed.dom;
+  const imgSelector = dom.querySelector('img');
+
+  imgSelector?.setAttribute('alt', '');
+  imgSelector?.setAttribute('role', 'presentation');
+  imgSelector?.setAttribute('aria-hidden', 'true');
+  imgSelector?.setAttribute('tabindex', '-1');
+
+  return {
+    ...imageRenderComputed,
+    dom,
+  };
+};
+
+export const AccessibleImageBlock = createBlockSpec(imageBlockConfig, {
+  render: accessibleImageRender,
+  parse: imageParse,
+  toExternalHTML: imageToExternalHTML,
+});

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts

@@ -1,2 +1,3 @@
+export * from './AccessibleImageBlock';
 export * from './CalloutBlock';
 export * from './DividerBlock';