✨(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 <c.gromoff@gmail.com>

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,

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

@@ -0,0 +1,43 @@
+import {
+  BlockFromConfig,
+  BlockNoteEditor,
+  BlockSchemaWithBlock,
+  InlineContentSchema,
+  StyleSchema,
+  createBlockSpec,
+  imageBlockConfig,
+  imageParse,
+  imageRender,
+  imageToExternalHTML,
+} from '@blocknote/core';
+
+type ImageBlockConfig = typeof imageBlockConfig;
+
+export const accessibleImageRender = (
+  block: BlockFromConfig<ImageBlockConfig, InlineContentSchema, StyleSchema>,
+  editor: BlockNoteEditor<
+    BlockSchemaWithBlock<ImageBlockConfig['type'], ImageBlockConfig>,
+    InlineContentSchema,
+    StyleSchema
+  >,
+) => {
+  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';