Autonomous-Bug-Explorer/.ralph/specs/legacy/multi-browser-accessibility.md

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

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

browser: 'chromium' | 'firefox' | 'webkit';
browserVersion: string;

---

Mobile Viewport Emulation

Devices predefinidos (usar Playwright devices)

type MobileDevice =
  | 'iPhone 14'
  | 'iPhone 14 Pro Max'
  | 'Pixel 7'
  | 'Galaxy S23'
  | 'iPad Pro'
  | 'none'   // desktop (default)

En ExplorationConfig

mobileDevice: MobileDevice;  // default: 'none'
viewport: { width: number; height: number } | null;  // override manual

Implementación en PlaywrightAgent

// 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

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

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