docs: enterprise refactor plan with ralph specs

.ralph/specs/legacy/multi-browser-accessibility.md

@@ -0,0 +1,119 @@
+# ABE — Multi-Browser, Mobile Emulation & Accessibility Specification
+
+## Multi-browser testing
+
+### Browsers soportados (via Playwright)
+- chromium (Chrome/Edge) — siempre disponible
+- firefox — opcional
+- webkit (Safari) — opcional
+
+### Configuración en ExplorationConfig
+```typescript
+browsers: Array<'chromium' | 'firefox' | 'webkit'>;  // default: ['chromium']
+```
+
+### Comportamiento
+Cuando se especifican múltiples browsers:
+- ABE ejecuta la misma exploración en paralelo en cada browser
+- Cada browser crea su propia sub-sesión con el mismo seed
+- Los resultados se agrupan bajo la misma sesión padre
+- Las anomalías incluyen qué browser las detectó
+- Anomalías que aparecen en TODOS los browsers → severity += 1 level
+- Anomalías que aparecen solo en un browser → añadir tag "browser-specific: webkit"
+
+### Añadir a IAnomaly
+```typescript
+browser: 'chromium' | 'firefox' | 'webkit';
+browserVersion: string;
+```
+
+---
+
+## Mobile Viewport Emulation
+
+### Devices predefinidos (usar Playwright devices)
+```typescript
+type MobileDevice =
+  | 'iPhone 14'
+  | 'iPhone 14 Pro Max'
+  | 'Pixel 7'
+  | 'Galaxy S23'
+  | 'iPad Pro'
+  | 'none'   // desktop (default)
+```
+
+### En ExplorationConfig
+```typescript
+mobileDevice: MobileDevice;  // default: 'none'
+viewport: { width: number; height: number } | null;  // override manual
+```
+
+### Implementación en PlaywrightAgent
+```typescript
+// Si mobileDevice !== 'none':
+const device = playwright.devices[config.mobileDevice];
+const context = await browser.newContext({ ...device });
+```
+
+### Anomalías específicas de mobile
+Añadir tipo: `mobile_layout_issue` — detectado cuando:
+- Un elemento clickable tiene menos de 44x44px (WCAG touch target)
+- Hay scroll horizontal inesperado (viewport overflow)
+- Un elemento está fuera del viewport en mobile
+
+---
+
+## Accessibility Testing (axe-core)
+
+### Librería
+Usar `@axe-core/playwright` (integración oficial axe + Playwright).
+
+### Cuándo ejecutar
+Después de cada acción que cambia el estado (navigation + click que resulta en nuevo estado).
+NO ejecutar en cada acción fill (demasiado frecuente).
+
+### Implementación
+```typescript
+import { checkA11y } from 'axe-playwright';
+
+// En PlaywrightAgent, después de captureState():
+async function runAccessibilityCheck(page: Page): Promise<IAccessibilityResult[]> {
+  const results = await checkA11y(page, undefined, {
+    detailedReport: true,
+    detailedReportOptions: { html: true },
+  });
+  return results.violations.map(v => ({
+    id: v.id,
+    impact: v.impact,  // 'minor' | 'moderate' | 'serious' | 'critical'
+    description: v.description,
+    helpUrl: v.helpUrl,
+    nodes: v.nodes.length,
+    selector: v.nodes[0]?.target?.join(', '),
+  }));
+}
+```
+
+### Nuevo tipo de anomalía
+- type: `accessibility_violation`
+- severity mapping desde axe impact:
+  - minor → low
+  - moderate → medium
+  - serious → high
+  - critical → critical
+- description: "[axe] {violation.description}"
+- evidence: { helpUrl, affectedNodes, wcagCriteria }
+
+### En ExplorationConfig
+```typescript
+accessibility: {
+  enabled: boolean;          // default: true
+  minImpact: 'minor' | 'moderate' | 'serious' | 'critical';  // default: 'serious'
+  wcagLevel: 'A' | 'AA' | 'AAA';  // default: 'AA'
+}
+```
+
+### En el bug report
+Añadir sección "Accessibility Violations" en report.md con:
+- Lista de violaciones con impact badge
+- Link a la documentación de cada regla (helpUrl de axe)
+- Selector CSS del elemento afectado