dtp-caal 1.0.0

package/dist/analyzer.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.analyzeElement = analyzeElement;
+exports.analyzeElements = analyzeElements;
+const groq_sdk_1 = __importDefault(require("groq-sdk"));
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config();
+const apiKey = process.env.GROQ_API_KEY || '';
+const groq = new groq_sdk_1.default({ apiKey });
+const delay = (ms) => new Promise(res => setTimeout(res, ms));
+async function analyzeElement(element) {
+    const prompt = `
+You are an expert accessibility engineer. Your task is to analyze an HTML/JSX element within its parent context to determine if it meets WCAG accessibility standards. 
+You must output ONLY valid JSON without any markdown code blocks or conversational text.
+
+Context:
+Parent Code:
+\`\`\`
+${element.parentHtml}
+\`\`\`
+
+Target Element Code:
+\`\`\`
+${element.elementHtml}
+\`\`\`
+
+Analyze the target element. Does it have sufficient context for screen readers? Does it use semantic HTML properly? Is it missing ARIA attributes where necessary?
+
+Be extremely accurate in your code fix. Ensure the replacement code contains all necessary structural semantics, aria-labels, alt text, and valid roles based on the parent context.
+CRITICAL INSTRUCTIONS FOR FIX:
+1. Your suggested fix MUST COMPLETELY resolve the accessibility issue. If the fixed element were analyzed again, it MUST pass all WCAG checks.
+2. Provide the COMPLETE Target Element in your fix, including its opening tag, all original children, and its closing tag. Do NOT provide partial snippets.
+3. The replacement code MUST match the exact framework syntax of the input. If the input uses React JSX syntax (like \`className\`, camelCase attributes, or \`style={{}}\`), the output MUST be valid JSX. If standard HTML, output standard HTML.
+4. Maintain all existing non-accessibility attributes (e.g., \`id\`, \`class\`, \`onClick\`, \`href\`, etc.) exactly as they appear in the original Target Element.
+
+Return a JSON object with this exact structure:
+{
+    "isAccessible": boolean,
+    "issueTitle": string (or null if isAccessible is true. A concise title of the WCAG violation),
+    "explanation": string (or null. Explain the issue concisely to a developer),
+    "suggestedFixCode": string (or null. Provide the highly accurate, complete replacement code for the Target Element that fixes the issue, matching the input's syntax),
+    "fixReasoning": string (or null. Briefly explain exactly what the suggested fix code does and how it solves the accessibility issue)
+}
+`;
+    let retries = 3;
+    let delayMs = 2000;
+    while (retries > 0) {
+        try {
+            const completion = await groq.chat.completions.create({
+                messages: [
+                    {
+                        role: 'system',
+                        content: 'You are an AI that only outputs valid JSON. Do not output anything else.'
+                    },
+                    {
+                        role: 'user',
+                        content: prompt
+                    }
+                ],
+                model: 'llama-3.3-70b-versatile',
+                response_format: { type: 'json_object' }
+            });
+            const text = completion.choices[0]?.message?.content;
+            if (text) {
+                const parsed = JSON.parse(text);
+                return {
+                    ...element,
+                    ...parsed
+                };
+            }
+            throw new Error("No text in response");
+        }
+        catch (error) {
+            if (error.status === 503 || error.status === 429 || error.message?.includes('503') || error.message?.includes('429')) {
+                console.warn(`[WARN] Rate limited. Retries left: ${retries - 1}. Retrying in ${delayMs}ms...`);
+                retries--;
+                if (retries === 0) {
+                    return {
+                        ...element,
+                        isAccessible: false,
+                        error: "Failed to analyze due to API rate limits."
+                    };
+                }
+                await delay(delayMs);
+                delayMs *= 2;
+            }
+            else {
+                return {
+                    ...element,
+                    isAccessible: false,
+                    error: error.message || "Unknown API error"
+                };
+            }
+        }
+    }
+    return {
+        ...element,
+        isAccessible: false,
+        error: "Exhausted retries"
+    };
+}
+async function analyzeElements(elements) {
+    const results = [];
+    console.log(`Analyzing ${elements.length} elements using Groq API...`);
+    for (let i = 0; i < elements.length; i++) {
+        // Log progress
+        console.log(`Analyzing element ${i + 1}/${elements.length}: <${elements[i].tagName}>...`);
+        const result = await analyzeElement(elements[i]);
+        results.push(result);
+        // Wait briefly between requests to avoid rate limits
+        if (i < elements.length - 1) {
+            await delay(1000);
+        }
+    }
+    return results;
+}

package/dist/index.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const chalk_1 = __importDefault(require("chalk"));
+const scanner_1 = require("./scanner");
+const analyzer_1 = require("./analyzer");
+const reporter_1 = require("./reporter");
+const remediator_1 = require("./remediator");
+const program = new commander_1.Command();
+program
+    .name('a11y-audit')
+    .description('Context-Aware Accessibility Linter CLI')
+    .version('1.0.0')
+    .requiredOption('-u, --url <url>', 'URL to scan (e.g., http://localhost:3000)', 'http://localhost:3000')
+    .option('-o, --output <path>', 'Output file path', './caal-report.md')
+    .option('-f, --format <format>', 'Output format (json or md)', 'md')
+    .option('--auto-fix', 'Automatically attempt to fix source files (beta)')
+    .option('--src-dir <path>', 'Directory containing source files for auto-fix', './')
+    .action(async (options) => {
+    try {
+        console.log(chalk_1.default.blue(`Starting accessibility audit for: ${options.url}`));
+        // Step 1: Scan page and extract elements
+        const scannedElements = await (0, scanner_1.scanPage)(options.url);
+        if (scannedElements.length === 0) {
+            console.log(chalk_1.default.yellow('No relevant elements found to analyze.'));
+            return;
+        }
+        // Step 2: Analyze with LLM
+        if (!process.env.GROQ_API_KEY) {
+            console.error(chalk_1.default.red('Error: GROQ_API_KEY environment variable is not set.'));
+            process.exit(1);
+        }
+        const results = await (0, analyzer_1.analyzeElements)(scannedElements);
+        // Step 3: Report
+        const format = options.format.toLowerCase();
+        if (format === 'json' || options.output.endsWith('.json')) {
+            (0, reporter_1.generateJsonReport)(results, options.output);
+        }
+        else {
+            (0, reporter_1.generateMarkdownReport)(results, options.output);
+        }
+        // Step 4: Auto-Fix if enabled
+        if (options.autoFix) {
+            await (0, remediator_1.autoFix)(results, options.srcDir);
+        }
+        // Step 5: Exit with error code if issues found (useful for CI/CD)
+        const failedElements = results.filter(r => !r.isAccessible);
+        if (failedElements.length > 0) {
+            console.log(chalk_1.default.red(`\nFound ${failedElements.length} accessibility issues!`));
+            process.exit(1);
+        }
+        else {
+            console.log(chalk_1.default.green('\nAll checks passed! 🎉'));
+            process.exit(0);
+        }
+    }
+    catch (error) {
+        console.error(chalk_1.default.red('Audit failed:'), error);
+        process.exit(1);
+    }
+});
+program.parse(process.argv);

package/dist/remediator.js

@@ -0,0 +1,140 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.autoFix = autoFix;
+const fs_1 = __importDefault(require("fs"));
+const glob_1 = require("glob");
+const groq_sdk_1 = __importDefault(require("groq-sdk"));
+const chalk_1 = __importDefault(require("chalk"));
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config();
+const apiKey = process.env.GROQ_API_KEY || '';
+const groq = new groq_sdk_1.default({ apiKey });
+const delay = (ms) => new Promise(res => setTimeout(res, ms));
+function extractSearchableStrings(html) {
+    const strings = [];
+    // Extract text content if it's a simple tag (very naive approach)
+    const textMatch = html.match(/>([^<]+)</);
+    if (textMatch && textMatch[1].trim()) {
+        strings.push(textMatch[1].trim());
+    }
+    // Extract some common attributes
+    const classMatch = html.match(/class(?:Name)?=["']([^"']+)["']/);
+    if (classMatch)
+        strings.push(classMatch[1].split(' ')[0]); // just the first class for simplicity
+    const idMatch = html.match(/id=["']([^"']+)["']/);
+    if (idMatch)
+        strings.push(idMatch[1]);
+    const altMatch = html.match(/alt=["']([^"']*)["']/);
+    if (altMatch)
+        strings.push(altMatch[1]);
+    return strings.filter(s => s.length > 2); // only use somewhat meaningful strings
+}
+async function findProbableSourceFile(srcDir, elementHtml) {
+    const searchTerms = extractSearchableStrings(elementHtml);
+    if (searchTerms.length === 0)
+        return null;
+    const files = await (0, glob_1.glob)('**/*.{ts,tsx,js,jsx,html,vue,svelte}', {
+        cwd: srcDir,
+        ignore: ['node_modules/**', 'dist/**', 'build/**', '.git/**'],
+        absolute: true
+    });
+    let bestFile = null;
+    let maxScore = 0;
+    for (const file of files) {
+        const content = fs_1.default.readFileSync(file, 'utf-8');
+        let score = 0;
+        for (const term of searchTerms) {
+            if (content.includes(term)) {
+                score++;
+            }
+        }
+        if (score > maxScore) {
+            maxScore = score;
+            bestFile = file;
+        }
+    }
+    // We only consider it a match if we found at least something relevant
+    return maxScore > 0 ? bestFile : null;
+}
+async function autoFix(results, srcDir) {
+    const failedResults = results.filter(r => !r.isAccessible && r.suggestedFixCode);
+    if (failedResults.length === 0) {
+        console.log(chalk_1.default.green('No automated fixes to apply.'));
+        return;
+    }
+    console.log(chalk_1.default.cyan(`\nAttempting Automated Remediation on ${failedResults.length} issues in ${srcDir}...`));
+    for (let i = 0; i < failedResults.length; i++) {
+        const result = failedResults[i];
+        console.log(chalk_1.default.yellow(`\n[Fix ${i + 1}/${failedResults.length}] Issue: ${result.issueTitle}`));
+        const sourceFile = await findProbableSourceFile(srcDir, result.elementHtml);
+        if (!sourceFile) {
+            console.log(chalk_1.default.red(`  -> Could not locate a probable source file for this element.`));
+            continue;
+        }
+        console.log(chalk_1.default.green(`  -> Probable source file found: ${sourceFile}`));
+        const originalContent = fs_1.default.readFileSync(sourceFile, 'utf-8');
+        const prompt = `
+You are an expert developer. Your task is to apply an accessibility fix to a source code file.
+I will give you the complete original source file, and the details of an accessibility issue found in an element that was rendered from this file.
+
+Original Source File:
+\`\`\`
+${originalContent}
+\`\`\`
+
+Rendered Element (HTML) with issue:
+\`\`\`
+${result.elementHtml}
+\`\`\`
+
+Suggested fix for the rendered element:
+\`\`\`
+${result.suggestedFixCode}
+\`\`\`
+
+Your Task:
+Find where the "Rendered Element" comes from in the "Original Source File".
+Apply the "Suggested fix" logic to the exact component or JSX/HTML code in the file.
+Make sure you write valid syntax for the framework (e.g., in React use className instead of class, camelCase for attributes).
+Return the ENTIRE updated source file content. DO NOT truncate or omit any unchanged parts. The output must be the complete, ready-to-save file.
+DO NOT wrap the response in markdown code blocks. OUTPUT ONLY THE RAW CODE.
+`;
+        try {
+            console.log(chalk_1.default.gray(`  -> Asking LLM to apply fix to source file...`));
+            const completion = await groq.chat.completions.create({
+                messages: [
+                    {
+                        role: 'system',
+                        content: 'You are an AI code editor. Output ONLY the raw updated source code. Do not include markdown formatting or explanations.'
+                    },
+                    {
+                        role: 'user',
+                        content: prompt
+                    }
+                ],
+                model: 'llama-3.3-70b-versatile',
+            });
+            let newContent = completion.choices[0]?.message?.content || '';
+            // Just in case it wraps in markdown despite instructions
+            if (newContent.startsWith('\`\`\`')) {
+                newContent = newContent.replace(/^\`\`\`[a-z]*\n/, '').replace(/\n\`\`\`$/, '');
+            }
+            if (newContent && newContent !== originalContent) {
+                fs_1.default.writeFileSync(sourceFile, newContent);
+                console.log(chalk_1.default.green(`  -> Successfully patched ${sourceFile}`));
+            }
+            else {
+                console.log(chalk_1.default.red(`  -> LLM failed to modify the file or returned identical code.`));
+            }
+        }
+        catch (error) {
+            console.log(chalk_1.default.red(`  -> Error patching file: ${error.message}`));
+        }
+        // Wait to avoid rate limits
+        await delay(1500);
+    }
+    console.log(chalk_1.default.cyan(`\nAutomated Remediation completed! Note: Changes are left uncommitted on your file system for you to review manually.`));
+}

package/dist/reporter.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateJsonReport = generateJsonReport;
+exports.generateMarkdownReport = generateMarkdownReport;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+function generateJsonReport(results, outputPath) {
+    const outputDir = path_1.default.dirname(outputPath);
+    if (!fs_1.default.existsSync(outputDir)) {
+        fs_1.default.mkdirSync(outputDir, { recursive: true });
+    }
+    fs_1.default.writeFileSync(outputPath, JSON.stringify(results, null, 2));
+    console.log(`JSON report generated at ${outputPath}`);
+}
+function generateMarkdownReport(results, outputPath) {
+    const outputDir = path_1.default.dirname(outputPath);
+    if (!fs_1.default.existsSync(outputDir)) {
+        fs_1.default.mkdirSync(outputDir, { recursive: true });
+    }
+    const failedElements = results.filter(r => !r.isAccessible);
+    let md = `# Accessibility Audit Report\n\n`;
+    md += `**Total Elements Scanned:** ${results.length}\n`;
+    md += `**Accessibility Issues Found:** ${failedElements.length}\n\n`;
+    if (failedElements.length === 0) {
+        md += `🎉 Congratulations! No accessibility issues were found.\n`;
+    }
+    else {
+        md += `## Issues Detected\n\n`;
+        failedElements.forEach((el, i) => {
+            md += `### ${i + 1}. <${el.tagName}>: ${el.issueTitle || 'Issue'}\n\n`;
+            if (el.error) {
+                md += `**Error during analysis:** ${el.error}\n\n`;
+            }
+            else {
+                md += `**Explanation:** ${el.explanation}\n\n`;
+                md += `**Original Code:**\n\`\`\`html\n${el.elementHtml}\n\`\`\`\n\n`;
+                md += `**Suggested Fix:**\n\`\`\`html\n${el.suggestedFixCode}\n\`\`\`\n\n`;
+                md += `**Why this works:** ${el.fixReasoning}\n\n`;
+            }
+            md += `---\n\n`;
+        });
+    }
+    fs_1.default.writeFileSync(outputPath, md);
+    console.log(`Markdown report generated at ${outputPath}`);
+}

package/dist/scanner.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scanPage = scanPage;
+const playwright_1 = require("playwright");
+async function scanPage(url) {
+    console.log(`\nNavigating to ${url}...`);
+    // Launch headless chromium
+    const browser = await playwright_1.chromium.launch({ headless: true });
+    const page = await browser.newPage();
+    try {
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+        console.log('Page loaded. Extracting elements...');
+        // Wait a tiny bit extra for framework rendering if needed
+        await page.waitForTimeout(2000);
+        // Evaluate extraction logic in the page context
+        const extractedElements = await page.evaluate(() => {
+            function extractContext(element) {
+                const parent = element.parentElement;
+                let parentHtml = '';
+                if (parent) {
+                    const clone = parent.cloneNode(true);
+                    clone.querySelectorAll('script, style').forEach(el => el.remove());
+                    parentHtml = clone.outerHTML;
+                    if (parentHtml.length > 15000) {
+                        parentHtml = parentHtml.substring(0, 15000) + '\\n... [TRUNCATED]';
+                    }
+                }
+                return {
+                    elementHtml: element.outerHTML,
+                    parentHtml
+                };
+            }
+            const elements = Array.from(document.querySelectorAll('button, img, input, a, [role="button"], [role="link"], [role="img"]'));
+            return elements.map((el, index) => {
+                const context = extractContext(el);
+                return {
+                    id: index.toString(),
+                    tagName: el.tagName.toLowerCase(),
+                    elementHtml: context.elementHtml,
+                    parentHtml: context.parentHtml
+                };
+            });
+        });
+        console.log(`Found ${extractedElements.length} elements to analyze.`);
+        return extractedElements;
+    }
+    catch (error) {
+        console.error(`Error scanning page: ${error}`);
+        throw error;
+    }
+    finally {
+        await browser.close();
+    }
+}

package/dist/src/analyzer.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.analyzeElement = analyzeElement;
+exports.analyzeElements = analyzeElements;
+const groq_sdk_1 = __importDefault(require("groq-sdk"));
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config();
+const apiKey = process.env.GROQ_API_KEY || '';
+const groq = new groq_sdk_1.default({ apiKey });
+const delay = (ms) => new Promise(res => setTimeout(res, ms));
+async function analyzeElement(element) {
+    const prompt = `
+You are an expert accessibility engineer. Your task is to analyze an HTML/JSX element within its parent context to determine if it meets WCAG accessibility standards. 
+You must output ONLY valid JSON without any markdown code blocks or conversational text.
+
+Context:
+Parent Code:
+\`\`\`
+${element.parentHtml}
+\`\`\`
+
+Target Element Code:
+\`\`\`
+${element.elementHtml}
+\`\`\`
+
+Analyze the target element. Does it have sufficient context for screen readers? Does it use semantic HTML properly? Is it missing ARIA attributes where necessary?
+
+Be extremely accurate in your code fix. Ensure the replacement code contains all necessary structural semantics, aria-labels, alt text, and valid roles based on the parent context.
+CRITICAL INSTRUCTIONS FOR FIX:
+1. Your suggested fix MUST COMPLETELY resolve the accessibility issue. If the fixed element were analyzed again, it MUST pass all WCAG checks.
+2. Provide the COMPLETE Target Element in your fix, including its opening tag, all original children, and its closing tag. Do NOT provide partial snippets.
+3. The replacement code MUST match the exact framework syntax of the input. If the input uses React JSX syntax (like \`className\`, camelCase attributes, or \`style={{}}\`), the output MUST be valid JSX. If standard HTML, output standard HTML.
+4. Maintain all existing non-accessibility attributes (e.g., \`id\`, \`class\`, \`onClick\`, \`href\`, etc.) exactly as they appear in the original Target Element.
+
+Return a JSON object with this exact structure:
+{
+    "isAccessible": boolean,
+    "issueTitle": string (or null if isAccessible is true. A concise title of the WCAG violation),
+    "explanation": string (or null. Explain the issue concisely to a developer),
+    "suggestedFixCode": string (or null. Provide the highly accurate, complete replacement code for the Target Element that fixes the issue, matching the input's syntax),
+    "fixReasoning": string (or null. Briefly explain exactly what the suggested fix code does and how it solves the accessibility issue)
+}
+`;
+    let retries = 3;
+    let delayMs = 2000;
+    while (retries > 0) {
+        try {
+            const completion = await groq.chat.completions.create({
+                messages: [
+                    {
+                        role: 'system',
+                        content: 'You are an AI that only outputs valid JSON. Do not output anything else.'
+                    },
+                    {
+                        role: 'user',
+                        content: prompt
+                    }
+                ],
+                model: 'llama-3.3-70b-versatile',
+                response_format: { type: 'json_object' }
+            });
+            const text = completion.choices[0]?.message?.content;
+            if (text) {
+                const parsed = JSON.parse(text);
+                return {
+                    ...element,
+                    ...parsed
+                };
+            }
+            throw new Error("No text in response");
+        }
+        catch (error) {
+            if (error.status === 503 || error.status === 429 || error.message?.includes('503') || error.message?.includes('429')) {
+                console.warn(`[WARN] Rate limited. Retries left: ${retries - 1}. Retrying in ${delayMs}ms...`);
+                retries--;
+                if (retries === 0) {
+                    return {
+                        ...element,
+                        isAccessible: false,
+                        error: "Failed to analyze due to API rate limits."
+                    };
+                }
+                await delay(delayMs);
+                delayMs *= 2;
+            }
+            else {
+                return {
+                    ...element,
+                    isAccessible: false,
+                    error: error.message || "Unknown API error"
+                };
+            }
+        }
+    }
+    return {
+        ...element,
+        isAccessible: false,
+        error: "Exhausted retries"
+    };
+}
+async function analyzeElements(elements) {
+    const results = [];
+    console.log(`Analyzing ${elements.length} elements using Groq API...`);
+    for (let i = 0; i < elements.length; i++) {
+        // Log progress
+        console.log(`Analyzing element ${i + 1}/${elements.length}: <${elements[i].tagName}>...`);
+        const result = await analyzeElement(elements[i]);
+        results.push(result);
+        // Wait briefly between requests to avoid rate limits
+        if (i < elements.length - 1) {
+            await delay(1000);
+        }
+    }
+    return results;
+}

package/dist/src/index.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const chalk_1 = __importDefault(require("chalk"));
+const scanner_1 = require("./scanner");
+const analyzer_1 = require("./analyzer");
+const reporter_1 = require("./reporter");
+const program = new commander_1.Command();
+program
+    .name('a11y-audit')
+    .description('Context-Aware Accessibility Linter CLI')
+    .version('1.0.0')
+    .requiredOption('-u, --url <url>', 'URL to scan (e.g., http://localhost:3000)', 'http://localhost:3000')
+    .option('-o, --output <path>', 'Output file path', './caal-report.md')
+    .option('-f, --format <format>', 'Output format (json or md)', 'md')
+    .action(async (options) => {
+    try {
+        console.log(chalk_1.default.blue(`Starting accessibility audit for: ${options.url}`));
+        // Step 1: Scan page and extract elements
+        const scannedElements = await (0, scanner_1.scanPage)(options.url);
+        if (scannedElements.length === 0) {
+            console.log(chalk_1.default.yellow('No relevant elements found to analyze.'));
+            return;
+        }
+        // Step 2: Analyze with LLM
+        if (!process.env.GROQ_API_KEY) {
+            console.error(chalk_1.default.red('Error: GROQ_API_KEY environment variable is not set.'));
+            process.exit(1);
+        }
+        const results = await (0, analyzer_1.analyzeElements)(scannedElements);
+        // Step 3: Report
+        const format = options.format.toLowerCase();
+        if (format === 'json' || options.output.endsWith('.json')) {
+            (0, reporter_1.generateJsonReport)(results, options.output);
+        }
+        else {
+            (0, reporter_1.generateMarkdownReport)(results, options.output);
+        }
+        // Step 4: Exit with error code if issues found (useful for CI/CD)
+        const failedElements = results.filter(r => !r.isAccessible);
+        if (failedElements.length > 0) {
+            console.log(chalk_1.default.red(`\nFound ${failedElements.length} accessibility issues!`));
+            process.exit(1);
+        }
+        else {
+            console.log(chalk_1.default.green('\nAll checks passed! 🎉'));
+            process.exit(0);
+        }
+    }
+    catch (error) {
+        console.error(chalk_1.default.red('Audit failed:'), error);
+        process.exit(1);
+    }
+});
+program.parse(process.argv);

package/dist/src/reporter.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateJsonReport = generateJsonReport;
+exports.generateMarkdownReport = generateMarkdownReport;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+function generateJsonReport(results, outputPath) {
+    const outputDir = path_1.default.dirname(outputPath);
+    if (!fs_1.default.existsSync(outputDir)) {
+        fs_1.default.mkdirSync(outputDir, { recursive: true });
+    }
+    fs_1.default.writeFileSync(outputPath, JSON.stringify(results, null, 2));
+    console.log(`JSON report generated at ${outputPath}`);
+}
+function generateMarkdownReport(results, outputPath) {
+    const outputDir = path_1.default.dirname(outputPath);
+    if (!fs_1.default.existsSync(outputDir)) {
+        fs_1.default.mkdirSync(outputDir, { recursive: true });
+    }
+    const failedElements = results.filter(r => !r.isAccessible);
+    let md = `# Accessibility Audit Report\n\n`;
+    md += `**Total Elements Scanned:** ${results.length}\n`;
+    md += `**Accessibility Issues Found:** ${failedElements.length}\n\n`;
+    if (failedElements.length === 0) {
+        md += `🎉 Congratulations! No accessibility issues were found.\n`;
+    }
+    else {
+        md += `## Issues Detected\n\n`;
+        failedElements.forEach((el, i) => {
+            md += `### ${i + 1}. <${el.tagName}>: ${el.issueTitle || 'Issue'}\n\n`;
+            if (el.error) {
+                md += `**Error during analysis:** ${el.error}\n\n`;
+            }
+            else {
+                md += `**Explanation:** ${el.explanation}\n\n`;
+                md += `**Original Code:**\n\`\`\`html\n${el.elementHtml}\n\`\`\`\n\n`;
+                md += `**Suggested Fix:**\n\`\`\`html\n${el.suggestedFixCode}\n\`\`\`\n\n`;
+                md += `**Why this works:** ${el.fixReasoning}\n\n`;
+            }
+            md += `---\n\n`;
+        });
+    }
+    fs_1.default.writeFileSync(outputPath, md);
+    console.log(`Markdown report generated at ${outputPath}`);
+}

package/dist/src/scanner.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scanPage = scanPage;
+const playwright_1 = require("playwright");
+async function scanPage(url) {
+    console.log(`\nNavigating to ${url}...`);
+    // Launch headless chromium
+    const browser = await playwright_1.chromium.launch({ headless: true });
+    const page = await browser.newPage();
+    try {
+        await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
+        console.log('Page loaded. Extracting elements...');
+        // Wait a tiny bit extra for framework rendering if needed
+        await page.waitForTimeout(2000);
+        // Evaluate extraction logic in the page context
+        const extractedElements = await page.evaluate(() => {
+            function extractContext(element) {
+                const parent = element.parentElement;
+                let parentHtml = '';
+                if (parent) {
+                    const clone = parent.cloneNode(true);
+                    clone.querySelectorAll('script, style').forEach(el => el.remove());
+                    parentHtml = clone.outerHTML;
+                    if (parentHtml.length > 15000) {
+                        parentHtml = parentHtml.substring(0, 15000) + '\\n... [TRUNCATED]';
+                    }
+                }
+                return {
+                    elementHtml: element.outerHTML,
+                    parentHtml
+                };
+            }
+            const elements = Array.from(document.querySelectorAll('button, img, input, a, [role="button"], [role="link"], [role="img"]'));
+            return elements.map((el, index) => {
+                const context = extractContext(el);
+                return {
+                    id: index.toString(),
+                    tagName: el.tagName.toLowerCase(),
+                    elementHtml: context.elementHtml,
+                    parentHtml: context.parentHtml
+                };
+            });
+        });
+        console.log(`Found ${extractedElements.length} elements to analyze.`);
+        return extractedElements;
+    }
+    catch (error) {
+        console.error(`Error scanning page: ${error}`);
+        throw error;
+    }
+    finally {
+        await browser.close();
+    }
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "dtp-caal",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/index.js",
+  "bin": {
+    "dtp-caal": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "ts-node src/index.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["accessibility", "linter", "cli", "ai"],
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^15.0.0",
+    "dotenv": "^17.4.2",
+    "glob": "^13.0.6",
+    "groq-sdk": "^1.3.0",
+    "playwright": "^1.61.1"
+  },
+  "devDependencies": {
+    "@types/glob": "^8.1.0",
+    "@types/node": "^26.0.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^6.0.3"
+  }
+}