hauntview 0.0.0-stage → 0.0.6

package/src/profiles/accessibility-cognitive.ts

@@ -0,0 +1,261 @@
+/**
+ * Accessibility: Cognitive Load Profile
+ * Validates cognitive accessibility (clarity, complexity, instructions)
+ */
+
+import { Page } from 'playwright';
+import { Finding, ProfileResult } from '../types';
+
+export class AccessibilityCognitiveProfile {
+  private profileId: string;
+  private profileName: string;
+
+  constructor(profileId: string, profileName: string) {
+    this.profileId = profileId;
+    this.profileName = profileName;
+  }
+
+  async execute(page: Page, url: string): Promise<ProfileResult> {
+    const startTime = Date.now();
+    const findings: Finding[] = [];
+
+    try {
+      await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+
+      // Analyze page complexity
+      const complexity = await page.evaluate(() => {
+        const elements = document.querySelectorAll('*');
+        return {
+          elements: elements.length,
+          forms: document.querySelectorAll('form').length,
+          inputs: document.querySelectorAll('input, select, textarea').length,
+          buttons: document.querySelectorAll('button, a[role="button"]').length,
+          animations: document.querySelectorAll('[style*="animation"], [style*="transition"]')
+            .length,
+          nested: Math.max(
+            ...Array.from(elements).map((el: Element) => {
+              let depth = 0;
+              let parent = el.parentElement;
+              while (parent) {
+                depth++;
+                parent = parent.parentElement;
+              }
+              return depth;
+            })
+          ),
+        };
+      });
+
+      if (complexity.elements > 500) {
+        findings.push({
+          id: `${this.profileId}-too-many-elements`,
+          profileId: this.profileId,
+          severity: 'warning',
+          category: 'cognitive',
+          message: `Page has ${complexity.elements} DOM elements, consider simplification`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      if (complexity.nested > 15) {
+        findings.push({
+          id: `${this.profileId}-deep-nesting`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'cognitive',
+          message: `Maximum nesting depth is ${complexity.nested} levels, consider flattening`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      if (complexity.animations > 10) {
+        findings.push({
+          id: `${this.profileId}-excessive-animation`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'cognitive',
+          message: `${complexity.animations} animated elements, may overwhelm users`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for auto-playing audio/video
+      const autoplay = await page.locator('audio[autoplay], video[autoplay]').count();
+      if (autoplay > 0) {
+        findings.push({
+          id: `${this.profileId}-autoplay`,
+          profileId: this.profileId,
+          severity: 'warning',
+          category: 'cognitive',
+          message: `${autoplay} media elements auto-play, breaks cognitive accessibility`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for prefers-reduced-motion
+      const reducedMotion = await page.evaluate(() => {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      });
+
+      if (!reducedMotion) {
+        findings.push({
+          id: `${this.profileId}-no-reduced-motion`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'cognitive',
+          message: 'Add prefers-reduced-motion media query support for animations',
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check form complexity
+      if (complexity.forms > 0) {
+        const formComplexity = await page.evaluate(() => {
+          const forms = document.querySelectorAll('form');
+          const issues = [];
+
+          for (const form of forms) {
+            const inputs = form.querySelectorAll('input, select, textarea').length;
+            const labels = form.querySelectorAll('label').length;
+
+            if (inputs > 15) {
+              issues.push(`Form with ${inputs} fields, consider multi-step`);
+            }
+
+            if (inputs > labels) {
+              issues.push(`${inputs - labels} form fields missing labels`);
+            }
+          }
+
+          return issues;
+        });
+
+        if (formComplexity.length > 0) {
+          findings.push({
+            id: `${this.profileId}-form-complexity`,
+            profileId: this.profileId,
+            severity: 'info',
+            category: 'cognitive',
+            message: `Form complexity issue: ${formComplexity[0]}`,
+            timestamp: Date.now(),
+            isClassified: false,
+          });
+        }
+      }
+
+      // Check for clear instructions
+      const hasInstructions = await page.evaluate(() => {
+        const text = document.body.textContent?.toLowerCase() || '';
+        return (
+          text.includes('step') ||
+          text.includes('instructions') ||
+          text.includes('how to') ||
+          text.includes('guide')
+        );
+      });
+
+      if (!hasInstructions) {
+        findings.push({
+          id: `${this.profileId}-no-instructions`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'cognitive',
+          message: 'Page lacks clear instructions or guidance for users',
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for abbreviations explanation
+      const abbreviations = await page.locator('abbr').count();
+      const abbreviationsWithTitle = await page.locator('abbr[title]').count();
+
+      if (abbreviations > 0 && abbreviationsWithTitle < abbreviations) {
+        findings.push({
+          id: `${this.profileId}-unexplained-abbr`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'cognitive',
+          message: `${abbreviations - abbreviationsWithTitle} abbreviations lack title/explanation`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for readability level (simplified check)
+      const avgWordLength = await page.evaluate(() => {
+        const text = document.body.innerText || '';
+        const words = text.split(/\s+/).filter((w) => w.length > 0);
+        if (words.length === 0) return 0;
+        const totalChars = words.reduce((sum, w) => sum + w.length, 0);
+        return totalChars / words.length;
+      });
+
+      if (avgWordLength > 7) {
+        findings.push({
+          id: `${this.profileId}-complex-language`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'cognitive',
+          message: `Average word length ${avgWordLength.toFixed(1)} characters, consider simpler language`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for paragraph length
+      const paragraphs = await page.evaluate(() => {
+        return Array.from(document.querySelectorAll('p')).filter((p: Element) => {
+          const words = p.textContent?.split(/\s+/).length || 0;
+          return words > 100;
+        }).length;
+      });
+
+      if (paragraphs > 0) {
+        findings.push({
+          id: `${this.profileId}-long-paragraphs`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'cognitive',
+          message: `${paragraphs} paragraphs with > 100 words, consider breaking up`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+    } catch (error) {
+      findings.push({
+        id: `${this.profileId}-execution-error`,
+        profileId: this.profileId,
+        severity: 'error',
+        category: 'execution',
+        message: `Cognitive profile error: ${error instanceof Error ? error.message : String(error)}`,
+        timestamp: Date.now(),
+        isClassified: false,
+      });
+    }
+
+    const endTime = Date.now();
+    const metadata = await page.context().browser()?.version();
+
+    return {
+      profileId: this.profileId,
+      profileName: this.profileName,
+      success: findings.filter((f) => f.severity === 'error').length === 0,
+      startTime,
+      endTime,
+      duration: endTime - startTime,
+      findings,
+      screenshots: [],
+      metadata: {
+        browserEngine: 'webkit',
+        browserVersion: metadata || 'unknown',
+        nodeVersion: process.version,
+      },
+    };
+  }
+}

package/src/profiles/accessibility-keyboard.ts

@@ -0,0 +1,225 @@
+/**
+ * Accessibility: Keyboard Navigation Profile
+ * Validates keyboard accessibility, tab order, and focus management
+ */
+
+import { Page } from 'playwright';
+import { Finding, ProfileResult } from '../types';
+
+export class AccessibilityKeyboardProfile {
+  private profileId: string;
+  private profileName: string;
+
+  constructor(profileId: string, profileName: string) {
+    this.profileId = profileId;
+    this.profileName = profileName;
+  }
+
+  async execute(page: Page, url: string): Promise<ProfileResult> {
+    const startTime = Date.now();
+    const findings: Finding[] = [];
+
+    try {
+      await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+
+      // Check for positive tabindex values
+      const positiveTabindex = await page.evaluate(() => {
+        const elements = Array.from(document.querySelectorAll('[tabindex]'));
+        return elements.filter(
+          (el: Element) => parseInt((el as HTMLElement).getAttribute('tabindex') || '0') > 0
+        ).length;
+      });
+
+      if (positiveTabindex > 0) {
+        findings.push({
+          id: `${this.profileId}-positive-tabindex`,
+          profileId: this.profileId,
+          severity: 'warning',
+          category: 'accessibility',
+          message: `${positiveTabindex} elements use positive tabindex, breaks tab order`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for keyboard-only accessible buttons
+      const buttons = await page.locator('button, a, input').all();
+      let nonKeyboardAccessible = 0;
+
+      for (const button of buttons) {
+        const isButton = await button.evaluate((el: Element) => el.tagName === 'BUTTON');
+        const isLink = await button.evaluate((el: Element) => el.tagName === 'A');
+        const isInput = await button.evaluate(
+          (el: Element) =>
+            el.tagName === 'INPUT' &&
+            ['button', 'submit', 'reset'].includes((el as HTMLInputElement).type)
+        );
+
+        if (!isButton && !isLink && !isInput) {
+          const onClick = await button.getAttribute('onclick');
+          if (onClick) {
+            // Div/span with onclick, check for keyboard handler
+            const onKeyDown = await button.getAttribute('onkeydown');
+            if (!onKeyDown) {
+              nonKeyboardAccessible++;
+            }
+          }
+        }
+      }
+
+      if (nonKeyboardAccessible > 0) {
+        findings.push({
+          id: `${this.profileId}-non-keyboard-buttons`,
+          profileId: this.profileId,
+          severity: 'warning',
+          category: 'accessibility',
+          message: `${nonKeyboardAccessible} elements may not be keyboard accessible`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for focus visible styles
+      const focusStyles = await page.evaluate(() => {
+        const styles = getComputedStyle(document.body);
+        return {
+          hasFocus: styles.outline !== 'none',
+        };
+      });
+
+      if (!focusStyles.hasFocus) {
+        findings.push({
+          id: `${this.profileId}-no-focus-styles`,
+          profileId: this.profileId,
+          severity: 'warning',
+          category: 'accessibility',
+          message: 'Focus indicator not visible with outline styling',
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for keyboard shortcuts documentation
+      const hasAccessKey = await page.evaluate(() => {
+        return document.querySelectorAll('[accesskey]').length > 0;
+      });
+
+      if (hasAccessKey) {
+        findings.push({
+          id: `${this.profileId}-accesskey`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'accessibility',
+          message: 'Page uses accesskey attribute, should document shortcuts',
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for focus trap in modals
+      const modals = await page.locator('[role="dialog"], .modal').all();
+      if (modals.length > 0) {
+        const focusTrapped = await modals[0].evaluate(() => {
+          const modal = document.querySelector('[role="dialog"], .modal') as HTMLElement;
+          if (!modal) return false;
+
+          const focusableElements = modal.querySelectorAll(
+            'button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          ) as NodeListOf<Element>;
+          return focusableElements.length > 0;
+        });
+
+        if (!focusTrapped) {
+          findings.push({
+            id: `${this.profileId}-modal-focus`,
+            profileId: this.profileId,
+            severity: 'warning',
+            category: 'accessibility',
+            message: 'Modal dialog has no focusable elements',
+            timestamp: Date.now(),
+            isClassified: false,
+          });
+        }
+      }
+
+      // Check for Tab key handling in forms
+      const formInputs = await page.locator('input[type="text"], textarea').all();
+      let tabHandled = 0;
+
+      for (const input of formInputs) {
+        const onKeyDown = await input.getAttribute('onkeydown');
+        if (onKeyDown?.includes('Tab')) {
+          tabHandled++;
+        }
+      }
+
+      if (tabHandled > 0) {
+        findings.push({
+          id: `${this.profileId}-tab-handling`,
+          profileId: this.profileId,
+          severity: 'info',
+          category: 'accessibility',
+          message: `${tabHandled} form inputs handle Tab key, ensure escape to native tab works`,
+          timestamp: Date.now(),
+          isClassified: false,
+        });
+      }
+
+      // Check for Escape key to close overlays
+      const overlays = await page.locator('[role="dialog"], .modal, .popover').all();
+      if (overlays.length > 0) {
+        const hasEscapeHandler = await overlays[0].evaluate(() => {
+          const el = document.querySelector('[role="dialog"], .modal, .popover') as HTMLElement;
+          interface ChromeWindow extends Window {
+            getEventListeners?: (target: EventTarget) => {
+              keydown?: Array<{ listener: { toString(): string } }>;
+            };
+          }
+          const listeners = (window as ChromeWindow).getEventListeners?.(el);
+          return listeners?.keydown?.some((l) => l.listener.toString().includes('Escape')) ?? false;
+        });
+
+        if (!hasEscapeHandler) {
+          findings.push({
+            id: `${this.profileId}-escape-close`,
+            profileId: this.profileId,
+            severity: 'info',
+            category: 'accessibility',
+            message: 'Overlay/modal should close on Escape key',
+            timestamp: Date.now(),
+            isClassified: false,
+          });
+        }
+      }
+    } catch (error) {
+      findings.push({
+        id: `${this.profileId}-execution-error`,
+        profileId: this.profileId,
+        severity: 'error',
+        category: 'execution',
+        message: `Keyboard profile error: ${error instanceof Error ? error.message : String(error)}`,
+        timestamp: Date.now(),
+        isClassified: false,
+      });
+    }
+
+    const endTime = Date.now();
+    const metadata = await page.context().browser()?.version();
+
+    return {
+      profileId: this.profileId,
+      profileName: this.profileName,
+      success: findings.filter((f) => f.severity === 'error').length === 0,
+      startTime,
+      endTime,
+      duration: endTime - startTime,
+      findings,
+      screenshots: [],
+      metadata: {
+        browserEngine: 'webkit',
+        browserVersion: metadata || 'unknown',
+        nodeVersion: process.version,
+      },
+    };
+  }
+}