mcp-accessibility-scanner 1.0.10 → 1.1.0

package/build/accessibilityChecker.js

@@ -1,379 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AccessibilityScanner = void 0;
-exports.scanViolations = scanViolations;
-const playwright_1 = require("playwright");
-const playwright_2 = require("@axe-core/playwright");
-const node_path_1 = __importDefault(require("node:path"));
-const node_os_1 = __importDefault(require("node:os"));
-class AccessibilityScanner {
-    constructor() {
-        this.browser = null;
-        this.context = null;
-        this.page = null;
-        this.defaultViewport = { width: 1920, height: 1080 };
-        this.userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36";
-    }
-    initialize() {
-        return __awaiter(this, arguments, void 0, function* (shouldRunInHeadless = true) {
-            this.browser = yield playwright_1.chromium.launch({
-                headless: shouldRunInHeadless,
-                args: [
-                    "--disable-blink-features=AutomationControlled",
-                    "--disable-dev-shm-usage",
-                    "--no-sandbox",
-                    "--disable-setuid-sandbox",
-                ],
-            });
-        });
-    }
-    createContext() {
-        return __awaiter(this, arguments, void 0, function* (viewport = this.defaultViewport) {
-            if (!this.browser) {
-                throw new Error("Browser not initialized. Call initialize() first.");
-            }
-            this.context = yield this.browser.newContext({
-                viewport,
-                userAgent: this.userAgent,
-            });
-        });
-    }
-    createPage() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.context) {
-                throw new Error("Context not created. Call createContext() first.");
-            }
-            this.page = yield this.context.newPage();
-        });
-    }
-    navigateToUrl(url) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created. Call createPage() first.");
-            }
-            yield this.page.goto(url);
-        });
-    }
-    clickElement(selector) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created. Call createPage() first.");
-            }
-            yield this.page.click(selector);
-            yield this.page.waitForLoadState('load');
-        });
-    }
-    typeText(selector, text) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created. Call createPage() first.");
-            }
-            yield this.page.fill(selector, text);
-            yield this.page.waitForLoadState('load');
-        });
-    }
-    getElementByText(text, elementType) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created. Call createPage() first.");
-            }
-            const elements = yield this.page.locator(elementType || '*', { hasText: text }).all();
-            if (elements.length === 0) {
-                return null;
-            }
-            if (elements.length === 1) {
-                return yield elements[0].evaluate(el => {
-                    if (el.id)
-                        return `#${el.id}`;
-                    if (el.className)
-                        return `.${el.className.split(' ')[0]}`;
-                    return el.tagName.toLowerCase();
-                });
-            }
-            for (let i = 0; i < elements.length; i++) {
-                const element = elements[i];
-                const isExactMatch = yield element.evaluate((el, searchText) => {
-                    var _a, _b;
-                    return ((_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === searchText ||
-                        ('innerText' in el && ((_b = el.innerText) === null || _b === void 0 ? void 0 : _b.trim()) === searchText) ||
-                        el.value === searchText;
-                }, text);
-                if (isExactMatch) {
-                    return yield element.evaluate(el => {
-                        var _a;
-                        if (el.id)
-                            return `#${el.id}`;
-                        if (el.className)
-                            return `.${el.className.split(' ')[0]}`;
-                        return `:nth-of-type(${Array.from(((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.children) || []).indexOf(el) + 1})`;
-                    });
-                }
-            }
-            return yield elements[0].evaluate(el => {
-                if (el.id)
-                    return `#${el.id}`;
-                if (el.className)
-                    return `.${el.className.split(' ')[0]}`;
-                return el.tagName.toLowerCase();
-            });
-        });
-    }
-    analyzePage() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created. Call createPage() first.");
-            }
-            return yield this.page.evaluate(() => {
-                const getElementInfo = (el) => {
-                    const text = (el.textContent || '').trim();
-                    const ariaLabel = el.getAttribute('aria-label');
-                    const title = el.getAttribute('title');
-                    const value = el.value;
-                    const placeholder = el.placeholder;
-                    return text || ariaLabel || title || value || placeholder || 'No text';
-                };
-                const buttons = Array.from(document.querySelectorAll('button, [role="button"], input[type="button"], input[type="submit"]'))
-                    .map(el => getElementInfo(el))
-                    .filter(text => text !== 'No text');
-                const links = Array.from(document.querySelectorAll('a[href]'))
-                    .map(el => getElementInfo(el))
-                    .filter(text => text !== 'No text');
-                const inputs = Array.from(document.querySelectorAll('input:not([type="button"]):not([type="submit"]), textarea, select'))
-                    .map(el => {
-                    var _a, _b, _c;
-                    const label = (_c = (_b = (_a = el.labels) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim();
-                    const placeholder = el.placeholder;
-                    const name = el.getAttribute('name');
-                    const id = el.getAttribute('id');
-                    return label || placeholder || name || id || 'Unnamed input';
-                });
-                return { buttons, links, inputs };
-            });
-        });
-    }
-    clickElementByText(text, elementType) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created. Call createPage() first.");
-            }
-            const selector = yield this.getElementByText(text, elementType);
-            if (!selector) {
-                const analysis = yield this.analyzePage();
-                throw new Error(`Element with text "${text}" not found. Available elements:\nButtons: ${analysis.buttons.join(', ')}\nLinks: ${analysis.links.join(', ')}`);
-            }
-            yield this.page.click(selector);
-            yield this.page.waitForLoadState('load');
-        });
-    }
-    typeTextByLabel(labelText, text) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created. Call createPage() first.");
-            }
-            const inputSelector = yield this.page.evaluate((label) => {
-                const labels = Array.from(document.querySelectorAll('label'));
-                const matchingLabel = labels.find(l => { var _a; return (_a = l.textContent) === null || _a === void 0 ? void 0 : _a.trim().includes(label); });
-                if (matchingLabel) {
-                    const forAttr = matchingLabel.getAttribute('for');
-                    if (forAttr)
-                        return `#${forAttr}`;
-                    const input = matchingLabel.querySelector('input, textarea, select');
-                    if (input && input.id)
-                        return `#${input.id}`;
-                    if (input)
-                        return null;
-                }
-                const inputsWithPlaceholder = Array.from(document.querySelectorAll(`input[placeholder*="${label}"], textarea[placeholder*="${label}"]`));
-                if (inputsWithPlaceholder.length > 0) {
-                    const input = inputsWithPlaceholder[0];
-                    if (input.id)
-                        return `#${input.id}`;
-                }
-                return null;
-            }, labelText);
-            if (!inputSelector) {
-                const analysis = yield this.analyzePage();
-                throw new Error(`Input field with label "${labelText}" not found. Available inputs: ${analysis.inputs.join(', ')}`);
-            }
-            yield this.page.fill(inputSelector, text);
-            yield this.page.waitForLoadState('load');
-        });
-    }
-    addViolationStyles() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created.");
-            }
-            yield this.page.addStyleTag({
-                content: `
-				.a11y-violation {
-					position: relative !important;
-					outline: 4px solid #FF4444 !important;
-					margin: 2px !important;
-				}
-				.violation-number {
-					position: absolute !important;
-					top: -12px !important;
-					left: -12px !important;
-					background: #FF4444;
-					color: white !important;
-					width: 25px;
-					height: 25px;
-					border-radius: 50%;
-					display: flex !important;
-					align-items: center;
-					justify-content: center;
-					font-weight: bold;
-					font-size: 14px;
-					z-index: 10000;
-				}
-				.a11y-violation-info {
-					position: absolute !important;
-					background: #333333 !important;
-					color: white !important;
-					padding: 12px !important;
-					border-radius: 4px !important;
-					font-size: 14px !important;
-					max-width: 300px !important;
-					z-index: 9999 !important;
-					box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-				}
-			`,
-            });
-        });
-    }
-    highlightViolations(violations) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created.");
-            }
-            let violationCounter = 1;
-            for (const violation of violations) {
-                for (const node of violation.nodes) {
-                    try {
-                        const targetSelector = node.target[0];
-                        const selector = Array.isArray(targetSelector)
-                            ? targetSelector.join(" ")
-                            : targetSelector;
-                        yield this.page.evaluate(({ selector, violationData, counter }) => {
-                            const elements = document.querySelectorAll(selector);
-                            elements.forEach((element) => {
-                                const numberBadge = document.createElement("div");
-                                numberBadge.className = "violation-number";
-                                numberBadge.textContent = counter.toString();
-                                element.classList.add("a11y-violation");
-                                element.appendChild(numberBadge);
-                                const listItem = document.createElement("div");
-                                listItem.style.marginBottom = "15px";
-                                listItem.innerHTML = `
-									<div style="color: #FF4444; font-weight: bold;">
-										Violation #${counter}: ${violationData.impact.toUpperCase()}
-									</div>
-									<div style="margin: 5px 0; font-size: 14px;">
-										${violationData.description}
-									</div>
-								`;
-                                document.body.appendChild(listItem);
-                                const rect = element.getBoundingClientRect();
-                                listItem.style.left = `${rect.left + window.scrollX}px`;
-                                listItem.style.top = `${rect.bottom + window.scrollY + 10}px`;
-                            });
-                        }, {
-                            selector: selector,
-                            violationData: {
-                                impact: violation.impact,
-                                description: violation.description,
-                            },
-                            counter: violationCounter,
-                        });
-                        violationCounter++;
-                    }
-                    catch (error) {
-                        console.log(`Failed to highlight element: ${error}`);
-                    }
-                }
-            }
-        });
-    }
-    generateReport(violations) {
-        var _a;
-        let reportCounter = 1;
-        const report = [];
-        for (const violation of violations) {
-            for (const node of violation.nodes) {
-                report.push({
-                    index: reportCounter++,
-                    element: node.target[0],
-                    impactLevel: violation.impact,
-                    description: violation.description,
-                    wcagCriteria: ((_a = violation.tags) === null || _a === void 0 ? void 0 : _a.join(", ")) || "",
-                });
-            }
-        }
-        return report;
-    }
-    takeScreenshot() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created.");
-            }
-            const filePath = node_path_1.default.join(node_path_1.default.join(node_os_1.default.homedir(), "Downloads"), `a11y-report-${Date.now()}.png`);
-            const screenshot = yield this.page.screenshot({
-                path: filePath,
-            });
-            return screenshot.toString("base64");
-        });
-    }
-    scanViolations(violationsTags) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.page) {
-                throw new Error("Page not created.");
-            }
-            yield this.addViolationStyles();
-            const axe = new playwright_2.AxeBuilder({ page: this.page }).withTags(violationsTags);
-            const results = yield axe.analyze();
-            yield this.highlightViolations(results.violations);
-            const report = this.generateReport(results.violations);
-            const base64Screenshot = yield this.takeScreenshot();
-            return { report, base64Screenshot };
-        });
-    }
-    cleanup() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.browser) {
-                yield this.browser.close();
-                this.browser = null;
-                this.context = null;
-                this.page = null;
-            }
-        });
-    }
-}
-exports.AccessibilityScanner = AccessibilityScanner;
-function scanViolations(url_1, violationsTags_1) {
-    return __awaiter(this, arguments, void 0, function* (url, violationsTags, viewport = { width: 1920, height: 1080 }, shouldRunInHeadless = true) {
-        const scanner = new AccessibilityScanner();
-        try {
-            yield scanner.initialize(shouldRunInHeadless);
-            yield scanner.createContext(viewport);
-            yield scanner.createPage();
-            yield scanner.navigateToUrl(url);
-            return yield scanner.scanViolations(violationsTags);
-        }
-        finally {
-            yield scanner.cleanup();
-        }
-    });
-}