AI Components / A11y Report
A11y Report
WCAG compliance report with score ring, severity breakdown, expandable issues, and optional "How to fix" suggestions per issue. Built on cg-card. Modeled after Lighthouse / axe DevTools / Accessibility Insights.
ai-devops v0.5.0
Playground
Examples
Page audit with fixes
<ai-accessibility-report title="Page Audit" score="78" total-checks="24" style="max-width:560px;"></ai-accessibility-report>Perfect score (no issues)
<ai-accessibility-report title="Production Build" score="100" total-checks="42" style="max-width:560px;"></ai-accessibility-report>Critical (multiple errors)
<ai-accessibility-report title="Landing Page" score="42" total-checks="18" style="max-width:560px;"></ai-accessibility-report>Import
import { AiAccessibilityReport } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-accessibility-report';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
issues | { rule, level, severity, description, element?, fix? }[] | — | List of WCAG issues found |
score | number | 0 | Overall accessibility score 0–100 (drives ring color: red < 50, amber < 90, green ≥ 90) |
title | string | "Accessibility Report" | Report title |
total-checks | number | 0 | Total checks run; renders "X of Y checks passed" header. Defaults to issues.length when 0 |
Events
| Event | Detail | Description |
|---|---|---|
ai-a11y-issue-click | { issue, index } | An issue row was clicked/expanded |