diff --git a/packages/email-renderer/package.json b/packages/email-renderer/package.json
index e535af8f..bcf2e4b8 100644
--- a/packages/email-renderer/package.json
+++ b/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": {
diff --git a/packages/email-renderer/src/blocks.ts b/packages/email-renderer/src/blocks.ts
index 091dcd56..31926479 100644
--- a/packages/email-renderer/src/blocks.ts
+++ b/packages/email-renderer/src/blocks.ts
@@ -382,7 +382,7 @@ export const imageBlock = leaf(
node,
),
mjml: ({ node }) =>
- ``,
+ ``,
},
({ node }) => (attrs(node).decorative ? "" : `[${String(attrs(node).alt)}]\n\n`),
);
diff --git a/packages/email-renderer/src/mjml.ts b/packages/email-renderer/src/mjml.ts
index 1d693777..c86070cf 100644
--- a/packages/email-renderer/src/mjml.ts
+++ b/packages/email-renderer/src/mjml.ts
@@ -240,8 +240,8 @@ export function importMjml(
type: "content.image",
version: 1,
props: {
- src: a.src ?? "",
- alt: a.alt ?? "",
+ src: decode(a.src ?? ""),
+ alt: decode(a.alt ?? ""),
width: (a.width ?? "600").replace(/px$/, ""),
height: (a.height ?? "300").replace(/px$/, ""),
decorative: false,
diff --git a/packages/email-renderer/test/image-accessibility.test.ts b/packages/email-renderer/test/image-accessibility.test.ts
new file mode 100644
index 00000000..b7d71d30
--- /dev/null
+++ b/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");
+});