Preserve image accessibility and dimensions in MJML

packages/email-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/email-renderer",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "type": "module",
   "description": "WRNexus block email renderers with HTML, text, AMP Email, and MJML interoperability.",
   "exports": {

packages/email-renderer/src/blocks.ts

@@ -382,7 +382,7 @@ export const imageBlock = leaf(
         node,
       ),
     mjml: ({ node }) =>
-      `<mj-image src="${html(attrs(node).src)}" alt="${html(attrs(node).alt)}" width="${html(attrs(node).width)}px" />`,
+      `<mj-image src="${html(attrs(node).src)}" alt="${html(attrs(node).decorative ? "" : attrs(node).alt)}" width="${html(attrs(node).width)}px" height="${html(attrs(node).height)}px" />`,
   },
   ({ node }) => (attrs(node).decorative ? "" : `[${String(attrs(node).alt)}]\n\n`),
 );

packages/email-renderer/src/mjml.ts

@@ -240,8 +240,8 @@ export function importMjml(
           type: "content.image",
           version: 1,
           props: {
-            src: a.src ?? "",
+            src: decode(a.src ?? ""),
-            alt: a.alt ?? "",
+            alt: decode(a.alt ?? ""),
             width: (a.width ?? "600").replace(/px$/, ""),
             height: (a.height ?? "300").replace(/px$/, ""),
             decorative: false,

packages/email-renderer/test/image-accessibility.test.ts

@@ -0,0 +1,28 @@
+import { expect, test } from "bun:test";
+import type { BlockDocument, BlockNode } from "@wrnexus/blocks";
+import { renderEmail, importMjml } from "../src/index.ts";
+
+const documentFor = (decorative: boolean): BlockDocument => ({ schemaVersion: 1, kind: "email", meta: { subject: "Images" }, theme: { tokens: {} }, root: { id: "root", type: "layout.email-document", version: 1, props: { width: "600" }, styles: {}, slots: { content: [{ id: "image", type: "content.image", version: 1, props: { src: "https://example.com/image.png", alt: "Accessible & descriptive", width: "320", height: "180", decorative }, styles: {}, slots: {} }] } } });
+
+test("decorative image descriptions stay omitted across HTML text and MJML", async () => {
+  const rendered = await renderEmail(documentFor(true), { mjml: true });
+  if (!rendered.ok) throw new Error("Render failed");
+  expect(rendered.value.parts.html.content).toContain('alt=""');
+  expect(rendered.value.parts.text.content).not.toContain("Accessible");
+  expect(rendered.value.exports!.mjml).toContain('alt=""');
+  expect(rendered.value.exports!.mjml).not.toContain("Accessible");
+});
+
+test("meaningful image alt and explicit dimensions survive MJML round trip", async () => {
+  const rendered = await renderEmail(documentFor(false), { mjml: true });
+  if (!rendered.ok) throw new Error("Render failed");
+  expect(rendered.value.parts.text.content).toContain("Accessible & descriptive");
+  expect(rendered.value.exports!.mjml).toContain('width="320px" height="180px"');
+  let id = 0;
+  const imported = importMjml(rendered.value.exports!.mjml!, { id: () => `n${++id}` });
+  if (!imported.ok) throw new Error("Import failed");
+  const find = (node: BlockNode): BlockNode | undefined => node.type === "content.image" ? node : Object.values(node.slots).flat().map(find).find(Boolean);
+  expect(find(imported.value.root)!.props.width).toBe("320");
+  expect(find(imported.value.root)!.props.height).toBe("180");
+  expect(find(imported.value.root)!.props.alt).toBe("Accessible & descriptive");
+});