@vibecheckai/cli 3.5.0 → 3.5.2

package/bin/runners/lib/reality/accessibility-audit.js

@@ -1,946 +0,0 @@
-/**
- * Accessibility Audit Engine
- * 
- * ═══════════════════════════════════════════════════════════════════════════════
- * COMPETITIVE MOAT FEATURE - WCAG 2.1 Compliance Checking
- * ═══════════════════════════════════════════════════════════════════════════════
- * 
- * This engine audits web pages for accessibility issues during Reality Mode.
- * It checks against WCAG 2.1 guidelines at levels A, AA, and AAA.
- * 
- * Categories:
- * - Perceivable (images, media, content structure)
- * - Operable (keyboard, timing, navigation)
- * - Understandable (readable, predictable, input assistance)
- * - Robust (compatible with assistive technologies)
- * 
- * Features:
- * - Runtime accessibility checking
- * - Color contrast analysis
- * - Keyboard navigation testing
- * - Screen reader compatibility
- * - Focus management
- * - ARIA validation
- * - Form accessibility
- */
-
-"use strict";
-
-const fs = require("fs");
-const path = require("path");
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// WCAG 2.1 RULES
-// ═══════════════════════════════════════════════════════════════════════════════
-
-const WCAG_RULES = {
-  // ─────────────────────────────────────────────────────────────────────────────
-  // 1. PERCEIVABLE
-  // ─────────────────────────────────────────────────────────────────────────────
-  perceivable: {
-    name: "Perceivable",
-    principle: "1",
-    rules: [
-      {
-        id: "img-alt",
-        name: "Images have alt text",
-        wcag: "1.1.1",
-        level: "A",
-        impact: "critical",
-        selector: "img",
-        check: (el) => {
-          const alt = el.getAttribute("alt");
-          const role = el.getAttribute("role");
-          
-          // Decorative images can have empty alt or role="presentation"
-          if (role === "presentation" || role === "none") return true;
-          if (alt === "") return true; // Empty alt is valid for decorative
-          
-          return alt !== null && alt.trim().length > 0;
-        },
-        message: "Image missing alt text",
-        fix: "Add descriptive alt attribute or alt=\"\" for decorative images"
-      },
-      {
-        id: "img-alt-quality",
-        name: "Alt text is meaningful",
-        wcag: "1.1.1",
-        level: "A",
-        impact: "moderate",
-        selector: "img[alt]",
-        check: (el) => {
-          const alt = el.getAttribute("alt");
-          if (!alt) return true;
-          
-          // Check for unhelpful alt text
-          const badPatterns = [
-            /^image$/i,
-            /^img$/i,
-            /^picture$/i,
-            /^photo$/i,
-            /^icon$/i,
-            /^graphic$/i,
-            /^\d+$/,
-            /^untitled/i,
-            /^screenshot/i,
-            /\.(?:jpg|png|gif|svg|webp)$/i
-          ];
-          
-          return !badPatterns.some(p => p.test(alt));
-        },
-        message: "Alt text is not descriptive",
-        fix: "Provide meaningful description of the image content"
-      },
-      {
-        id: "video-captions",
-        name: "Videos have captions",
-        wcag: "1.2.2",
-        level: "A",
-        impact: "critical",
-        selector: "video",
-        check: (el) => {
-          const tracks = el.querySelectorAll("track[kind='captions'], track[kind='subtitles']");
-          return tracks.length > 0;
-        },
-        message: "Video missing captions",
-        fix: "Add <track kind=\"captions\"> element"
-      },
-      {
-        id: "audio-transcript",
-        name: "Audio has transcript",
-        wcag: "1.2.1",
-        level: "A",
-        impact: "critical",
-        selector: "audio",
-        check: (el) => {
-          // Check for nearby transcript link or content
-          const parent = el.closest("figure, div, section");
-          if (parent) {
-            const hasTranscript = parent.textContent.toLowerCase().includes("transcript") ||
-                                 parent.querySelector("[data-transcript], .transcript");
-            return hasTranscript;
-          }
-          return false;
-        },
-        message: "Audio content may need transcript",
-        fix: "Provide text transcript for audio content"
-      },
-      {
-        id: "color-contrast",
-        name: "Sufficient color contrast",
-        wcag: "1.4.3",
-        level: "AA",
-        impact: "serious",
-        selector: "*",
-        checkComputed: true,
-        check: (el, computedStyle) => {
-          // Only check text elements
-          if (!el.textContent.trim()) return true;
-          
-          const color = computedStyle.color;
-          const bgColor = computedStyle.backgroundColor;
-          const fontSize = parseFloat(computedStyle.fontSize);
-          const fontWeight = computedStyle.fontWeight;
-          
-          // Skip transparent backgrounds
-          if (bgColor === "transparent" || bgColor === "rgba(0, 0, 0, 0)") return true;
-          
-          const ratio = calculateContrastRatio(color, bgColor);
-          const isLargeText = fontSize >= 18 || (fontSize >= 14 && parseInt(fontWeight) >= 700);
-          
-          // WCAG AA: 4.5:1 for normal text, 3:1 for large text
-          const requiredRatio = isLargeText ? 3 : 4.5;
-          
-          return ratio >= requiredRatio;
-        },
-        message: "Insufficient color contrast",
-        fix: "Increase contrast ratio to at least 4.5:1 (or 3:1 for large text)"
-      },
-      {
-        id: "text-resize",
-        name: "Text can be resized",
-        wcag: "1.4.4",
-        level: "AA",
-        impact: "moderate",
-        selector: "*",
-        checkComputed: true,
-        check: (el, computedStyle) => {
-          // Check if font size uses relative units or is at least 16px
-          const fontSize = computedStyle.fontSize;
-          return !fontSize.includes("px") || parseFloat(fontSize) >= 12;
-        },
-        message: "Text may not resize properly",
-        fix: "Use relative units (rem, em) for font sizes"
-      },
-      {
-        id: "heading-order",
-        name: "Headings in logical order",
-        wcag: "1.3.1",
-        level: "A",
-        impact: "moderate",
-        selector: "h1, h2, h3, h4, h5, h6",
-        checkAll: true,
-        check: (elements) => {
-          let lastLevel = 0;
-          for (const el of elements) {
-            const level = parseInt(el.tagName[1]);
-            if (level > lastLevel + 1) {
-              return { valid: false, element: el };
-            }
-            lastLevel = level;
-          }
-          return { valid: true };
-        },
-        message: "Heading levels skipped",
-        fix: "Use heading levels in sequential order (h1, h2, h3, etc.)"
-      }
-    ]
-  },
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // 2. OPERABLE
-  // ─────────────────────────────────────────────────────────────────────────────
-  operable: {
-    name: "Operable",
-    principle: "2",
-    rules: [
-      {
-        id: "keyboard-accessible",
-        name: "Keyboard accessible",
-        wcag: "2.1.1",
-        level: "A",
-        impact: "critical",
-        selector: "a, button, input, select, textarea, [tabindex], [onclick]",
-        check: (el) => {
-          const tabindex = el.getAttribute("tabindex");
-          
-          // Interactive elements should be focusable
-          if (tabindex === "-1" && !el.disabled) {
-            return false;
-          }
-          
-          // Custom interactive elements need tabindex
-          if (el.hasAttribute("onclick") && !el.hasAttribute("tabindex")) {
-            return false;
-          }
-          
-          return true;
-        },
-        message: "Element not keyboard accessible",
-        fix: "Ensure element can receive focus via keyboard (add tabindex=\"0\")"
-      },
-      {
-        id: "focus-visible",
-        name: "Focus indicator visible",
-        wcag: "2.4.7",
-        level: "AA",
-        impact: "serious",
-        selector: "a, button, input, select, textarea, [tabindex]:not([tabindex='-1'])",
-        checkComputed: true,
-        checkOnFocus: true,
-        check: (el, computedStyle, focusStyle) => {
-          // Check if outline is removed without replacement
-          if (focusStyle.outline === "none" || focusStyle.outline === "0") {
-            // Check for alternative focus indicators
-            const hasBorderChange = focusStyle.border !== computedStyle.border;
-            const hasBoxShadow = focusStyle.boxShadow !== "none" && 
-                                focusStyle.boxShadow !== computedStyle.boxShadow;
-            const hasBgChange = focusStyle.backgroundColor !== computedStyle.backgroundColor;
-            
-            return hasBorderChange || hasBoxShadow || hasBgChange;
-          }
-          return true;
-        },
-        message: "Focus indicator not visible",
-        fix: "Add visible focus styles (:focus, :focus-visible)"
-      },
-      {
-        id: "skip-link",
-        name: "Skip navigation link",
-        wcag: "2.4.1",
-        level: "A",
-        impact: "moderate",
-        checkPage: true,
-        check: (document) => {
-          const skipLinks = document.querySelectorAll(
-            "a[href^='#main'], a[href^='#content'], .skip-link, [class*='skip']"
-          );
-          return skipLinks.length > 0;
-        },
-        message: "Missing skip navigation link",
-        fix: "Add a skip link at the top of the page"
-      },
-      {
-        id: "page-title",
-        name: "Page has title",
-        wcag: "2.4.2",
-        level: "A",
-        impact: "serious",
-        checkPage: true,
-        check: (document) => {
-          const title = document.title;
-          return title && title.trim().length > 0;
-        },
-        message: "Page missing title",
-        fix: "Add descriptive <title> element"
-      },
-      {
-        id: "link-purpose",
-        name: "Link purpose clear",
-        wcag: "2.4.4",
-        level: "A",
-        impact: "moderate",
-        selector: "a",
-        check: (el) => {
-          const text = el.textContent.trim().toLowerCase();
-          const ariaLabel = el.getAttribute("aria-label");
-          
-          // Check for non-descriptive links
-          const badPatterns = ["click here", "here", "read more", "more", "link"];
-          
-          if (badPatterns.includes(text) && !ariaLabel) {
-            return false;
-          }
-          
-          return true;
-        },
-        message: "Link text is not descriptive",
-        fix: "Use descriptive link text or add aria-label"
-      },
-      {
-        id: "no-timing",
-        name: "No time limit or adjustable",
-        wcag: "2.2.1",
-        level: "A",
-        impact: "critical",
-        checkPage: true,
-        check: (document) => {
-          // Check for common auto-refresh patterns
-          const metaRefresh = document.querySelector("meta[http-equiv='refresh']");
-          if (metaRefresh) {
-            const content = metaRefresh.getAttribute("content");
-            if (content && !content.includes("url=")) {
-              return false; // Auto-refresh without redirect
-            }
-          }
-          return true;
-        },
-        message: "Page has automatic time-based changes",
-        fix: "Remove auto-refresh or provide user control"
-      },
-      {
-        id: "no-keyboard-trap",
-        name: "No keyboard trap",
-        wcag: "2.1.2",
-        level: "A",
-        impact: "critical",
-        selector: "[tabindex], a, button, input, select, textarea",
-        checkInteractive: true,
-        check: async (el, page) => {
-          // Focus the element
-          await el.focus();
-          
-          // Try to tab away
-          await page.keyboard.press("Tab");
-          const activeAfter = await page.evaluate(() => document.activeElement.outerHTML);
-          
-          // Check if focus moved
-          return activeAfter !== el.outerHTML;
-        },
-        message: "Keyboard trap detected",
-        fix: "Ensure users can navigate away using Tab or Escape"
-      }
-    ]
-  },
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // 3. UNDERSTANDABLE
-  // ─────────────────────────────────────────────────────────────────────────────
-  understandable: {
-    name: "Understandable",
-    principle: "3",
-    rules: [
-      {
-        id: "lang-attribute",
-        name: "Page language specified",
-        wcag: "3.1.1",
-        level: "A",
-        impact: "serious",
-        checkPage: true,
-        check: (document) => {
-          const html = document.documentElement;
-          const lang = html.getAttribute("lang") || html.getAttribute("xml:lang");
-          return lang && lang.length >= 2;
-        },
-        message: "Page language not specified",
-        fix: "Add lang attribute to <html> element"
-      },
-      {
-        id: "label-input",
-        name: "Form inputs have labels",
-        wcag: "3.3.2",
-        level: "A",
-        impact: "critical",
-        selector: "input:not([type='hidden']):not([type='submit']):not([type='button']), select, textarea",
-        check: (el) => {
-          // Check for explicit label
-          const id = el.getAttribute("id");
-          if (id && document.querySelector(`label[for="${id}"]`)) {
-            return true;
-          }
-          
-          // Check for implicit label (wrapped)
-          if (el.closest("label")) {
-            return true;
-          }
-          
-          // Check for aria-label or aria-labelledby
-          if (el.getAttribute("aria-label") || el.getAttribute("aria-labelledby")) {
-            return true;
-          }
-          
-          // Check for title (less preferred)
-          if (el.getAttribute("title")) {
-            return true;
-          }
-          
-          // Check for placeholder (not sufficient alone but may indicate intent)
-          if (el.getAttribute("placeholder")) {
-            return false; // Placeholder alone is not sufficient
-          }
-          
-          return false;
-        },
-        message: "Form input missing label",
-        fix: "Add <label for=\"id\"> or aria-label attribute"
-      },
-      {
-        id: "error-identification",
-        name: "Error messages clear",
-        wcag: "3.3.1",
-        level: "A",
-        impact: "serious",
-        selector: "[aria-invalid='true'], .error, .invalid, [class*='error']",
-        check: (el) => {
-          // Check if error has associated description
-          const ariaDescribedBy = el.getAttribute("aria-describedby");
-          const ariaErrorMessage = el.getAttribute("aria-errormessage");
-          
-          // Check for nearby error message
-          const parent = el.closest("div, fieldset, form");
-          const hasErrorText = parent?.querySelector("[class*='error'], [role='alert']");
-          
-          return ariaDescribedBy || ariaErrorMessage || hasErrorText;
-        },
-        message: "Error not clearly identified",
-        fix: "Associate error message with aria-describedby"
-      },
-      {
-        id: "consistent-navigation",
-        name: "Consistent navigation",
-        wcag: "3.2.3",
-        level: "AA",
-        impact: "moderate",
-        checkPage: true,
-        check: (document) => {
-          // Check for standard navigation landmarks
-          const nav = document.querySelector("nav, [role='navigation']");
-          return nav !== null;
-        },
-        message: "No navigation landmark found",
-        fix: "Use <nav> element or role=\"navigation\""
-      },
-      {
-        id: "autocomplete",
-        name: "Autocomplete attributes",
-        wcag: "1.3.5",
-        level: "AA",
-        impact: "moderate",
-        selector: "input[type='text'], input[type='email'], input[type='tel'], input[type='password']",
-        check: (el) => {
-          const name = (el.getAttribute("name") || "").toLowerCase();
-          const id = (el.getAttribute("id") || "").toLowerCase();
-          
-          // Common field patterns that should have autocomplete
-          const autocompletable = [
-            "name", "email", "phone", "tel", "address", "city", "state", 
-            "zip", "postal", "country", "cc-", "card"
-          ];
-          
-          const shouldHaveAutocomplete = autocompletable.some(
-            pattern => name.includes(pattern) || id.includes(pattern)
-          );
-          
-          if (shouldHaveAutocomplete) {
-            return el.hasAttribute("autocomplete");
-          }
-          
-          return true;
-        },
-        message: "Input should have autocomplete attribute",
-        fix: "Add appropriate autocomplete value (e.g., autocomplete=\"email\")"
-      }
-    ]
-  },
-
-  // ─────────────────────────────────────────────────────────────────────────────
-  // 4. ROBUST
-  // ─────────────────────────────────────────────────────────────────────────────
-  robust: {
-    name: "Robust",
-    principle: "4",
-    rules: [
-      {
-        id: "valid-html",
-        name: "Valid HTML structure",
-        wcag: "4.1.1",
-        level: "A",
-        impact: "serious",
-        checkPage: true,
-        check: (document) => {
-          // Check for duplicate IDs
-          const ids = Array.from(document.querySelectorAll("[id]"))
-            .map(el => el.id);
-          const uniqueIds = new Set(ids);
-          
-          return ids.length === uniqueIds.size;
-        },
-        message: "Duplicate IDs found",
-        fix: "Ensure all ID attributes are unique"
-      },
-      {
-        id: "aria-valid",
-        name: "Valid ARIA attributes",
-        wcag: "4.1.2",
-        level: "A",
-        impact: "critical",
-        selector: "[role], [aria-label], [aria-describedby], [aria-labelledby], [aria-hidden]",
-        check: (el) => {
-          // Check role is valid
-          const role = el.getAttribute("role");
-          const validRoles = [
-            "alert", "alertdialog", "application", "article", "banner", "button",
-            "cell", "checkbox", "columnheader", "combobox", "complementary",
-            "contentinfo", "definition", "dialog", "directory", "document",
-            "feed", "figure", "form", "grid", "gridcell", "group", "heading",
-            "img", "link", "list", "listbox", "listitem", "log", "main",
-            "marquee", "math", "menu", "menubar", "menuitem", "menuitemcheckbox",
-            "menuitemradio", "navigation", "none", "note", "option", "presentation",
-            "progressbar", "radio", "radiogroup", "region", "row", "rowgroup",
-            "rowheader", "scrollbar", "search", "searchbox", "separator", "slider",
-            "spinbutton", "status", "switch", "tab", "table", "tablist", "tabpanel",
-            "term", "textbox", "timer", "toolbar", "tooltip", "tree", "treegrid", "treeitem"
-          ];
-          
-          if (role && !validRoles.includes(role)) {
-            return false;
-          }
-          
-          // Check aria-labelledby/describedby targets exist
-          const labelledby = el.getAttribute("aria-labelledby");
-          if (labelledby) {
-            const ids = labelledby.split(/\s+/);
-            for (const id of ids) {
-              if (!document.getElementById(id)) {
-                return false;
-              }
-            }
-          }
-          
-          const describedby = el.getAttribute("aria-describedby");
-          if (describedby) {
-            const ids = describedby.split(/\s+/);
-            for (const id of ids) {
-              if (!document.getElementById(id)) {
-                return false;
-              }
-            }
-          }
-          
-          return true;
-        },
-        message: "Invalid ARIA attribute or reference",
-        fix: "Fix ARIA role or ensure referenced IDs exist"
-      },
-      {
-        id: "button-name",
-        name: "Buttons have accessible name",
-        wcag: "4.1.2",
-        level: "A",
-        impact: "critical",
-        selector: "button, [role='button'], input[type='button'], input[type='submit']",
-        check: (el) => {
-          // Check for accessible name
-          const textContent = el.textContent?.trim();
-          const ariaLabel = el.getAttribute("aria-label");
-          const ariaLabelledby = el.getAttribute("aria-labelledby");
-          const title = el.getAttribute("title");
-          const value = el.getAttribute("value");
-          
-          return !!(textContent || ariaLabel || ariaLabelledby || title || value);
-        },
-        message: "Button missing accessible name",
-        fix: "Add text content, aria-label, or title attribute"
-      },
-      {
-        id: "status-messages",
-        name: "Status messages use live regions",
-        wcag: "4.1.3",
-        level: "AA",
-        impact: "moderate",
-        selector: ".toast, .notification, .alert, .message, [class*='success'], [class*='error']",
-        check: (el) => {
-          const role = el.getAttribute("role");
-          const ariaLive = el.getAttribute("aria-live");
-          
-          // Should have role="alert", role="status", or aria-live
-          return role === "alert" || role === "status" || ariaLive;
-        },
-        message: "Status message not announced to screen readers",
-        fix: "Add role=\"alert\" or aria-live=\"polite\""
-      }
-    ]
-  }
-};
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// UTILITY FUNCTIONS
-// ═══════════════════════════════════════════════════════════════════════════════
-
-/**
- * Parse color string to RGB
- */
-function parseColor(colorStr) {
-  // Handle rgb(r, g, b) format
-  const rgbMatch = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  if (rgbMatch) {
-    return {
-      r: parseInt(rgbMatch[1]),
-      g: parseInt(rgbMatch[2]),
-      b: parseInt(rgbMatch[3])
-    };
-  }
-  
-  // Handle rgba(r, g, b, a) format
-  const rgbaMatch = colorStr.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-  if (rgbaMatch) {
-    return {
-      r: parseInt(rgbaMatch[1]),
-      g: parseInt(rgbaMatch[2]),
-      b: parseInt(rgbaMatch[3]),
-      a: parseFloat(rgbaMatch[4])
-    };
-  }
-  
-  return null;
-}
-
-/**
- * Calculate relative luminance
- */
-function getLuminance(rgb) {
-  const rsRGB = rgb.r / 255;
-  const gsRGB = rgb.g / 255;
-  const bsRGB = rgb.b / 255;
-  
-  const r = rsRGB <= 0.03928 ? rsRGB / 12.92 : Math.pow((rsRGB + 0.055) / 1.055, 2.4);
-  const g = gsRGB <= 0.03928 ? gsRGB / 12.92 : Math.pow((gsRGB + 0.055) / 1.055, 2.4);
-  const b = bsRGB <= 0.03928 ? bsRGB / 12.92 : Math.pow((bsRGB + 0.055) / 1.055, 2.4);
-  
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-
-/**
- * Calculate contrast ratio between two colors
- */
-function calculateContrastRatio(color1Str, color2Str) {
-  const color1 = parseColor(color1Str);
-  const color2 = parseColor(color2Str);
-  
-  if (!color1 || !color2) return 21; // Assume passing if can't parse
-  
-  const l1 = getLuminance(color1);
-  const l2 = getLuminance(color2);
-  
-  const lighter = Math.max(l1, l2);
-  const darker = Math.min(l1, l2);
-  
-  return (lighter + 0.05) / (darker + 0.05);
-}
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// ACCESSIBILITY AUDIT ENGINE
-// ═══════════════════════════════════════════════════════════════════════════════
-
-class AccessibilityAuditEngine {
-  constructor(options = {}) {
-    this.rules = { ...WCAG_RULES };
-    this.levels = options.levels || ["A", "AA"]; // Default to AA conformance
-    this.page = null;
-    this.results = [];
-  }
-
-  /**
-   * Set the Playwright page
-   */
-  setPage(page) {
-    this.page = page;
-  }
-
-  /**
-   * Run full accessibility audit
-   */
-  async audit() {
-    if (!this.page) {
-      throw new Error("Page not set. Call setPage() first.");
-    }
-
-    this.results = [];
-    
-    for (const [categoryId, category] of Object.entries(this.rules)) {
-      for (const rule of category.rules) {
-        // Skip rules above our conformance level
-        if (!this.levels.includes(rule.level)) continue;
-
-        const findings = await this.runRule(rule, categoryId, category);
-        this.results.push(...findings);
-      }
-    }
-
-    return this.generateReport();
-  }
-
-  /**
-   * Run a single rule
-   */
-  async runRule(rule, categoryId, category) {
-    const findings = [];
-
-    try {
-      // Page-level check
-      if (rule.checkPage) {
-        const result = await this.page.evaluate((ruleCheck) => {
-          // This is a simplified version - full impl would serialize the check function
-          return true;
-        }, rule.check.toString());
-
-        // Run the actual check
-        const passed = await this.page.evaluate(`(${rule.check.toString()})(document)`);
-        
-        if (!passed) {
-          findings.push(this.createFinding(rule, categoryId, category, null, 0));
-        }
-      }
-      // Element-level check
-      else if (rule.selector) {
-        if (rule.checkAll) {
-          // Check all elements together
-          const elements = await this.page.$$(rule.selector);
-          const result = await this.page.evaluate(
-            (selector, checkFn) => {
-              const els = document.querySelectorAll(selector);
-              const fn = new Function("elements", `return (${checkFn})(elements)`);
-              return fn(els);
-            },
-            rule.selector,
-            rule.check.toString()
-          );
-          
-          if (!result.valid) {
-            findings.push(this.createFinding(rule, categoryId, category, null, 0));
-          }
-        } else {
-          // Check each element individually
-          const elements = await this.page.$$(rule.selector);
-          
-          for (let i = 0; i < elements.length; i++) {
-            const el = elements[i];
-            
-            let passed = true;
-            
-            if (rule.checkComputed) {
-              passed = await this.page.evaluate(
-                (selector, index, checkFn) => {
-                  const el = document.querySelectorAll(selector)[index];
-                  const style = window.getComputedStyle(el);
-                  const fn = new Function("el", "style", `return (${checkFn})(el, style)`);
-                  return fn(el, style);
-                },
-                rule.selector,
-                i,
-                rule.check.toString()
-              );
-            } else {
-              passed = await this.page.evaluate(
-                (selector, index, checkFn) => {
-                  const el = document.querySelectorAll(selector)[index];
-                  const fn = new Function("el", `return (${checkFn})(el)`);
-                  return fn(el);
-                },
-                rule.selector,
-                i,
-                rule.check.toString()
-              );
-            }
-
-            if (!passed) {
-              const elementInfo = await el.evaluate(el => ({
-                tagName: el.tagName,
-                id: el.id,
-                className: el.className,
-                textContent: el.textContent?.substring(0, 50)
-              }));
-              
-              findings.push(this.createFinding(rule, categoryId, category, elementInfo, i));
-            }
-          }
-        }
-      }
-    } catch (error) {
-      // Log but don't fail entire audit
-      console.error(`Rule ${rule.id} failed:`, error.message);
-    }
-
-    return findings;
-  }
-
-  /**
-   * Create a finding object
-   */
-  createFinding(rule, categoryId, category, element, index) {
-    return {
-      id: `${rule.id}-${index}`,
-      ruleId: rule.id,
-      ruleName: rule.name,
-      wcag: rule.wcag,
-      level: rule.level,
-      impact: rule.impact,
-      category: categoryId,
-      categoryName: category.name,
-      principle: category.principle,
-      message: rule.message,
-      fix: rule.fix,
-      element: element ? {
-        tagName: element.tagName,
-        id: element.id,
-        className: element.className,
-        text: element.textContent
-      } : null
-    };
-  }
-
-  /**
-   * Generate audit report
-   */
-  generateReport() {
-    const byLevel = {
-      A: this.results.filter(r => r.level === "A"),
-      AA: this.results.filter(r => r.level === "AA"),
-      AAA: this.results.filter(r => r.level === "AAA")
-    };
-
-    const byImpact = {
-      critical: this.results.filter(r => r.impact === "critical"),
-      serious: this.results.filter(r => r.impact === "serious"),
-      moderate: this.results.filter(r => r.impact === "moderate"),
-      minor: this.results.filter(r => r.impact === "minor")
-    };
-
-    const byCategory = {};
-    for (const finding of this.results) {
-      if (!byCategory[finding.category]) {
-        byCategory[finding.category] = [];
-      }
-      byCategory[finding.category].push(finding);
-    }
-
-    // Calculate conformance
-    const conformance = {
-      A: byLevel.A.filter(r => r.impact === "critical" || r.impact === "serious").length === 0,
-      AA: byLevel.AA.filter(r => r.impact === "critical" || r.impact === "serious").length === 0 &&
-          byLevel.A.filter(r => r.impact === "critical" || r.impact === "serious").length === 0
-    };
-
-    return {
-      timestamp: new Date().toISOString(),
-      url: this.page.url(),
-      summary: {
-        total: this.results.length,
-        byLevel: {
-          A: byLevel.A.length,
-          AA: byLevel.AA.length,
-          AAA: byLevel.AAA.length
-        },
-        byImpact: {
-          critical: byImpact.critical.length,
-          serious: byImpact.serious.length,
-          moderate: byImpact.moderate.length,
-          minor: byImpact.minor.length
-        },
-        conformance
-      },
-      byCategory,
-      findings: this.results,
-      score: this.calculateScore()
-    };
-  }
-
-  /**
-   * Calculate accessibility score (0-100)
-   */
-  calculateScore() {
-    if (this.results.length === 0) return 100;
-
-    // Weight by impact
-    const weights = { critical: 25, serious: 10, moderate: 5, minor: 2 };
-    let deductions = 0;
-
-    for (const finding of this.results) {
-      deductions += weights[finding.impact] || 5;
-    }
-
-    return Math.max(0, 100 - deductions);
-  }
-
-  /**
-   * Generate WCAG compliance checklist
-   */
-  generateChecklist() {
-    const checklist = [];
-    
-    for (const [categoryId, category] of Object.entries(this.rules)) {
-      for (const rule of category.rules) {
-        if (!this.levels.includes(rule.level)) continue;
-
-        const failures = this.results.filter(r => r.ruleId === rule.id);
-        
-        checklist.push({
-          wcag: rule.wcag,
-          level: rule.level,
-          name: rule.name,
-          category: category.name,
-          status: failures.length === 0 ? "PASS" : "FAIL",
-          failures: failures.length
-        });
-      }
-    }
-
-    return checklist.sort((a, b) => {
-      // Sort by WCAG number
-      const aNum = parseFloat(a.wcag);
-      const bNum = parseFloat(b.wcag);
-      return aNum - bNum;
-    });
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════════
-// EXPORTS
-// ═══════════════════════════════════════════════════════════════════════════════
-
-module.exports = {
-  AccessibilityAuditEngine,
-  WCAG_RULES,
-  calculateContrastRatio,
-  getLuminance
-};