wcag-scanner 1.2.60 → 1.2.61

package/README.md

@@ -32,17 +32,30 @@ WCAG Scanner is a powerful accessibility testing tool that helps developers iden
 
 ## 📦 Installation
 
-### Using npm
-
 ```bash
-npm i wcag-scanner
-```
+# npm
+npm install wcag-scanner
 
-### Using yarn
-```bash
+# yarn
 yarn add wcag-scanner
+
+# pnpm
+pnpm add wcag-scanner
+```
+
+> **React users:** React and React DOM are peer dependencies and are already installed in your project — no extra steps needed.
+
+### For the React Dev Overlay
+
+Add one line to your app entry point (`main.ts`, `index.js`, `App.tsx`, etc.):
+
+```ts
+import { initWcagOverlay } from 'wcag-scanner/react';
+initWcagOverlay(); // shows a live WCAG inspector in the browser, dev only
 ```
 
+The overlay is automatically disabled in production (`NODE_ENV=production`) and never ships to your users.
+
 ## How to use
 ### CLI Usage Example:
 

package/dist/ai/suggestions.d.ts

@@ -0,0 +1,11 @@
+import { Violation, FixSuggestion } from "../types";
+/**
+ * Generate fix suggestions for accessibility violations
+ * @param violation WCAG violation to fix
+ * @returns Promise<FixSuggestion> Suggested fix
+ */
+export declare function generateFixSuggestion(violation: Violation): Promise<FixSuggestion>;
+declare const _default: {
+    generateFixSuggestion: typeof generateFixSuggestion;
+};
+export default _default;

package/dist/ai/suggestions.js

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateFixSuggestion = generateFixSuggestion;
+const generative_ai_1 = require("@google/generative-ai");
+const dotenv_1 = __importDefault(require("dotenv"));
+/**
+ * @TODO working on AI-powered suggestions, it's still working in progress.
+ */
+// Load environment variables from .env file
+dotenv_1.default.config();
+// Get API key from environment
+const apiKey = process.env.GEMINI_API_KEY;
+// Initialize Gemini if API key is available
+let genAI = null;
+let model = null;
+if (apiKey) {
+    try {
+        genAI = new generative_ai_1.GoogleGenerativeAI(apiKey);
+        model = genAI.getGenerativeModel({ model: 'gemini-1.0-pro' });
+        console.log('Gemini AI initialized');
+    }
+    catch (error) {
+        console.error('Error initializing Gemini AI:', error);
+    }
+}
+/**
+ * Generate fix suggestions for accessibility violations
+ * @param violation WCAG violation to fix
+ * @returns Promise<FixSuggestion> Suggested fix
+ */
+async function generateFixSuggestion(violation) {
+    // Ig Gemini is not available, use rule-based suggestion
+    if (!model) {
+        console.log('Gemini AI not available, using rule-based suggestion');
+        return generateRuleBasedSuggestion(violation);
+    }
+    try {
+        // Create prompt for Gemini
+        const prompt = `
+            As a web accessibility expert, I need a fix for this WCAG issue:
+            Rule: ${violation.rule || ''}
+            Description: ${violation.description || ''}
+
+            HTML code with issue:
+            ${violation.snippet || ''}
+
+            Please provide a corrected version of the code and a brief explanation.
+        `;
+        // Generate content with Gemini
+        const result = await model.generateContent(prompt);
+        const response = result.response.text();
+        // Extract code and explanation from response
+        const codeMatch = response.match(/```(?:html)?\s*([\s\S]*?)\s*```/);
+        const code = codeMatch ? codeMatch[1].trim() : '';
+        // Remove code block for clean explanation
+        const explanation = response
+            .replace(/```(?:html)?\s*[\s\S]*?\s*```/g, '')
+            .trim();
+        return {
+            code: code || 'Unable to generate specific code fix',
+            description: 'AI-suggested fix',
+            explanation: explanation || 'Fix the accessibility issue as suggested by the AI'
+        };
+    }
+    catch (error) {
+        console.error('Error generating fix suggestion with Gemini AI:', error);
+        return generateRuleBasedSuggestion(violation);
+    }
+}
+/**
+ * Generate basic rule-based suggestion as fallback
+ * @param violation WCAG violation
+ * @returns FixSuggestion
+ */
+function generateRuleBasedSuggestion(violation) {
+    var _a;
+    const rule = violation.rule || '';
+    if (rule.includes('img-alt')) {
+        return {
+            code: ((_a = violation.snippet) === null || _a === void 0 ? void 0 : _a.replace(/<img/i, '<img alt="Descriptive text"')) || '',
+            description: 'Add alt text to image',
+            explanation: 'Images need alternative text for screen readers'
+        };
+    }
+    if (rule.includes('contrast')) {
+        return {
+            code: '/* Increase color contrast to at least 4.5:1 ratio */',
+            description: 'Increase color contrast',
+            explanation: 'Text needs sufficient contrast with its background'
+        };
+    }
+    return {
+        code: '',
+        description: 'Fix needed',
+        explanation: violation.help || 'Fix this issue to improve accessibility'
+    };
+}
+exports.default = {
+    generateFixSuggestion
+};

package/dist/cli/index.js

@@ -8,9 +8,6 @@ const commander_1 = require("commander");
 const __1 = require("..");
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
-const http_1 = __importDefault(require("http"));
-const https_1 = __importDefault(require("https"));
-const url_1 = require("url");
 const __2 = require("..");
 // Try to load package.json for version information
 let version = '0.1.0';
@@ -155,73 +152,9 @@ commander_1.program
         process.exit(1);
     }
 });
-// Helper function to fetch URL content
-async function fetchUrl(urlString) {
-    return new Promise((resolve, reject) => {
-        const url = new url_1.URL(urlString);
-        const client = url.protocol === 'https:' ? https_1.default : http_1.default;
-        const req = client.get(urlString, (res) => {
-            if (res.statusCode !== 200) {
-                reject(new Error(`Request failed with status code ${res.statusCode}`));
-                return;
-            }
-            let data = '';
-            res.on('data', (chunk) => {
-                data += chunk;
-            });
-            res.on('end', () => {
-                resolve(data);
-            });
-        });
-        req.on('error', (err) => {
-            reject(err);
-        });
-        req.end();
-    });
-}
 // If no arguments provided, show help
 if (process.argv.length <= 2) {
     commander_1.program.help();
 }
 // Parse command line arguments
 commander_1.program.parse(process.argv);
-/**
- * Fallback function to fetch a URL when the primary method fails
- * @param urlString The URL to fetch
- * @returns Promise<string> HTML content
- */
-async function fetchUrlWithFallback(urlString) {
-    return new Promise((resolve, reject) => {
-        try {
-            // Use a simpler approach that ignores some errors
-            const url = new url_1.URL(urlString);
-            const options = {
-                method: 'GET',
-                headers: {
-                    'User-Agent': 'Mozilla/5.0 (WCAG Scanner Bot) Chrome/91.0.4472.124'
-                },
-                timeout: 10000
-            };
-            const client = url.protocol === 'https:' ? https_1.default : http_1.default;
-            const req = client.request(url, options, (res) => {
-                let data = '';
-                res.on('data', (chunk) => {
-                    data += chunk;
-                });
-                res.on('end', () => {
-                    // Return whatever we got, even if status code isn't 200
-                    resolve(data || '<html><body><p>Failed to fetch content</p></body></html>');
-                });
-            });
-            req.on('error', () => {
-                // Provide minimal HTML if we can't fetch anything
-                resolve('<html><body><p>Failed to fetch content</p></body></html>');
-            });
-            req.end();
-        }
-        catch (error) {
-            // Return minimal HTML on any error
-            resolve('<html><body><p>Failed to fetch content</p></body></html>');
-        }
-    });
-}

package/dist/index.js

@@ -52,9 +52,6 @@ const middleware_1 = __importDefault(require("./middleware"));
 exports.middleware = middleware_1.default;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
-const url_1 = require("url");
-const http_1 = __importDefault(require("http"));
-const https_1 = __importDefault(require("https"));
 const crypto_1 = __importDefault(require("crypto"));
 const os_1 = __importDefault(require("os"));
 /**
@@ -174,34 +171,6 @@ function formatReport(results, format = 'json', options = {}) {
 function saveReport(report, filePath) {
     fs_1.default.writeFileSync(filePath, report);
 }
-/**
- * Helper function to fetch URL content
- * @param urlString URL to fetch
- * @returns Promise<string> HTML content
- */
-async function fetchUrl(urlString) {
-    return new Promise((resolve, reject) => {
-        const url = new url_1.URL(urlString);
-        const client = url.protocol === 'https:' ? https_1.default : http_1.default;
-        const req = client.get(urlString, (res) => {
-            if (res.statusCode !== 200) {
-                reject(new Error(`Request failed with status code ${res.statusCode}`));
-                return;
-            }
-            let data = '';
-            res.on('data', (chunk) => {
-                data += chunk;
-            });
-            res.on('end', () => {
-                resolve(data);
-            });
-        });
-        req.on('error', (err) => {
-            reject(err);
-        });
-        req.end();
-    });
-}
 __exportStar(require("./types"), exports);
 // Default export with all main functions
 exports.default = {

package/dist/react/WcagDevOverlay.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface WcagDevOverlayProps {
+    /** WCAG conformance level (default: 'AA') */
+    level?: 'A' | 'AA' | 'AAA';
+    /** Subset of rules to run. Omit to run all. */
+    rules?: string[];
+    /** Corner to anchor the overlay (default: 'bottom-right') */
+    position?: 'bottom-right' | 'bottom-left';
+    /** Delay in ms between DOM mutation and re-scan (default: 750) */
+    debounce?: number;
+}
+export declare const WcagDevOverlay: React.FC<WcagDevOverlayProps>;
+export default WcagDevOverlay;