# 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