From 01c35d65eb4af39aed5e5c1a1a97401ca8878482 Mon Sep 17 00:00:00 2001
From: Sourabh Choraria <heychoraria@gmail.com>
Date: Fri, 31 Jul 2026 23:10:14 +0100
Subject: [PATCH] test(www): guard the status-badge title that the axe
 exclusion stopped checking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`playwright/axe-scope.ts` excludes the Phare status-badge iframes from the
accessibility audit, and that exclusion is right: axe walks INTO frames, a
violation inside a vendor's cross-origin document is not something we can fix,
and when the injection races it takes the whole suite with it — ~55 tests at
once, three times in two days.

But `.exclude()` drops the element AND its subtree, so axe no longer checks the
one thing about those iframes that IS ours: the `title` on the element itself.
Delete it tomorrow and the suite stays green, having been told not to look. An
exemption is only as safe as whatever replaces what it gave up, and nothing did.

Two assertions, both mutation-verified rather than assumed:

  · every status-badge iframe has a non-blank title — removing one fails it;
  · the guard and the exclusion share ONE constant, so widening the exemption to
    `iframe` fails it too. Otherwise the test would keep asserting the old shape
    while the exclusion quietly grew, and the gap would reopen in silence.

The count is pinned at two (light and dark) so the test cannot pass by matching
nothing — the failure mode where a vendor change makes the selector stop
matching is exactly when this most needs to fail.

Found while verifying a memory that said "do the exclude() fix": it had already
been done by a later session. Checking beat trusting the note, and the check
turned up the hole the fix left behind.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BRmGUnxeYsQoG9c8BCZcae
---
 .../marketing/footer-status-badge.test.tsx    | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 apps/www/src/components/marketing/footer-status-badge.test.tsx

diff --git a/apps/www/src/components/marketing/footer-status-badge.test.tsx b/apps/www/src/components/marketing/footer-status-badge.test.tsx
new file mode 100644
index 00000000..d6cecb38
--- /dev/null
+++ b/apps/www/src/components/marketing/footer-status-badge.test.tsx
@@ -0,0 +1,42 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { THIRD_PARTY_STATUS_BADGE } from "../../../playwright/axe-scope";
+
+import { Footer } from "./footer";
+
+// The hole the axe exclusion opened, closed.
+//
+// `apps/www/playwright/axe-scope.ts` excludes the Phare status-badge iframes from the accessibility
+// audit, because axe walks INTO frames and a violation inside a vendor's cross-origin document is not
+// something we can fix — it just reds the whole suite, ~55 tests at once, three times in two days.
+//
+// That exclusion is right, but `.exclude()` drops the element AND its subtree, so axe no longer checks
+// the one thing about those iframes that IS ours: the `title` on the element itself. Delete the title
+// tomorrow and the suite stays green, having been told not to look. An exemption is only as safe as
+// whatever replaces what it gave up — this is that replacement.
+describe("footer status badge", () => {
+  it("gives every status-badge iframe a title, which axe no longer checks for us", () => {
+    const { container } = render(<Footer />);
+    const badges = container.querySelectorAll(THIRD_PARTY_STATUS_BADGE);
+
+    // Anti-vacuity: if the selector stopped matching — a vendor change, a moved embed — this test would
+    // pass by finding nothing, exactly when it most needs to fail. Two variants: light and dark.
+    expect(badges.length).toBe(2);
+
+    for (const badge of badges) {
+      expect(badge.getAttribute("title")?.trim()).toBeTruthy();
+    }
+  });
+
+  it("uses the same selector the audit excludes, so the two cannot drift apart", () => {
+    // If the exclusion were widened to `iframe` or narrowed to one theme variant, this test would keep
+    // asserting the old shape and the gap would reopen silently. Sharing the constant is what prevents
+    // that: the thing we exempt and the thing we guard are one string.
+    expect(THIRD_PARTY_STATUS_BADGE).toContain("status.webhook.co");
+    const { container } = render(<Footer />);
+    expect(container.querySelectorAll("iframe").length).toBe(
+      container.querySelectorAll(THIRD_PARTY_STATUS_BADGE).length,
+    );
+  });
+});