📦 deps(thirdparty): update snapshots

2026-07-20 00:03:02 +00:00
parent 47ce7f78dc
commit 2c00adccd5
1216 changed files with 10376 additions and 90058 deletions
@@ -0,0 +1,54 @@
+# Worked example — auditing a production marketing site
+
+This is a **real run** of `scripts/design-audit.mjs` against a live single-page marketing site
+(a financial-services firm's homepage), captured to show what the heuristic layer of the stack
+produces before you wire it into your own project.
+
+## How it was produced
+
+```bash
+# serve the site, then audit it over HTTP (not file://, so asset/CORS noise is realistic)
+python3 -m http.server 8099          # in the site directory
+node scripts/design-audit.mjs --url http://localhost:8099/ --out examples/juniper-audit
+```
+
+## What's here
+
+- [`report.md`](./report.md) — ranked findings + console health
+- [`report.json`](./report.json) — the same, machine-readable (what CI consumes)
+- [`screenshots/`](./screenshots) — full-page capture at all six viewport tiers (360 → 1920 px)
+
+## Reading the results
+
+The site is genuinely well-built (design tokens, self-hosted fonts, `prefers-reduced-motion`,
+scroll-reveal). The audit still surfaced three actionable items — exactly the kind a human
+misses on a quick look:
+
+| Finding | Severity | Why it matters |
+|---------|----------|----------------|
+| 2–3 sampled interactive elements show no visible focus indicator | High | Keyboard users can't see where they are — WCAG 2.4.7 |
+| 14 tap targets < 44×44 px on mobile | Medium | Small touch targets → mis-taps on phones |
+| ~1 text node below AA contrast (approximate) | Medium | Lead to verify by hand; contrast is estimated from the nearest opaque background |
+
+The single console error is a `404` for one asset — worth chasing, but not a layout defect.
+
+## Two things this example teaches about the tooling
+
+1. **Serve over HTTP, not `file://`.** Opening via `file://` produces a wall of font-CORS
+   errors that are pure artifacts (browsers block cross-origin font fetches from `null` origin).
+   The numbers above are from a real HTTP serve, so the console is clean.
+
+2. **Full-page capture + aggressive scroll-reveal don't fully mix.** The script auto-scrolls to
+   trigger `IntersectionObserver` reveals before shooting, which recovers most content — but a
+   page that reveals sections only on fine-grained scroll can still show a blank band in a
+   single full-page screenshot. That's both a tooling limit **and** a real robustness signal
+   (the same content is invisible to some crawlers, print, and any non-interactive capture).
+   For those pages, the interactive **`/design-review`** subagent — which scrolls naturally,
+   waits, and interacts — is the more reliable check. Heuristics catch the mechanical defects;
+   the subagent judges the experience.
+
+## The point
+
+This is the *fast, automatic* half of the stack (also runs in CI). The *full* review —
+interaction flows, visual taste, edge cases — is the `design-review` subagent invoked with
+`/design-review <url>`. Use both: heuristics to gate merges, the subagent to raise the bar.
@@ -0,0 +1,50 @@
+{
+  "target": "http://localhost:8099/",
+  "consoleErrors": [
+    "[mobile-360] Failed to load resource: the server responded with a status of 404 (File not found)"
+  ],
+  "findings": [
+    {
+      "severity": "high",
+      "check": "focus-visible",
+      "message": "2/25 sampled interactive elements show no visible focus indicator.",
+      "viewports": [
+        "mobile-360",
+        "mobile-390",
+        "tablet-768"
+      ]
+    },
+    {
+      "severity": "high",
+      "check": "focus-visible",
+      "message": "3/25 sampled interactive elements show no visible focus indicator.",
+      "viewports": [
+        "laptop-1024",
+        "desktop-1440",
+        "wide-1920"
+      ]
+    },
+    {
+      "severity": "medium",
+      "check": "tap-target",
+      "message": "14 interactive targets < 44×44px on mobile.",
+      "viewports": [
+        "mobile-360",
+        "mobile-390"
+      ]
+    },
+    {
+      "severity": "medium",
+      "check": "contrast",
+      "message": "~1/82 sampled text nodes below WCAG AA contrast (approximate).",
+      "viewports": [
+        "mobile-360",
+        "mobile-390",
+        "tablet-768",
+        "laptop-1024",
+        "desktop-1440",
+        "wide-1920"
+      ]
+    }
+  ]
+}
@@ -0,0 +1,29 @@
+# Design Audit — http://localhost:8099/
+
+Viewports: 360 / 390 / 768 / 1024 / 1440 / 1920 px  ·  Heuristic pass (pair with `/design-review` for taste & flows).
+
+**Findings:** 2 high · 2 medium · 0 low
+
+**Console errors (1):**
+- `[mobile-360] Failed to load resource: the server responded with a status of 404 (File not found)`
+
+## HIGH
+- **focus-visible** — 2/25 sampled interactive elements show no visible focus indicator.  
+  ↳ seen at: mobile-360, mobile-390, tablet-768
+- **focus-visible** — 3/25 sampled interactive elements show no visible focus indicator.  
+  ↳ seen at: laptop-1024, desktop-1440, wide-1920
+
+## MEDIUM
+- **tap-target** — 14 interactive targets < 44×44px on mobile.  
+  ↳ seen at: mobile-360, mobile-390
+- **contrast** — ~1/82 sampled text nodes below WCAG AA contrast (approximate).  
+  ↳ seen at: mobile-360, mobile-390, tablet-768, laptop-1024, desktop-1440, wide-1920
+
+## Screenshots
+
+- mobile-360 (360×800): `screenshots/mobile-360.png`
+- mobile-390 (390×844): `screenshots/mobile-390.png`
+- tablet-768 (768×1024): `screenshots/tablet-768.png`
+- laptop-1024 (1024×768): `screenshots/laptop-1024.png`
+- desktop-1440 (1440×900): `screenshots/desktop-1440.png`
+- wide-1920 (1920×1080): `screenshots/wide-1920.png`