@lullabot/playwright-testing 1.0.1 → 1.2.0

package/README.md

@@ -1,7 +1,8 @@
 # `@lullabot/playwright-testing`
 
 Framework-neutral utilities for stable Playwright screenshots, accessibility
-baselines, URL-driven visual comparisons, and GitHub reporting.
+baselines, URL-driven visual comparisons, WebKit autofocus stabilization, and
+GitHub reporting.
 
 This package is developed in the
 [`playwright-drupal` monorepo](https://github.com/Lullabot/playwright-drupal),
@@ -24,7 +25,8 @@ version.
 
 - `@lullabot/playwright-testing` exports screenshot stabilization,
   accessibility checks and baselines, visual-diff definitions, interaction and
-  pseudo-state helpers, and reusable mocks.
+  pseudo-state helpers, reusable mocks, and the `suppressWebKitAutofocus()` init
+  script (installed explicitly in WebKit contexts).
 - `@lullabot/playwright-testing/github` exports the optional GitHub report,
   attachment-upload, and path-remapping APIs.
 - `playwright-testing-a11y-summary` and
@@ -47,9 +49,10 @@ test('home page', async ({ page }, testInfo) => {
 
 ## Guides
 
-- [Accessibility testing](https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/accessibility.md)
-- [Stable screenshots and visual comparisons](https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/screenshots-and-visual-comparisons.md)
-- [GitHub reporting](https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/github-reporting.md)
+- [Accessibility testing][testing-accessibility]
+- [Stable screenshots and visual comparisons][testing-screenshots]
+- [WebKit native autofocus workaround][testing-webkit-autofocus]
+- [GitHub reporting][testing-github-reporting]
 
 ## Drupal compatibility
 
@@ -59,3 +62,8 @@ visual-diff calls with its Drupal preset. New framework-neutral code can import
 this package directly; Drupal tests that depend on database isolation, Drush,
 login helpers, or the `a11y` fixture should continue importing the Drupal
 package.
+
+[testing-accessibility]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/accessibility.md
+[testing-screenshots]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/screenshots-and-visual-comparisons.md
+[testing-github-reporting]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/github-reporting.md
+[testing-webkit-autofocus]: https://github.com/Lullabot/playwright-drupal/blob/main/packages/playwright-testing/docs/webkit-autofocus.md

package/lib/accessible-screenshot.js

@@ -38,6 +38,9 @@ async function checkAccessibility(page, testInfo, options) {
     if (!testInfo.annotations.some((a) => a.type === "@a11y")) {
         testInfo.annotations.push({ type: "@a11y" });
     }
+    // An in-code baseline is shared by both scans. Track matches across this
+    // check so that a rule detected by either scan is not reported as stale.
+    const sharedBaselineMatches = new Set();
     if (bestPracticeMode !== "off") {
         const bpResults = await runBestPracticeScan(page, testInfo, {
             exclude: [...exclude, ...bestPracticeExclude],
@@ -52,7 +55,7 @@ async function checkAccessibility(page, testInfo, options) {
             scan: "best-practice",
             expectFn: test_1.expect.soft,
             scanLabel: "Best-practice scan",
-        }, baseline);
+        }, baseline, sharedBaselineMatches);
     }
     const wcagScanResults = await runWcagScan(page, testInfo, {
         wcagTags,
@@ -68,7 +71,7 @@ async function checkAccessibility(page, testInfo, options) {
         scan: "wcag",
         expectFn: test_1.expect,
         scanLabel: "WCAG scan",
-    }, baseline);
+    }, baseline, sharedBaselineMatches);
 }
 /**
  * Dispatch the assertion for one scan to the correct mode:
@@ -85,9 +88,9 @@ async function checkAccessibility(page, testInfo, options) {
  *    test (matching Playwright's missing-snapshot behaviour); locally,
  *    seeding passes so the first run is green.
  */
-async function dispatchAssertion(ctx, inCodeBaseline) {
+async function dispatchAssertion(ctx, inCodeBaseline, sharedBaselineMatches) {
     if (inCodeBaseline) {
-        return assertBaseline(ctx, inCodeBaseline);
+        return assertBaseline(ctx, inCodeBaseline, sharedBaselineMatches);
     }
     if (await (0, accessibility_baseline_file_js_1.snapshotExists)(ctx.testInfo)) {
         return assertSnapshot(ctx);
@@ -214,7 +217,7 @@ async function screenshotViolatingElements(page, testInfo, results) {
 /**
  * Assert violations against a baseline allowlist (in-code or on-disk).
  */
-function assertBaseline(ctx, baseline) {
+function assertBaseline(ctx, baseline, sharedBaselineMatches) {
     (0, accessibility_baseline_js_1.validateAccessibilityBaseline)(baseline);
     const { testInfo, results, scanLabel, expectFn } = ctx;
     const allViolations = extractNormalizedViolations(results);
@@ -229,6 +232,7 @@ function assertBaseline(ctx, baseline) {
         });
         if (baselineIndex >= 0) {
             matchedBaselineIndices.add(baselineIndex);
+            sharedBaselineMatches?.add(baselineIndex);
             const entry = baseline[baselineIndex];
             testInfo.annotations.push({
                 type: "Baselined a11y violation",
@@ -239,15 +243,21 @@ function assertBaseline(ctx, baseline) {
             unmatchedViolations.push(violation);
         }
     }
-    // Report stale baseline entries.
-    baseline.forEach((entry, idx) => {
-        if (!matchedBaselineIndices.has(idx)) {
-            testInfo.annotations.push({
-                type: "Stale a11y baseline entry",
-                description: `${entry.rule} on ${entry.targets.join(", ")} — no longer detected`,
-            });
-        }
-    });
+    // The WCAG scan always runs last, even when best-practice is disabled.
+    // Report shared entries once after both scans have contributed matches,
+    // before the hard assertion can throw. On-disk baselines belong to one
+    // scan and continue to report stale entries independently.
+    if (!sharedBaselineMatches || ctx.scan === "wcag") {
+        const matches = sharedBaselineMatches ?? matchedBaselineIndices;
+        baseline.forEach((entry, idx) => {
+            if (!matches.has(idx)) {
+                testInfo.annotations.push({
+                    type: "Stale a11y baseline entry",
+                    description: `${entry.rule} on ${entry.targets.join(", ")} — no longer detected`,
+                });
+            }
+        });
+    }
     // Summary annotation for baseline mode.
     const baselinedCount = matchedBaselineIndices.size;
     testInfo.annotations.push({

package/lib/github/failure-summary.js

@@ -292,7 +292,7 @@ function headline(report) {
     // seeing — a baselined violation passes and is still screenshotted.
     const parts = report.totalFailed === 0
         ? [":white_check_mark: No failing tests"]
-        : [`**${report.totalFailed}** failing test(s)`];
+        : [`:x: **${report.totalFailed}** failing test(s)`];
     if (report.totalFlaky > 0)
         parts.push(`:warning: **${report.totalFlaky}** flaky test(s)`);
     if (report.totalImages > 0)

package/lib/index.d.ts

@@ -11,3 +11,4 @@ export * from "./pseudo-state.js";
 export * from "./videos.js";
 export * from "./visualdiff.js";
 export * from "./mock/index.js";
+export * from "./webkit-autofocus.js";

package/lib/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./pseudo-state.js"), exports);
 __exportStar(require("./videos.js"), exports);
 __exportStar(require("./visualdiff.js"), exports);
 __exportStar(require("./mock/index.js"), exports);
+__exportStar(require("./webkit-autofocus.js"), exports);

package/lib/webkit-autofocus.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Runs in each document via BrowserContext.addInitScript(). Keep self-contained.
+ *
+ * WebKit queues autofocus on insertion, without rechecking the attribute later.
+ * Make candidates unfocusable until flushAutofocusCandidates has discarded them.
+ * Page::updateRendering flushes autofocus BEFORE animation-frame callbacks; a
+ * parser waiting for stylesheets can defer that flush, so wait for the top
+ * document's DOMContentLoaded first. This intentionally suppresses document
+ * autofocus, rather than replacing Playwright's focus/selection/input behavior.
+ *
+ * See docs/webkit-autofocus.md for scope and tradeoffs.
+ *
+ * Install only in WebKit contexts, before pages navigate:
+ * `await context.addInitScript(suppressWebKitAutofocus)`.
+ */
+export declare function suppressWebKitAutofocus(): void;

package/lib/webkit-autofocus.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.suppressWebKitAutofocus = suppressWebKitAutofocus;
+/**
+ * Runs in each document via BrowserContext.addInitScript(). Keep self-contained.
+ *
+ * WebKit queues autofocus on insertion, without rechecking the attribute later.
+ * Make candidates unfocusable until flushAutofocusCandidates has discarded them.
+ * Page::updateRendering flushes autofocus BEFORE animation-frame callbacks; a
+ * parser waiting for stylesheets can defer that flush, so wait for the top
+ * document's DOMContentLoaded first. This intentionally suppresses document
+ * autofocus, rather than replacing Playwright's focus/selection/input behavior.
+ *
+ * See docs/webkit-autofocus.md for scope and tradeoffs.
+ *
+ * Install only in WebKit contexts, before pages navigate:
+ * `await context.addInitScript(suppressWebKitAutofocus)`.
+ */
+function suppressWebKitAutofocus() {
+    let topDocument;
+    try {
+        topDocument = window.top.document;
+    }
+    catch {
+        // WebKit already rejects native autofocus candidates in cross-origin frames.
+        return;
+    }
+    const pending = new Map();
+    const candidates = new WeakSet();
+    let scheduled = false;
+    function restoreAfterFlush() {
+        requestAnimationFrame(() => {
+            scheduled = false;
+            for (const [element, original] of pending) {
+                if (element.style.getPropertyValue(original.property) ===
+                    original.temporary &&
+                    element.style.getPropertyPriority(original.property) === "important") {
+                    if (original.value) {
+                        element.style.setProperty(original.property, original.value, original.priority);
+                    }
+                    else {
+                        element.style.removeProperty(original.property);
+                    }
+                    // Synchronize WebKit's serialized style attribute before removing it.
+                    if (!original.hadStyle && !element.getAttribute("style")) {
+                        element.removeAttribute("style");
+                    }
+                }
+            }
+            pending.clear();
+        });
+    }
+    function quarantine(element) {
+        if (element.namespaceURI !== "http://www.w3.org/1999/xhtml")
+            return;
+        // Remember detached candidates too: the parser may still be blocking their
+        // queued opportunity when they are reinserted without the attribute.
+        candidates.add(element);
+        if (!element.isConnected)
+            return;
+        const candidate = element;
+        if (!pending.has(candidate)) {
+            // Keep normal form controls in layout. Hide other candidates' subtrees
+            // entirely, including hosts whose shadow roots might delegate focus.
+            const isControl = /^(input|textarea|select|button)$/.test(candidate.localName);
+            const property = isControl ? "visibility" : "display";
+            const temporary = isControl ? "hidden" : "none";
+            // Capture attribute presence before changing its CSSStyleDeclaration.
+            const hadStyle = candidate.hasAttribute("style");
+            pending.set(candidate, {
+                property,
+                temporary,
+                value: candidate.style.getPropertyValue(property),
+                priority: candidate.style.getPropertyPriority(property),
+                hadStyle,
+            });
+            candidate.style.setProperty(property, temporary, "important");
+        }
+        if (scheduled)
+            return;
+        scheduled = true;
+        if (topDocument.readyState === "loading") {
+            topDocument.addEventListener("DOMContentLoaded", restoreAfterFlush, {
+                once: true,
+            });
+        }
+        else {
+            restoreAfterFlush();
+        }
+    }
+    function scan(node) {
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return;
+        const element = node;
+        if (element.hasAttribute("autofocus") || candidates.has(element))
+            quarantine(element);
+        element.querySelectorAll("*").forEach((descendant) => {
+            if (descendant.hasAttribute("autofocus") || candidates.has(descendant))
+                quarantine(descendant);
+        });
+    }
+    new MutationObserver((records) => {
+        for (const record of records) {
+            if (record.type === "childList") {
+                record.addedNodes.forEach(scan);
+            }
+            else if (record.attributeName === "style") {
+                const element = record.target;
+                const original = pending.get(element);
+                if (original &&
+                    (element.style.getPropertyValue(original.property) !==
+                        original.temporary ||
+                        element.style.getPropertyPriority(original.property) !==
+                            "important")) {
+                    // Keep the candidate hidden through the flush even if application
+                    // code changes its styles in the meantime. Restore the latest value.
+                    original.value = element.style.getPropertyValue(original.property);
+                    original.priority = element.style.getPropertyPriority(original.property);
+                    original.hadStyle = element.hasAttribute("style");
+                    element.style.setProperty(original.property, original.temporary, "important");
+                }
+            }
+            else {
+                // Also catch an attribute removed synchronously after insertion, before
+                // observer delivery: its native candidate is still in WebKit's queue.
+                quarantine(record.target);
+            }
+        }
+    }).observe(document, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["autofocus", "style"],
+    });
+    document.querySelectorAll("[autofocus]").forEach(quarantine);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lullabot/playwright-testing",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Framework-neutral Playwright testing utilities",
   "license": "Apache-2.0",
   "repository": {
@@ -33,7 +33,8 @@
   "scripts": {
     "build": "tsc",
     "prepack": "npm run build",
-    "test": "vitest run --passWithNoTests"
+    "test": "vitest run --passWithNoTests",
+    "test:autofocus": "playwright test --config tests/webkit-autofocus/playwright.config.ts"
   },
   "dependencies": {
     "@axe-core/playwright": "^4.8.5",

package/src/accessibility-baseline.test.ts

@@ -305,6 +305,175 @@ describe("accessibility baseline", () => {
       expect(staleAnnotations[0].description).toContain("#old-element");
       expect(staleAnnotations[0].description).toContain("no longer detected");
     });
+
+    it.each([
+      { name: "best-practice", bp: ["page-has-heading-one"], wcag: [] },
+      { name: "WCAG", bp: [], wcag: ["image-alt"] },
+      { name: "both scans", bp: ["page-has-heading-one"], wcag: ["image-alt"] },
+    ])(
+      "does not mark entries matched by $name as stale",
+      async ({ bp, wcag }) => {
+        const rules = [...bp, ...wcag];
+        const baseline: AccessibilityBaseline = rules.map((rule) => ({
+          rule,
+          targets: ["#known"],
+          reason: "Known issue",
+          willBeFixedIn: "PROJ-353",
+        }));
+        mockAnalyze
+          .mockResolvedValueOnce(
+            makeAxeResults({
+              violations: bp.map((rule) => makeViolation(rule, [["#known"]])),
+            }),
+          )
+          .mockResolvedValueOnce(
+            makeAxeResults({
+              violations: wcag.map((rule) => makeViolation(rule, [["#known"]])),
+            }),
+          );
+
+        const testInfo = makeTestInfo();
+        await checkAccessibility(makePage() as any, testInfo as any, {
+          baseline,
+        });
+
+        expect(
+          testInfo.annotations.filter(
+            (a) => a.type === "Stale a11y baseline entry",
+          ),
+        ).toEqual([]);
+        expect(
+          testInfo.annotations.filter(
+            (a) => a.type === "Baselined a11y violation",
+          ),
+        ).toHaveLength(rules.length);
+        expect(
+          testInfo.annotations.filter((a) =>
+            a.description?.includes("new violations"),
+          ),
+        ).toEqual([
+          {
+            type: "Accessibility",
+            description: `Best-practice scan: 0 new violations (${bp.length} baselined)`,
+          },
+          {
+            type: "Accessibility",
+            description: `WCAG scan: 0 new violations (${wcag.length} baselined)`,
+          },
+        ]);
+        expect(mockToBe).not.toHaveBeenCalled();
+      },
+    );
+
+    it("reports entries unmatched by either scan only once", async () => {
+      const testInfo = makeTestInfo();
+      await checkAccessibility(makePage() as any, testInfo as any, {
+        baseline: [
+          {
+            rule: "page-has-heading-one",
+            targets: ["html"],
+            reason: "Was broken",
+            willBeFixedIn: "PROJ-353",
+          },
+        ],
+      });
+
+      expect(
+        testInfo.annotations.filter(
+          (a) => a.type === "Stale a11y baseline entry",
+        ),
+      ).toEqual([
+        {
+          type: "Stale a11y baseline entry",
+          description: "page-has-heading-one on html — no longer detected",
+        },
+      ]);
+    });
+
+    it("does not carry baseline matches into later checks in the same test", async () => {
+      const baseline: AccessibilityBaseline = [
+        {
+          rule: "page-has-heading-one",
+          targets: ["html"],
+          reason: "Known issue",
+          willBeFixedIn: "PROJ-353",
+        },
+      ];
+      mockAnalyze.mockResolvedValueOnce(
+        makeAxeResults({
+          violations: [makeViolation("page-has-heading-one", [["html"]])],
+        }),
+      );
+      const testInfo = makeTestInfo();
+      await checkAccessibility(makePage() as any, testInfo as any, {
+        baseline,
+      });
+      expect(
+        testInfo.annotations.filter(
+          (a) => a.type === "Stale a11y baseline entry",
+        ),
+      ).toEqual([]);
+
+      await checkAccessibility(makePage() as any, testInfo as any, {
+        baseline,
+      });
+      expect(
+        testInfo.annotations.filter(
+          (a) => a.type === "Stale a11y baseline entry",
+        ),
+      ).toHaveLength(1);
+    });
+
+    it("reports stale entries before an unmatched WCAG violation throws", async () => {
+      const baseline: AccessibilityBaseline = [
+        {
+          rule: "page-has-heading-one",
+          targets: ["html"],
+          reason: "Known issue",
+          willBeFixedIn: "PROJ-353",
+        },
+        {
+          rule: "heading-order",
+          targets: ["h3"],
+          reason: "Was broken",
+          willBeFixedIn: "PROJ-354",
+        },
+      ];
+      mockAnalyze
+        .mockResolvedValueOnce(
+          makeAxeResults({
+            violations: [makeViolation("page-has-heading-one", [["html"]])],
+          }),
+        )
+        .mockResolvedValueOnce(
+          makeAxeResults({
+            violations: [makeViolation("image-alt", [["img"]])],
+          }),
+        );
+      mockToBe.mockImplementationOnce(() => {
+        throw new Error("new WCAG violation");
+      });
+      const testInfo = makeTestInfo();
+
+      await expect(
+        checkAccessibility(makePage() as any, testInfo as any, { baseline }),
+      ).rejects.toThrow("new WCAG violation");
+
+      expect(
+        testInfo.annotations.filter(
+          (a) => a.type === "Stale a11y baseline entry",
+        ),
+      ).toEqual([
+        {
+          type: "Stale a11y baseline entry",
+          description: "heading-order on h3 — no longer detected",
+        },
+      ]);
+      expect(mockExpectHard).toHaveBeenCalledWith(
+        null,
+        expect.stringContaining("image-alt"),
+      );
+    });
   });
 
   describe("snapshot bypass", () => {
@@ -699,6 +868,73 @@ describe("accessibility baseline", () => {
       ).rejects.toThrow("requires a reason");
     });
 
+    it("keeps stale detection independent for each scan-specific on-disk baseline", async () => {
+      const fs = await import("fs");
+      const path = await import("path");
+      await fs.promises.writeFile(
+        path.join(tmpDir, "separate-scans-1.a11y-baseline-best-practice.json"),
+        JSON.stringify({
+          note: "Known best-practice violation.",
+          violations: [
+            {
+              rule: "page-has-heading-one",
+              targets: ["html"],
+              reason: "Known",
+              willBeFixedIn: "PROJ-353",
+            },
+          ],
+        }),
+      );
+      await fs.promises.writeFile(
+        path.join(tmpDir, "separate-scans-1.a11y-baseline.json"),
+        JSON.stringify({
+          note: "Previously broken image.",
+          violations: [
+            {
+              rule: "image-alt",
+              targets: ["img"],
+              reason: "Was broken",
+              willBeFixedIn: "PROJ-354",
+            },
+          ],
+        }),
+      );
+      mockAnalyze.mockResolvedValueOnce(
+        makeAxeResults({
+          violations: [makeViolation("page-has-heading-one", [["html"]])],
+        }),
+      );
+
+      const testInfo = makeTestInfo({
+        updateSnapshots: "none",
+        snapshotsDir: tmpDir,
+        title: "separate scans",
+      });
+      await checkAccessibility(makePage() as any, testInfo as any);
+
+      expect(
+        testInfo.annotations.filter(
+          (a) => a.type === "Baselined a11y violation",
+        ),
+      ).toEqual([
+        {
+          type: "Baselined a11y violation",
+          description: "page-has-heading-one: Known — PROJ-353",
+        },
+      ]);
+      expect(
+        testInfo.annotations.filter(
+          (a) => a.type === "Stale a11y baseline entry",
+        ),
+      ).toEqual([
+        {
+          type: "Stale a11y baseline entry",
+          description: "image-alt on img — no longer detected",
+        },
+      ]);
+      expect(mockToBe).not.toHaveBeenCalled();
+    });
+
     it("produces per-call counter files for multi-call tests", async () => {
       mockAnalyze.mockResolvedValue(makeAxeResults({ violations: [] }));
 

package/src/accessible-screenshot.ts

@@ -253,6 +253,10 @@ export async function checkAccessibility(
     testInfo.annotations.push({ type: "@a11y" });
   }
 
+  // An in-code baseline is shared by both scans. Track matches across this
+  // check so that a rule detected by either scan is not reported as stale.
+  const sharedBaselineMatches = new Set<number>();
+
   if (bestPracticeMode !== "off") {
     const bpResults = await runBestPracticeScan(page, testInfo, {
       exclude: [...exclude, ...bestPracticeExclude],
@@ -270,6 +274,7 @@ export async function checkAccessibility(
         scanLabel: "Best-practice scan",
       },
       baseline,
+      sharedBaselineMatches,
     );
   }
 
@@ -292,6 +297,7 @@ export async function checkAccessibility(
       scanLabel: "WCAG scan",
     },
     baseline,
+    sharedBaselineMatches,
   );
 }
 
@@ -321,9 +327,10 @@ interface ScanContext {
 async function dispatchAssertion(
   ctx: ScanContext,
   inCodeBaseline?: AccessibilityBaseline,
+  sharedBaselineMatches?: Set<number>,
 ): Promise<void> {
   if (inCodeBaseline) {
-    return assertBaseline(ctx, inCodeBaseline);
+    return assertBaseline(ctx, inCodeBaseline, sharedBaselineMatches);
   }
 
   if (await snapshotExists(ctx.testInfo)) {
@@ -497,7 +504,11 @@ async function screenshotViolatingElements(
 /**
  * Assert violations against a baseline allowlist (in-code or on-disk).
  */
-function assertBaseline(ctx: ScanContext, baseline: AccessibilityBaseline) {
+function assertBaseline(
+  ctx: ScanContext,
+  baseline: AccessibilityBaseline,
+  sharedBaselineMatches?: Set<number>,
+) {
   validateAccessibilityBaseline(baseline);
   const { testInfo, results, scanLabel, expectFn } = ctx;
   const allViolations = extractNormalizedViolations(results);
@@ -517,6 +528,7 @@ function assertBaseline(ctx: ScanContext, baseline: AccessibilityBaseline) {
 
     if (baselineIndex >= 0) {
       matchedBaselineIndices.add(baselineIndex);
+      sharedBaselineMatches?.add(baselineIndex);
       const entry = baseline[baselineIndex];
       testInfo.annotations.push({
         type: "Baselined a11y violation",
@@ -527,15 +539,21 @@ function assertBaseline(ctx: ScanContext, baseline: AccessibilityBaseline) {
     }
   }
 
-  // Report stale baseline entries.
-  baseline.forEach((entry, idx) => {
-    if (!matchedBaselineIndices.has(idx)) {
-      testInfo.annotations.push({
-        type: "Stale a11y baseline entry",
-        description: `${entry.rule} on ${entry.targets.join(", ")} — no longer detected`,
-      });
-    }
-  });
+  // The WCAG scan always runs last, even when best-practice is disabled.
+  // Report shared entries once after both scans have contributed matches,
+  // before the hard assertion can throw. On-disk baselines belong to one
+  // scan and continue to report stale entries independently.
+  if (!sharedBaselineMatches || ctx.scan === "wcag") {
+    const matches = sharedBaselineMatches ?? matchedBaselineIndices;
+    baseline.forEach((entry, idx) => {
+      if (!matches.has(idx)) {
+        testInfo.annotations.push({
+          type: "Stale a11y baseline entry",
+          description: `${entry.rule} on ${entry.targets.join(", ")} — no longer detected`,
+        });
+      }
+    });
+  }
 
   // Summary annotation for baseline mode.
   const baselinedCount = matchedBaselineIndices.size;

package/src/github/failure-summary.test.ts

@@ -245,6 +245,7 @@ describe("generateSummary", () => {
     // attachment resolves, and that dead render is cached for good.
     const summary = generateSummary(reportWith("https://example.test/a"));
 
+    expect(summary).toContain(":x: **1** failing test(s)");
     expect(summary).not.toContain("<img");
     expect(summary).toContain(
       "1 screenshot(s) uploaded — see the pull request comment.",
@@ -396,7 +397,7 @@ describe("generateComment", () => {
       summaryUrl: "https://example.test/run/1",
     });
 
-    expect(comment).toContain("**1** failing test(s)");
+    expect(comment).toContain(":x: **1** failing test(s)");
     expect(comment).toContain("homepage matches");
     expect(comment).toContain("(https://example.test/run/1)");
   });

package/src/github/failure-summary.ts

@@ -382,7 +382,7 @@ function headline(report: FailureReport): string {
   const parts =
     report.totalFailed === 0
       ? [":white_check_mark: No failing tests"]
-      : [`**${report.totalFailed}** failing test(s)`];
+      : [`:x: **${report.totalFailed}** failing test(s)`];
 
   if (report.totalFlaky > 0)
     parts.push(`:warning: **${report.totalFlaky}** flaky test(s)`);

package/src/index.ts

@@ -11,3 +11,4 @@ export * from "./pseudo-state.js";
 export * from "./videos.js";
 export * from "./visualdiff.js";
 export * from "./mock/index.js";
+export * from "./webkit-autofocus.js";

package/src/webkit-autofocus.ts

@@ -0,0 +1,154 @@
+/**
+ * Runs in each document via BrowserContext.addInitScript(). Keep self-contained.
+ *
+ * WebKit queues autofocus on insertion, without rechecking the attribute later.
+ * Make candidates unfocusable until flushAutofocusCandidates has discarded them.
+ * Page::updateRendering flushes autofocus BEFORE animation-frame callbacks; a
+ * parser waiting for stylesheets can defer that flush, so wait for the top
+ * document's DOMContentLoaded first. This intentionally suppresses document
+ * autofocus, rather than replacing Playwright's focus/selection/input behavior.
+ *
+ * See docs/webkit-autofocus.md for scope and tradeoffs.
+ *
+ * Install only in WebKit contexts, before pages navigate:
+ * `await context.addInitScript(suppressWebKitAutofocus)`.
+ */
+export function suppressWebKitAutofocus(): void {
+  let topDocument: Document;
+  try {
+    topDocument = window.top!.document;
+  } catch {
+    // WebKit already rejects native autofocus candidates in cross-origin frames.
+    return;
+  }
+
+  const pending = new Map<
+    HTMLElement,
+    {
+      property: "visibility" | "display";
+      temporary: "hidden" | "none";
+      value: string;
+      priority: string;
+      hadStyle: boolean;
+    }
+  >();
+  const candidates = new WeakSet<Element>();
+  let scheduled = false;
+
+  function restoreAfterFlush(): void {
+    requestAnimationFrame(() => {
+      scheduled = false;
+      for (const [element, original] of pending) {
+        if (
+          element.style.getPropertyValue(original.property) ===
+            original.temporary &&
+          element.style.getPropertyPriority(original.property) === "important"
+        ) {
+          if (original.value) {
+            element.style.setProperty(
+              original.property,
+              original.value,
+              original.priority,
+            );
+          } else {
+            element.style.removeProperty(original.property);
+          }
+          // Synchronize WebKit's serialized style attribute before removing it.
+          if (!original.hadStyle && !element.getAttribute("style")) {
+            element.removeAttribute("style");
+          }
+        }
+      }
+      pending.clear();
+    });
+  }
+
+  function quarantine(element: Element): void {
+    if (element.namespaceURI !== "http://www.w3.org/1999/xhtml") return;
+    // Remember detached candidates too: the parser may still be blocking their
+    // queued opportunity when they are reinserted without the attribute.
+    candidates.add(element);
+    if (!element.isConnected) return;
+    const candidate = element as HTMLElement;
+    if (!pending.has(candidate)) {
+      // Keep normal form controls in layout. Hide other candidates' subtrees
+      // entirely, including hosts whose shadow roots might delegate focus.
+      const isControl = /^(input|textarea|select|button)$/.test(
+        candidate.localName,
+      );
+      const property = isControl ? "visibility" : "display";
+      const temporary = isControl ? "hidden" : "none";
+      // Capture attribute presence before changing its CSSStyleDeclaration.
+      const hadStyle = candidate.hasAttribute("style");
+      pending.set(candidate, {
+        property,
+        temporary,
+        value: candidate.style.getPropertyValue(property),
+        priority: candidate.style.getPropertyPriority(property),
+        hadStyle,
+      });
+      candidate.style.setProperty(property, temporary, "important");
+    }
+    if (scheduled) return;
+    scheduled = true;
+    if (topDocument.readyState === "loading") {
+      topDocument.addEventListener("DOMContentLoaded", restoreAfterFlush, {
+        once: true,
+      });
+    } else {
+      restoreAfterFlush();
+    }
+  }
+
+  function scan(node: Node): void {
+    if (node.nodeType !== Node.ELEMENT_NODE) return;
+    const element = node as Element;
+    if (element.hasAttribute("autofocus") || candidates.has(element))
+      quarantine(element);
+    element.querySelectorAll("*").forEach((descendant) => {
+      if (descendant.hasAttribute("autofocus") || candidates.has(descendant))
+        quarantine(descendant);
+    });
+  }
+
+  new MutationObserver((records) => {
+    for (const record of records) {
+      if (record.type === "childList") {
+        record.addedNodes.forEach(scan);
+      } else if (record.attributeName === "style") {
+        const element = record.target as HTMLElement;
+        const original = pending.get(element);
+        if (
+          original &&
+          (element.style.getPropertyValue(original.property) !==
+            original.temporary ||
+            element.style.getPropertyPriority(original.property) !==
+              "important")
+        ) {
+          // Keep the candidate hidden through the flush even if application
+          // code changes its styles in the meantime. Restore the latest value.
+          original.value = element.style.getPropertyValue(original.property);
+          original.priority = element.style.getPropertyPriority(
+            original.property,
+          );
+          original.hadStyle = element.hasAttribute("style");
+          element.style.setProperty(
+            original.property,
+            original.temporary,
+            "important",
+          );
+        }
+      } else {
+        // Also catch an attribute removed synchronously after insertion, before
+        // observer delivery: its native candidate is still in WebKit's queue.
+        quarantine(record.target as Element);
+      }
+    }
+  }).observe(document, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["autofocus", "style"],
+  });
+  document.querySelectorAll("[autofocus]").forEach(quarantine);
+}