@wcag-checkr/ci 1.0.0-rc.13

package/dist/side-panel/wire-messaging.test.ts

@@ -0,0 +1,202 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { installChromeShim, type ChromeShim } from '../shared/test-helpers/chrome-shim';
+
+const shim: ChromeShim = installChromeShim();
+
+import {
+  loadLastAudit,
+  clearLastAudit,
+  refreshBaselineList,
+  refreshLicenseTier,
+  startKeepalive,
+  wireMessaging,
+} from './wire-messaging';
+import { useStore } from './store';
+import { on } from '../shared/messaging';
+import type { AuditResult, DeltaResult } from '../types/audit';
+
+const sampleResult: AuditResult = {
+  componentId: '::story:atoms-button--primary',
+  scope: '#root',
+  state: {
+    pseudoState: 'default',
+    ariaVariation: null,
+    theme: 'light',
+    direction: 'ltr',
+    breakpoint: {
+      id: 'desktop',
+      label: 'Desktop',
+      width: 1280,
+      height: 800,
+      deviceScaleFactor: 1,
+      mobile: false,
+    },
+  },
+  violations: [],
+  passes: 1,
+  incomplete: 0,
+  inapplicable: 0,
+  axeVersion: '4.11.4',
+  startedAt: '2026-04-30T00:00:00Z',
+  durationMs: 100,
+};
+
+const sampleDelta: DeltaResult = {
+  new: [],
+  persistent: [],
+  fixed: [],
+  newCount: 0,
+  persistentCount: 0,
+  fixedCount: 0,
+  baselineSnapshotMeta: null,
+  comparedAt: '2026-04-30T00:00:00Z',
+};
+
+describe('wire-messaging', () => {
+  beforeEach(() => {
+    shim.reset();
+    useStore.setState({
+      status: 'idle',
+      progress: null,
+      results: [],
+      delta: null,
+      componentId: null,
+      errorMessage: null,
+      baselineList: [],
+      tier: 'trial',
+      view: 'matrix',
+    });
+  });
+
+  it('AUDIT_PROGRESS_EVENT updates store progress + status', () => {
+    const off = wireMessaging();
+    // Simulate event broadcast.
+    shim.listeners.forEach((fn) =>
+      fn(
+        {
+          type: 'AUDIT_PROGRESS_EVENT',
+          current: 3,
+          total: 8,
+          currentState: sampleResult.state,
+        },
+        {},
+        () => {}
+      )
+    );
+    const s = useStore.getState();
+    expect(s.status).toBe('running');
+    expect(s.progress).toEqual({
+      current: 3,
+      total: 8,
+      currentState: sampleResult.state,
+    });
+    off();
+  });
+
+  it('AUDIT_COMPLETE_EVENT writes results + persists to chrome.storage', async () => {
+    const off = wireMessaging();
+    shim.listeners.forEach((fn) =>
+      fn(
+        {
+          type: 'AUDIT_COMPLETE_EVENT',
+          componentId: '::story:atoms-button--primary',
+          results: [sampleResult],
+          delta: sampleDelta,
+        },
+        {},
+        () => {}
+      )
+    );
+    const s = useStore.getState();
+    expect(s.status).toBe('complete');
+    expect(s.componentId).toBe('::story:atoms-button--primary');
+    // Wait one microtask for the async persist call.
+    await new Promise((r) => setTimeout(r, 0));
+    expect(shim.storage.has('sidePanel:lastAudit')).toBe(true);
+    off();
+  });
+
+  it('AUDIT_FAILED_EVENT sets error state', () => {
+    const off = wireMessaging();
+    shim.listeners.forEach((fn) =>
+      fn(
+        {
+          type: 'AUDIT_FAILED_EVENT',
+          error: { code: 'AXE_FAILED', message: 'boom', recoverable: false },
+        },
+        {},
+        () => {}
+      )
+    );
+    const s = useStore.getState();
+    expect(s.status).toBe('failed');
+    expect(s.errorMessage).toBe('boom');
+    off();
+  });
+
+  it('LICENSE_CHANGED_EVENT triggers refreshLicenseTier', async () => {
+    // Register a handler that responds to TIER_GET so refreshLicenseTier resolves.
+    on('TIER_GET', () => ({
+      type: 'TIER_GET_RESPONSE',
+      tier: 'solo',
+    }));
+
+    const off = wireMessaging();
+    shim.listeners.forEach((fn) =>
+      fn({ type: 'LICENSE_CHANGED_EVENT', tier: 'solo' }, {}, () => {})
+    );
+    // Allow the chained promise to resolve.
+    await new Promise((r) => setTimeout(r, 5));
+    expect(useStore.getState().tier).toBe('solo');
+    off();
+  });
+
+  it('loadLastAudit hydrates the store from chrome.storage', async () => {
+    shim.storage.set('sidePanel:lastAudit', {
+      results: [sampleResult],
+      delta: sampleDelta,
+      componentId: '::story:atoms-button--primary',
+    });
+    await loadLastAudit();
+    const s = useStore.getState();
+    expect(s.status).toBe('complete');
+    expect(s.componentId).toBe('::story:atoms-button--primary');
+    expect(s.results).toHaveLength(1);
+  });
+
+  it('loadLastAudit is a no-op when no marker exists', async () => {
+    await loadLastAudit();
+    expect(useStore.getState().status).toBe('idle');
+    expect(useStore.getState().results).toEqual([]);
+  });
+
+  it('clearLastAudit removes the persisted marker', async () => {
+    shim.storage.set('sidePanel:lastAudit', { results: [], delta: null, componentId: null });
+    await clearLastAudit();
+    expect(shim.storage.has('sidePanel:lastAudit')).toBe(false);
+  });
+
+  it('startKeepalive returns a port and registers it with the shim', () => {
+    const port = startKeepalive();
+    expect(port.name).toBe('audit-keepalive');
+    expect(shim.ports.find((p) => p.name === 'audit-keepalive')).toBeTruthy();
+  });
+
+  it('refreshBaselineList writes items into the store', async () => {
+    on('BASELINE_LIST', () => ({
+      type: 'BASELINE_LIST_RESPONSE',
+      items: [
+        { componentId: '::story:a', violationCount: 2, lastUpdated: '2026-04-30T00:00:00Z' },
+      ],
+    }));
+    await refreshBaselineList();
+    expect(useStore.getState().baselineList).toHaveLength(1);
+    expect(useStore.getState().baselineList[0]?.componentId).toBe('::story:a');
+  });
+
+  it('refreshLicenseTier writes tier from TIER_GET response', async () => {
+    on('TIER_GET', () => ({ type: 'TIER_GET_RESPONSE', tier: 'team' }));
+    await refreshLicenseTier();
+    expect(useStore.getState().tier).toBe('team');
+  });
+});

package/dist/side-panel/wire-messaging.ts

@@ -0,0 +1,285 @@
+// Subscribe Zustand store to messaging events. Open keepalive port to SW.
+// Also handles last-audit persistence so closing/reopening the side panel preserves results.
+
+import { on, request } from '../shared/messaging';
+import { useStore } from './store';
+import { announcer } from '../shared/announcer';
+import { getAuditTargetTabId } from '../shared/active-tab';
+import type { BaselineListResponse, SettingsResponse, TierGetResponse } from '../shared/messages';
+import type { UserMode } from './store';
+import type { AuditResult, DeltaResult } from '../types/audit';
+
+const LAST_AUDIT_KEY = 'sidePanel:lastAudit';
+
+type PersistedAudit = {
+  results: AuditResult[];
+  delta: DeltaResult | null;
+  componentId: string | null;
+};
+
+export function wireMessaging(): () => void {
+  const offs: Array<() => void> = [];
+
+  offs.push(
+    on('AUDIT_PROGRESS_EVENT', (msg) => {
+      const wasRunning = useStore.getState().status === 'running';
+      useStore.getState().setProgress({
+        current: msg.current,
+        total: msg.total,
+        currentState: msg.currentState,
+      });
+      useStore.getState().setStatus('running');
+      // Announce only at the start, not on every state — otherwise SR users
+      // get spammed once per matrix iteration.
+      if (!wasRunning) {
+        announcer.polite(`Audit running, scanning ${msg.total} state${msg.total === 1 ? '' : 's'}.`);
+      }
+    })
+  );
+
+  offs.push(
+    on('AUDIT_COMPLETE_EVENT', (msg) => {
+      useStore.getState().setResults(msg.results, msg.delta, msg.componentId);
+      const violationCount = msg.results.reduce((acc, r) => acc + r.violations.length, 0);
+      const newCount = msg.delta?.newCount ?? 0;
+      const summary = msg.delta
+        ? `Audit complete. ${newCount} new violation${newCount === 1 ? '' : 's'} versus baseline.`
+        : `Audit complete. ${violationCount} violation${violationCount === 1 ? '' : 's'} found across ${msg.results.length} state${msg.results.length === 1 ? '' : 's'}.`;
+      announcer.polite(summary);
+      void persistLastAudit({
+        results: msg.results,
+        delta: msg.delta,
+        componentId: msg.componentId,
+      });
+    })
+  );
+
+  offs.push(
+    on('AUDIT_FAILED_EVENT', (msg) => {
+      // ErrorBanner has role="alert" (implicit assertive live region) so the SR
+      // announcement fires when the banner mounts. No need for an extra
+      // announcer.assertive — that would double-speak.
+      useStore.getState().setError(msg.error.message);
+    })
+  );
+
+  offs.push(
+    on('AI_AUGMENTATION_PROGRESS_EVENT', (msg) => {
+      const prev = useStore.getState().aiProgress;
+      useStore.getState().setAiProgress({
+        currentCheckLabel: msg.currentCheckLabel,
+        current: msg.current,
+        total: msg.total,
+      });
+      // Announce only on the first AI check so SR users hear the phase
+      // transition once, not 8 times.
+      if (!prev) {
+        announcer.polite(`AI augmentation running ${msg.total} check${msg.total === 1 ? '' : 's'}.`);
+      }
+    })
+  );
+
+  offs.push(
+    on('AI_AUGMENTATION_FAILED_EVENT', (msg) => {
+      useStore.getState().setAiFailure({
+        severity: msg.severity,
+        reason: msg.reason,
+        checksAttempted: msg.checksAttempted,
+        checksSucceeded: msg.checksSucceeded,
+        checksErrored: msg.checksErrored,
+        errorDetails: msg.errorDetails,
+      });
+      // The banner has role="alert" — the SR announcement fires on mount.
+      // Don't also call announcer.assertive (would double-speak).
+    })
+  );
+
+  offs.push(
+    on('SCORECARD_UPDATED_EVENT', () => {
+      void refreshBaselineList();
+    })
+  );
+
+  // The license tier can change when the user activates a new token in another context;
+  // refresh on broadcast so the tier badge is current.
+  offs.push(
+    on('LICENSE_CHANGED_EVENT', () => {
+      void refreshLicenseTier();
+    })
+  );
+
+  // ─── Site crawl events ─────────────────────────────────────────────────
+  offs.push(
+    on('SITE_CRAWL_PROGRESS_EVENT', (msg) => {
+      const s = useStore.getState();
+      s.setSiteCrawlStatus('running');
+      s.setSiteCrawlProgress({
+        current: msg.current,
+        total: msg.total,
+        url: msg.url,
+        lastViolations: msg.violations,
+      });
+      if (msg.status === 'auditing' && msg.current === 1) {
+        announcer.polite(`Site crawl started, scanning up to ${msg.total} pages.`);
+      }
+    })
+  );
+
+  offs.push(
+    on('SITE_CRAWL_COMPLETE_EVENT', (msg) => {
+      const s = useStore.getState();
+      s.setSiteCrawlStatus('complete');
+      s.setSiteCrawlReport(msg.report);
+      s.setSiteCrawlProgress(null);
+      announcer.polite(
+        `Site crawl complete. Grade ${msg.report.siteGrade}, ${msg.report.totalUniqueViolations} unique violation${msg.report.totalUniqueViolations === 1 ? '' : 's'}.`
+      );
+    })
+  );
+
+  offs.push(
+    on('SITE_CRAWL_FAILED_EVENT', (msg) => {
+      const s = useStore.getState();
+      s.setSiteCrawlStatus('failed');
+      s.setSiteCrawlError(msg.error.message);
+      s.setSiteCrawlProgress(null);
+      announcer.assertive(`Site crawl failed: ${msg.error.message}`);
+    })
+  );
+
+  return () => offs.forEach((off) => off());
+}
+
+async function persistLastAudit(payload: PersistedAudit): Promise<void> {
+  // Strip screenshotDataUrl from each result before persisting. With a full
+  // state matrix (up to 144 states), 144 base64 JPEGs at ~50-200KB each blow
+  // chrome.storage.local's 10MB MV3 quota — manifestly observed in panel
+  // unhandled rejections with "Resource::kQuotaBytes quota exceeded".
+  //
+  // Trade-off: screenshots remain in-memory for the current panel session
+  // (export bundles run in this session still have them). After a panel
+  // reopen / SW restart, violations + delta + componentId are restored but
+  // screenshots aren't — the user would need to re-audit to regenerate them.
+  const stripped: PersistedAudit = {
+    ...payload,
+    results: payload.results.map(({ screenshotDataUrl: _drop, ...rest }) => rest),
+  };
+  try {
+    await chrome.storage.local.set({ [LAST_AUDIT_KEY]: stripped });
+  } catch (err) {
+    // Even stripped, a very-large violation set could still exceed quota.
+    // Better to leave the in-memory results intact than crash the panel on
+    // a non-essential persistence step.
+    console.warn('[wire-messaging] persistLastAudit failed; results stay in-memory only', err);
+  }
+}
+
+export async function loadLastAudit(): Promise<void> {
+  const r = await chrome.storage.local.get(LAST_AUDIT_KEY);
+  const last = r[LAST_AUDIT_KEY] as PersistedAudit | undefined;
+  if (!last) return;
+  useStore.setState({
+    results: last.results,
+    delta: last.delta,
+    componentId: last.componentId,
+    status: 'complete',
+  });
+}
+
+export async function clearLastAudit(): Promise<void> {
+  await chrome.storage.local.remove(LAST_AUDIT_KEY);
+}
+
+/** Wipe results from store AND from the persisted last-audit cache. Single
+ *  helper so both the user-triggered Clear button and the navigation auto-
+ *  clear path stay in sync. */
+export async function clearAudit(): Promise<void> {
+  useStore.getState().clearResults();
+  await clearLastAudit();
+}
+
+/** Strip the URL fragment so anchor-only changes (#section) don't read as
+ *  navigation. Path + querystring + host all still count. */
+function normalizeUrl(u: string): string {
+  try {
+    const url = new URL(u);
+    url.hash = '';
+    return url.toString();
+  } catch {
+    return u;
+  }
+}
+
+/** If the currently-loaded audit's pageUrl no longer matches the audit target
+ *  tab's URL, clear the audit. Called on side-panel mount AND whenever the
+ *  target tab navigates or the active tab changes (see App.tsx). */
+export async function clearIfTargetUrlChanged(): Promise<void> {
+  const { results } = useStore.getState();
+  if (results.length === 0) return;
+  const audited = results[0]?.pageUrl;
+  if (!audited) return; // legacy result without pageUrl — leave alone
+
+  const tabId = await getAuditTargetTabId();
+  if (!tabId) {
+    // No usable target tab anymore (e.g. only chrome:// pages open) — treat
+    // as a navigation away from the audited page.
+    await clearAudit();
+    return;
+  }
+  try {
+    const tab = await chrome.tabs.get(tabId);
+    if (normalizeUrl(tab.url ?? '') !== normalizeUrl(audited)) {
+      await clearAudit();
+    }
+  } catch {
+    // tab gone — also stale
+    await clearAudit();
+  }
+}
+
+export async function refreshBaselineList(): Promise<void> {
+  const res = await request<BaselineListResponse>({ type: 'BASELINE_LIST' });
+  useStore.getState().setBaselineList(res.items);
+}
+
+export async function refreshLicenseTier(opts?: { forceRefresh?: boolean }): Promise<void> {
+  const res = await request<TierGetResponse>({
+    type: 'TIER_GET',
+    forceRefresh: opts?.forceRefresh === true,
+  });
+  useStore.getState().setTier(res.tier, {
+    trialDaysRemaining: res.trialDaysRemaining,
+    seatsUsed: res.seatsUsed,
+    seatsTotal: res.seatsTotal,
+    planCode: res.planCode,
+    licenseDaysRemaining: res.licenseDaysRemaining,
+    pastDue: res.pastDue,
+  });
+  // Fold the in-app messages refresh into the same wake-up so the bell
+  // stays in sync with the license-validate cadence. Failures are silent
+  // — the bell just stays in its last-known state.
+  void refreshInAppMessages();
+}
+
+export async function refreshInAppMessages(): Promise<void> {
+  // Dynamic import keeps the messages-client out of the initial chunk —
+  // bell content is only ever painted after the panel mounts.
+  const { fetchMessages } = await import('../modules/messages-client');
+  const mode = useStore.getState().userMode;
+  const res = await fetchMessages(mode);
+  if (!res) return;
+  useStore.getState().setMessages(res.messages, res.unreadCount, res.criticalUnacked);
+}
+
+/** Load the user's persona setting. Returns null when not yet set
+ * (first-launch — App will render the wizard). */
+export async function refreshUserMode(): Promise<void> {
+  const res = await request<SettingsResponse>({ type: 'SETTINGS_GET', key: 'userMode' });
+  const v = res.data;
+  const mode: UserMode | null = v === 'owner' || v === 'dev' ? v : null;
+  useStore.getState().setUserMode(mode);
+}
+
+export function startKeepalive(): chrome.runtime.Port {
+  return chrome.runtime.connect({ name: 'audit-keepalive' });
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@wcag-checkr/ci",
+  "version": "1.0.0-rc.13",
+  "private": false,
+  "description": "Headless wcagcheckr accessibility audit runner for CI/CD pipelines. Drives the wcagcheckr Chrome extension via Playwright, runs full-page audits across the state matrix (108 combinations: hover, focus, dark mode, RTL, breakpoints), outputs JSON / SARIF / JUnit, exits with severity-aware codes.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "wcagcheckr-ci.mjs",
+  "bin": {
+    "wcagcheckr-ci": "wcagcheckr-ci.mjs"
+  },
+  "files": [
+    "wcagcheckr-ci.mjs",
+    "README.md",
+    "dist/**"
+  ],
+  "scripts": {
+    "prepack": "node ../scripts/prepare-cli-publish.mjs"
+  },
+  "engines": {
+    "node": ">=20.18"
+  },
+  "dependencies": {
+    "playwright": "^1.59.1"
+  },
+  "homepage": "https://wcagcheckr.com",
+  "keywords": [
+    "accessibility",
+    "a11y",
+    "wcag",
+    "audit",
+    "ci",
+    "axe",
+    "chrome-extension",
+    "playwright",
+    "sarif",
+    "junit"
+  ]
+}