wcag-a11y 0.3.2 → 0.3.4

package/dist/ai/gemini.js

@@ -8,11 +8,11 @@ export class GeminiProvider {
         this.apiKey = apiKey;
         this.model = model;
     }
-    async generateFixes(violations, strategy = 'rule') {
+    async generateFixes(violations, strategy = 'rule', framework) {
         if (violations.length === 0)
             return [];
         const groups = groupViolations(violations, strategy);
-        const prompt = buildPrompt(groups);
+        const prompt = buildPrompt(groups, framework);
         const url = `https://generativelanguage.googleapis.com/v1beta/models/${this.model}:generateContent?key=${this.apiKey}`;
         const response = await fetch(url, {
             method: 'POST',
@@ -27,9 +27,9 @@ export class GeminiProvider {
         }
         const data = await response.json();
         const text = data.candidates?.[0]?.content?.parts?.[0]?.text ?? '[]';
-        return this.parse(text, groups);
+        return this.parse(text, groups, framework);
     }
-    parse(text, groups) {
+    parse(text, groups, framework) {
         try {
             const jsonMatch = text.match(/\[[\s\S]*\]/);
             const fixes = jsonMatch ? JSON.parse(jsonMatch[0]) : [];
@@ -37,20 +37,21 @@ export class GeminiProvider {
                 const found = fixes.find((f) => f.ruleId === g.ruleId);
                 return found
                     ? { ...found, selectors: g.selectors, instanceCount: g.count }
-                    : this.fallbackFix(g);
+                    : this.fallbackFix(g, framework);
             });
         }
         catch {
-            return groups.map((g) => this.fallbackFix(g));
+            return groups.map((g) => this.fallbackFix(g, framework));
         }
     }
-    fallbackFix(g) {
+    fallbackFix(g, framework) {
         const v = g.representative;
         const selectorList = g.selectors.map((s) => `- ${s}`).join('\n');
         const explanation = fallbackExplanation(g.ruleId, g.description, g.wcag, g.level);
+        const fwNote = framework ? `This project uses ${framework}. ` : '';
         const prompt = g.count > 1
-            ? `Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected elements (${g.count} instances):\n${selectorList}\n\nRepresentative HTML:\n\`${v.html.slice(0, 300)}\`\n\nApply the fix to all ${g.count} instances in the codebase to comply with WCAG 2.1 SC ${g.wcag}.`
-            : `Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected element:\n- Selector: \`${g.selectors[0]}\`\n- HTML: \`${v.html.slice(0, 300)}\`\n\nApply the fix to comply with WCAG 2.1 SC ${g.wcag}.`;
+            ? `${fwNote}Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected elements (${g.count} instances):\n${selectorList}\n\nRepresentative HTML:\n\`${v.html.slice(0, 300)}\`\n\nApply the fix to all ${g.count} instances in the codebase to comply with WCAG 2.1 SC ${g.wcag}.`
+            : `${fwNote}Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected element:\n- Selector: \`${g.selectors[0]}\`\n- HTML: \`${v.html.slice(0, 300)}\`\n\nApply the fix to comply with WCAG 2.1 SC ${g.wcag}.`;
         return {
             ruleId: g.ruleId,
             selectors: g.selectors,

package/dist/ai/ollama.js

@@ -8,11 +8,11 @@ export class OllamaProvider {
         this.baseUrl = baseUrl;
         this.model = model;
     }
-    async generateFixes(violations, strategy = 'rule') {
+    async generateFixes(violations, strategy = 'rule', framework) {
         if (violations.length === 0)
             return [];
         const groups = groupViolations(violations, strategy);
-        const prompt = buildPrompt(groups);
+        const prompt = buildPrompt(groups, framework);
         const response = await fetch(`${this.baseUrl}/api/generate`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -26,29 +26,30 @@ export class OllamaProvider {
         try {
             const jsonMatch = text.match(/\[[\s\S]*\]/);
             if (!jsonMatch)
-                return this.fallback(groups);
+                return this.fallback(groups, framework);
             const fixes = JSON.parse(jsonMatch[0]);
             return groups.map((g) => {
                 const found = fixes.find((f) => f.ruleId === g.ruleId);
                 return found
                     ? { ...found, selectors: g.selectors, instanceCount: g.count }
-                    : this.fallbackFix(g);
+                    : this.fallbackFix(g, framework);
             });
         }
         catch {
-            return this.fallback(groups);
+            return this.fallback(groups, framework);
         }
     }
-    fallback(groups) {
-        return groups.map((g) => this.fallbackFix(g));
+    fallback(groups, framework) {
+        return groups.map((g) => this.fallbackFix(g, framework));
     }
-    fallbackFix(g) {
+    fallbackFix(g, framework) {
         const v = g.representative;
         const selectorList = g.selectors.map((s) => `- ${s}`).join('\n');
         const explanation = fallbackExplanation(g.ruleId, g.description, g.wcag, g.level);
+        const fwNote = framework ? `This project uses ${framework}. ` : '';
         const prompt = g.count > 1
-            ? `Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected elements (${g.count} instances):\n${selectorList}\n\nRepresentative HTML:\n\`${v.html.slice(0, 300)}\`\n\nApply the fix to all ${g.count} instances in the codebase to comply with WCAG 2.1 SC ${g.wcag}.`
-            : `Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected element:\n- Selector: \`${g.selectors[0]}\`\n- HTML: \`${v.html.slice(0, 300)}\`\n\nApply the fix to comply with WCAG 2.1 SC ${g.wcag}.`;
+            ? `${fwNote}Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected elements (${g.count} instances):\n${selectorList}\n\nRepresentative HTML:\n\`${v.html.slice(0, 300)}\`\n\nApply the fix to all ${g.count} instances in the codebase to comply with WCAG 2.1 SC ${g.wcag}.`
+            : `${fwNote}Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected element:\n- Selector: \`${g.selectors[0]}\`\n- HTML: \`${v.html.slice(0, 300)}\`\n\nApply the fix to comply with WCAG 2.1 SC ${g.wcag}.`;
         return {
             ruleId: g.ruleId,
             selectors: g.selectors,

package/dist/ai/openai.js

@@ -8,11 +8,11 @@ export class OpenAIProvider {
         this.apiKey = apiKey;
         this.model = model;
     }
-    async generateFixes(violations, strategy = 'rule') {
+    async generateFixes(violations, strategy = 'rule', framework) {
         if (violations.length === 0)
             return [];
         const groups = groupViolations(violations, strategy);
-        const prompt = buildPrompt(groups);
+        const prompt = buildPrompt(groups, framework);
         const response = await fetch('https://api.openai.com/v1/chat/completions', {
             method: 'POST',
             headers: {
@@ -31,9 +31,9 @@ export class OpenAIProvider {
         }
         const data = await response.json();
         const text = data.choices?.[0]?.message?.content ?? '[]';
-        return this.parse(text, groups);
+        return this.parse(text, groups, framework);
     }
-    parse(text, groups) {
+    parse(text, groups, framework) {
         try {
             const jsonMatch = text.match(/\[[\s\S]*\]/);
             const fixes = jsonMatch ? JSON.parse(jsonMatch[0]) : [];
@@ -41,20 +41,21 @@ export class OpenAIProvider {
                 const found = fixes.find((f) => f.ruleId === g.ruleId);
                 return found
                     ? { ...found, selectors: g.selectors, instanceCount: g.count }
-                    : this.fallbackFix(g);
+                    : this.fallbackFix(g, framework);
             });
         }
         catch {
-            return groups.map((g) => this.fallbackFix(g));
+            return groups.map((g) => this.fallbackFix(g, framework));
         }
     }
-    fallbackFix(g) {
+    fallbackFix(g, framework) {
         const v = g.representative;
         const selectorList = g.selectors.map((s) => `- ${s}`).join('\n');
         const explanation = fallbackExplanation(g.ruleId, g.description, g.wcag, g.level);
+        const fwNote = framework ? `This project uses ${framework}. ` : '';
         const prompt = g.count > 1
-            ? `Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected elements (${g.count} instances):\n${selectorList}\n\nRepresentative HTML:\n\`${v.html.slice(0, 300)}\`\n\nApply the fix to all ${g.count} instances in the codebase to comply with WCAG 2.1 SC ${g.wcag}.`
-            : `Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected element:\n- Selector: \`${g.selectors[0]}\`\n- HTML: \`${v.html.slice(0, 300)}\`\n\nApply the fix to comply with WCAG 2.1 SC ${g.wcag}.`;
+            ? `${fwNote}Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected elements (${g.count} instances):\n${selectorList}\n\nRepresentative HTML:\n\`${v.html.slice(0, 300)}\`\n\nApply the fix to all ${g.count} instances in the codebase to comply with WCAG 2.1 SC ${g.wcag}.`
+            : `${fwNote}Fix WCAG 2.1 SC ${g.wcag} (Level ${g.level}) — ${g.description}\n\nAffected element:\n- Selector: \`${g.selectors[0]}\`\n- HTML: \`${v.html.slice(0, 300)}\`\n\nApply the fix to comply with WCAG 2.1 SC ${g.wcag}.`;
         return {
             ruleId: g.ruleId,
             selectors: g.selectors,

package/dist/ai/prompt.js

@@ -1,4 +1,16 @@
-export function buildPrompt(groups) {
+const FRAMEWORK_SYNTAX = {
+    'Next.js': 'React/TSX (JSX)',
+    'Gatsby': 'React/JSX',
+    'Remix': 'React/TSX',
+    'Nuxt.js': 'Vue 3 SFC (.vue files)',
+    'Vue 3': 'Vue 3 SFC (.vue files)',
+    'Vue 2': 'Vue 2 SFC (.vue files)',
+    'Angular': 'Angular template',
+    'React': 'React JSX/TSX',
+    'Svelte': 'Svelte (.svelte files)',
+};
+export function buildPrompt(groups, framework) {
+    const syntax = framework ? (FRAMEWORK_SYNTAX[framework] ?? 'JSX/TSX') : null;
     const items = groups
         .map((g, i) => `${i + 1}. Rule: ${g.ruleId} | WCAG ${g.wcag} (Level ${g.level}) | Impact: ${g.impact}
    Page: ${g.page}
@@ -7,14 +19,23 @@ export function buildPrompt(groups) {
    Representative Element: ${g.representative.html}
    Problem: ${g.description}`)
         .join('\n\n');
-    return `You are a WCAG accessibility expert. Analyze these violations and return a JSON array.
+    const frameworkLine = framework
+        ? `\nFramework: ${framework}. All "fixedCode" values must use ${syntax} syntax — not raw HTML.\n`
+        : '';
+    const fixedCodeInstruction = syntax
+        ? `"fixedCode": the corrected snippet in ${syntax} syntax (component/template code only — no imports, no surrounding boilerplate)`
+        : `"fixedCode": the corrected HTML snippet only (no explanation, just code)`;
+    const optimalPromptInstruction = framework
+        ? `"optimalPrompt": a ready-to-paste prompt for an AI coding assistant (Cursor, Copilot, Claude) working in a ${framework} codebase. Structure it as: (1) state the WCAG 2.1/2.2 criterion being violated, (2) list the affected selectors and HTML snippets, (3) state the exact change needed in ${syntax} syntax. Focus solely on the fix.`
+        : `"optimalPrompt": a ready-to-paste prompt for an AI coding assistant (Cursor, Copilot, Claude). Structure it as: (1) state the WCAG 2.1/2.2 criterion being violated, (2) list the affected selectors and HTML snippets, (3) state the exact change needed. Focus solely on the fix.`;
+    return `You are a WCAG accessibility expert. Analyze these violations and return a JSON array.${frameworkLine}
 Each item must have:
 - "ruleId": the rule id from the input
 - "selectors": array of CSS selectors affected (copy from input)
-- "explanation": 1-2 sentences on concrete user impact — name exactly who is affected (e.g. "screen reader users", "keyboard-only users", "users with low vision") and what they cannot do because of this specific violation. Do not write generic statements like "users with disabilities may be affected."
-- "fixedCode": the corrected HTML snippet only (no explanation, just code)
+- "explanation": 1-2 sentences on concrete user impact — name exactly who is affected (e.g. "screen reader users", "keyboard-only users", "users with low vision") and what they cannot do because of this specific violation. Do not write generic statements.
+- ${fixedCodeInstruction}
 - "wcagReference": the full criterion name, e.g. "WCAG 2.1 SC 1.1.1 Non-text Content (Level A)"
-- "optimalPrompt": a ready-to-paste prompt for an AI coding assistant (Cursor, Copilot, Claude). Structure it as: (1) state the WCAG 2.1/2.2 criterion being violated (e.g. "WCAG 2.1 SC 1.1.1 Non-text Content, Level A"), (2) list the affected selectors and HTML snippets, (3) state the exact code change needed to comply. Focus solely on the fix — do not explain why WCAG exists or what accessibility is. Be precise and actionable.
+- ${optimalPromptInstruction}
 
 Return ONLY a valid JSON array. No markdown, no code fences, no explanation outside the JSON.
 

package/dist/cli.js

@@ -11,7 +11,7 @@ const program = new Command();
 program
     .name('wcag-a11y')
     .description('WCAG 2.1/2.2 accessibility auditor with AI-powered fixes')
-    .version('0.3.2');
+    .version('0.3.4');
 program
     .command('init')
     .description('Create a11y.config.json in the current directory')
@@ -52,7 +52,7 @@ program
             if (!opts.fastMode) {
                 console.log(`\nGenerating AI fixes for ${ruleGroups.length} rule groups (${allViolations.length} violations)...`);
             }
-            const fixes = await provider.generateFixes(allViolations, strategy);
+            const fixes = await provider.generateFixes(allViolations, strategy, result.framework);
             if (opts.terminal) {
                 printAIPrompts(fixes, { explain: opts.explain, fastMode: opts.fastMode });
             }

package/dist/crawler.js

@@ -1,5 +1,36 @@
 import { chromium } from 'playwright';
 import { scanPage } from './engine/index.js';
+async function detectFramework(page) {
+    try {
+        return await page.evaluate(() => {
+            const w = window;
+            if (w['__NEXT_DATA__'])
+                return 'Next.js';
+            if (w['___gatsby'])
+                return 'Gatsby';
+            if (w['__remixContext'])
+                return 'Remix';
+            if (w['__nuxt'] || w['$nuxt'])
+                return 'Nuxt.js';
+            if (w['__vue_app__'])
+                return 'Vue 3';
+            if (w['Vue'])
+                return 'Vue 2';
+            if (document.querySelector('[ng-version]') !== null)
+                return 'Angular';
+            const root = document.getElementById('root') ?? document.getElementById('app') ?? document.body;
+            if (root && Object.keys(root).some((k) => k.startsWith('__reactFiber') || k.startsWith('__reactContainer'))) {
+                return 'React';
+            }
+            if (document.querySelector('[data-svelte-h]') !== null)
+                return 'Svelte';
+            return undefined;
+        });
+    }
+    catch {
+        return undefined;
+    }
+}
 export async function crawl(options) {
     const { url, pages = ['/'], crawl: autoCrawl = false } = options;
     const baseUrl = url.replace(/\/$/, '');
@@ -23,10 +54,13 @@ export async function crawl(options) {
             }
         }
         const results = [];
+        let framework;
         for (const pageUrl of pagesToVisit) {
             const page = await context.newPage();
             try {
                 await page.goto(pageUrl, { waitUntil: 'networkidle', timeout: 30000 });
+                if (!framework)
+                    framework = await detectFramework(page);
                 const result = await scanPage(page, pageUrl);
                 results.push(result);
             }
@@ -46,6 +80,7 @@ export async function crawl(options) {
             seriousCount: allViolations.filter((v) => v.impact === 'serious').length,
             moderateCount: allViolations.filter((v) => v.impact === 'moderate').length,
             minorCount: allViolations.filter((v) => v.impact === 'minor').length,
+            framework,
         };
     }
     finally {

package/dist/demo.js

@@ -74,7 +74,7 @@ export async function runDemo(opts) {
             const provider = createAIProvider(config);
             const violations = result.pages.flatMap((p) => p.violations);
             console.log(`\nGenerating AI fixes for ${violations.length} violations...`);
-            const fixes = await provider.generateFixes(violations, 'rule');
+            const fixes = await provider.generateFixes(violations, 'rule', result.framework);
             printAIPrompts(fixes, { explain: true });
             if (opts.report)
                 generateMarkdownReport(result, fixes);

package/dist/reporter/markdown.js

@@ -52,9 +52,25 @@ function buildFullReport(result, fixes) {
             lines.push('✅ No violations found.', '', '---', '');
             continue;
         }
+        // Group violations by ruleId so grouped fixes aren't repeated per instance
+        const byRule = new Map();
         for (const v of page.violations) {
+            const group = byRule.get(v.ruleId) ?? [];
+            group.push(v);
+            byRule.set(v.ruleId, group);
+        }
+        for (const group of byRule.values()) {
+            const v = group[0];
             const fix = fixes.find((f) => f.ruleId === v.ruleId);
-            lines.push(`### ${IMPACT_EMOJI[v.impact] ?? '⚪'} [${v.impact.toUpperCase()}] ${v.description}`, '', `**Rule:** \`${v.ruleId}\`  `, `**WCAG:** ${fix?.wcagReference ?? `SC ${v.wcag} (Level ${v.level})`}  `, `**Selector:** \`${v.selector}\``, '', '**Violating element:**', '```html', v.html, '```', '');
+            const others = group.slice(1);
+            lines.push(`### ${IMPACT_EMOJI[v.impact] ?? '⚪'} [${v.impact.toUpperCase()}] ${v.description}`, '', `**Rule:** \`${v.ruleId}\`  `, `**WCAG:** ${fix?.wcagReference ?? `SC ${v.wcag} (Level ${v.level})`}  `, `**Instances:** ${group.length}`, '', '**Representative element:**', `\`${v.selector}\``, '```html', v.html, '```', '');
+            if (others.length > 0) {
+                lines.push(`**Also affects ${others.length} more element${others.length > 1 ? 's' : ''} on this page:**`);
+                for (const o of others) {
+                    lines.push(`- \`${o.selector}\``);
+                }
+                lines.push('');
+            }
             if (fix) {
                 lines.push('**Why it matters:**', fix.explanation, '', '**Fixed code:**', '```html', fix.fixedCode, '```', '', '**📋 Prompt for your AI assistant (Cursor / Copilot / Claude):**', '```', fix.optimalPrompt, '```', '');
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wcag-a11y",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "WCAG 2.1/2.2 accessibility auditor with AI-powered fixes",
   "type": "module",
   "bin": {