From 860bef7e82e834f2e8ae8a0fe9b240bd36b245d5 Mon Sep 17 00:00:00 2001
From: Timur Mashara <62305878+tmashara@users.noreply.github.com>
Date: Thu, 5 Nov 2026 17:30:28 +0100
Subject: [PATCH] report: captions say which side is the change and which the
 reference
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

left and right didn't say which build was which, while --markdown says
before and after. Captions and both meta lines now read left · change
and right · reference, and the slider's label says the same. Left is the
change and right the reference in every mode, so nothing is configured.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/report.ts             | 12 +++++++-----
 tests/unit/report.test.ts | 13 +++++++++++++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/report.ts b/src/report.ts
index f464b3c..b842f52 100644
--- a/src/report.ts
+++ b/src/report.ts
@@ -492,20 +492,22 @@ const head = (r: ComparedResult) => `
     <span class="px">${r.diffPixels.toLocaleString()} / ${r.totalPixels.toLocaleString()} px differ</span>
   </header>`;
 
+const ROLE = { left: "left · change", right: "right · reference" };
+
 function card(r: ComparedResult): string {
   const imgs = r.images;
   return `
 <article class="card" id="${esc(cardId(r))}">${head(r)}
   ${findings(r)}
   <div class="grid">
-    <figure><figcaption>left</figcaption><a href="${imgs.left}" target="_blank"><img loading="lazy" src="${imgs.left}"></a></figure>
-    <figure><figcaption>right</figcaption><a href="${imgs.right}" target="_blank"><img loading="lazy" src="${imgs.right}"></a></figure>
+    <figure><figcaption>${ROLE.left}</figcaption><a href="${imgs.left}" target="_blank"><img loading="lazy" src="${imgs.left}"></a></figure>
+    <figure><figcaption>${ROLE.right}</figcaption><a href="${imgs.right}" target="_blank"><img loading="lazy" src="${imgs.right}"></a></figure>
     <figure><figcaption>diff</figcaption>${imgs.diff ? `<a href="${imgs.diff}" target="_blank"><img loading="lazy" src="${imgs.diff}"></a>` : `<p class="nodiff">no differing pixels</p>`}</figure>
   </div>
   <div class="slider" style="--x:50%">
     <img loading="lazy" src="${imgs.right}">
     <div class="l"><img loading="lazy" src="${imgs.left}"></div>
-    <input type="range" value="50" aria-label="Divider: left shot on the left, right shot on the right">
+    <input type="range" value="50" aria-label="Divider: your change on the left, the reference on the right">
   </div>
 </article>`;
 }
@@ -658,7 +660,7 @@ ${sidebar(results, meta.threshold)}
 <main>
 <h1>Visual diff</h1>
 <p class="meta">
-  left <code>${esc(meta.left)}</code> vs right <code>${esc(meta.right)}</code><br>
+  ${ROLE.left} <code>${esc(meta.left)}</code> vs ${ROLE.right} <code>${esc(meta.right)}</code><br>
   ${esc(meta.generatedAt)} &middot; ${esc(meta.browser.name)} ${esc(meta.browser.version)}${(
     ["left", "right"] as const
   )
@@ -780,7 +782,7 @@ ${STYLE}
 
 <h1>${esc(title)}</h1>
 <p class="meta">
-  left <code>${esc(meta.left)}</code> vs right <code>${esc(meta.right)}</code><br>
+  ${ROLE.left} <code>${esc(meta.left)}</code> vs ${ROLE.right} <code>${esc(meta.right)}</code><br>
   ${esc(meta.generatedAt)} &middot; renderdiff ${esc(meta.version)} &middot;
   widths ${meta.widths.join(", ")} &middot;
   threshold ${meta.threshold === null ? "none" : pct(meta.threshold)} &middot;
diff --git a/tests/unit/report.test.ts b/tests/unit/report.test.ts
index ee94072..fe90015 100644
--- a/tests/unit/report.test.ts
+++ b/tests/unit/report.test.ts
@@ -313,6 +313,19 @@ describe("writeReport", () => {
     );
   });
 
+  test("the report and evidence name left as the change and right as the reference", async () => {
+    const html = await report([at("/a", 1440)]);
+    const sides =
+      /left · change <code>http:\/\/localhost:3000<\/code> vs right · reference <code>https:\/\/example\.com<\/code>/;
+    assert.match(html, sides);
+    assert.match(await evidence([at("/a", 1440)]), sides);
+    assert.deepEqual(
+      [...html.matchAll(/<figcaption>([^<]+)/g)].map((m) => m[1]),
+      ["left · change", "right · reference", "diff"],
+    );
+    assert.match(html, /aria-label="Divider: your change on the left, the reference on the right"/);
+  });
+
   test("a packed zero-diff card says so in place of the diff image", async () => {
     const images = { left: "a.1440.left.webp", right: "a.1440.left.webp" };
     const html = await report([at("/a", 1440, { images })]);