snap-ally 0.2.7-beta → 1.0.0

package/README.md

@@ -2,6 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/snap-ally.svg)](https://www.npmjs.com/package/snap-ally)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/U7U1U2V3V)
 
 A powerful, developer-friendly Playwright reporter for **Accessibility testing** using Axe-core. Beyond just reporting, it provides visual evidence to help developers fix accessibility issues faster.
 
@@ -60,15 +61,18 @@ export default defineConfig({
                 outputFolder: 'a11y-report',
                 // Optional: Visual Customization
                 colors: {
-                    critical: '#dc2626',
-                    serious: '#ea580c',
-                    moderate: '#f59e0b',
-                    minor: '#0ea5e9',
+                    critical: '#b91c1c',
+                    serious: '#c2410c',
+                    moderate: '#a16207',
+                    minor: '#1e40af',
                 },
+                verbose: true,      // Show in terminal
+                consoleLog: true,   // Show in browser console
                 // Optional: Azure DevOps Integration
                 ado: {
                     organization: 'your-org',
                     project: 'your-project',
+                    areaPath: 'your-project\\your-team', // Optional: Define where bugs should be created
                 },
             },
         ],
@@ -80,20 +84,20 @@ export default defineConfig({
 
 ## <span aria-hidden="true">📖</span> Usage
 
-Import and use `scanA11y` within your Playwright tests:
+Import and use `checkAccessibility` within your Playwright tests:
 
 ```typescript
 import { test } from '@playwright/test';
-import { scanA11y } from 'snap-ally';
+import { checkAccessibility } from 'snap-ally';
 
 test('verify page accessibility', async ({ page }, testInfo) => {
     await page.goto('https://example.com');
 
     // Basic scan
-    await scanA11y(page, testInfo);
+    await checkAccessibility(page, testInfo);
 
     // Advanced scan with configuration
-    await scanA11y(page, testInfo, {
+    await checkAccessibility(page, testInfo, {
         verbose: true, // Log results to terminal
         consoleLog: true, // Log results to browser console
         pageKey: 'Homepage', // Custom name for the report file
@@ -113,13 +117,16 @@ test('verify page accessibility', async ({ page }, testInfo) => {
 
 | Option             | Type     | Description                                                     |
 | ------------------ | -------- | --------------------------------------------------------------- |
-| `outputFolder`     | `string` | Where to save the reports. Defaults to `steps-report`.          |
-| `colors`           | `object` | Customize severity colors (critical, serious, moderate, minor). |
-| `ado`              | `object` | Azure DevOps configuration for deep linking.                    |
+| `outputFolder`     | `string`  | Where to save the reports. Defaults to `steps-report`.          |
+| `colors`           | `object`  | Customize severity colors (critical, serious, moderate, minor). |
+| `verbose`          | `boolean` | **Default**: `true`. Show violations in terminal.               |
+| `consoleLog`       | `boolean` | **Default**: `true`. Show violations in browser console.        |
+| `ado`              | `object`  | Azure DevOps configuration for deep linking.                    |
 | `ado.organization` | `string` | Your Azure DevOps organization name.                            |
 | `ado.project`      | `string` | Your Azure DevOps project name.                                 |
+| `ado.areaPath`     | `string` | Optional: The Area Path where bugs should be created.           |
 
-### `scanA11y` Options
+### `checkAccessibility` Options
 
 | Option       | Type       | Description                                                                |
 | ------------ | ---------- | -------------------------------------------------------------------------- |

package/dist/A11yReportAssets.d.ts

@@ -8,21 +8,14 @@ export declare class A11yReportAssets {
      */
     copyToFolder(destFolder: string, srcPath: string, fileName?: string): string;
     /**
-     * Copies the test video if available.
-     * Includes a more robust retry to ensure Playwright has finished flushing the file.
+     * Copies all video attachments to the report folder for portability.
+     * @returns An array of filenames written to the destination folder.
      */
-    copyTestVideo(result: TestResult, destFolder: string): Promise<string>;
+    copyVideos(result: TestResult, destFolder: string): string[];
     /**
      * Copies all screenshots found in the test attachments.
      */
     copyScreenshots(result: TestResult, destFolder: string): string[];
-    /**
-     * Copies all PNG attachments to the report folder and returns their new names.
-     */
-    copyPngAttachments(result: TestResult, destFolder: string): {
-        path: string;
-        name: string;
-    }[];
     /**
      * Copies all other attachments (traces, logs, etc.) to the report folder.
      */
@@ -31,7 +24,7 @@ export declare class A11yReportAssets {
         name: string;
     }[];
     /**
-     * Writes a buffer to a file in the destination folder.
+     * Persists an in-memory buffer to a file in the destination folder.
      */
-    writeBuffer(destFolder: string, fileName: string, buffer: Buffer): string;
+    saveBuffer(destFolder: string, fileName: string, buffer: Buffer): string;
 }

package/dist/A11yReportAssets.js

@@ -56,72 +56,26 @@ class A11yReportAssets {
         return name;
     }
     /**
-     * Copies the test video if available.
-     * Includes a more robust retry to ensure Playwright has finished flushing the file.
+     * Copies all video attachments to the report folder for portability.
+     * @returns An array of filenames written to the destination folder.
      */
-    async copyTestVideo(result, destFolder) {
-        // More flexible matching for video attachments
-        const videoAttachments = result.attachments.filter((a) => a.name === 'video' || (a.contentType || '').startsWith('video/'));
-        let bestVideo = null;
-        let maxSize = -1;
-        for (const attachment of videoAttachments) {
-            if (!attachment.path)
-                continue;
-            // Retry logic: Wait for file to exist and have non-zero size (up to 3 seconds)
-            let attempts = 0;
-            let isReady = false;
-            while (attempts < 15) {
-                if (fs.existsSync(attachment.path)) {
-                    try {
-                        const stats = fs.statSync(attachment.path);
-                        if (stats.size > 0) {
-                            isReady = true;
-                            break;
-                        }
-                    }
-                    catch {
-                        // statSync might fail if file is temporarily locked
-                    }
-                }
-                await new Promise((r) => setTimeout(r, 200));
-                attempts++;
-            }
-            if (isReady) {
-                try {
-                    const size = fs.statSync(attachment.path).size;
-                    if (size > maxSize) {
-                        maxSize = size;
-                        bestVideo = attachment.path;
-                    }
-                }
-                catch (err) {
-                    console.error(`[SnapAlly] Error checking video stats: ${err}`);
-                }
-            }
-            else {
-                console.warn(`[SnapAlly] Video attachment found but file is missing or empty after retry: ${attachment.path}`);
-            }
-        }
-        if (bestVideo) {
-            try {
-                return this.copyToFolder(destFolder, bestVideo, 'video.webm');
-            }
-            catch (e) {
-                console.error(`[SnapAlly] Failed to copy video: ${e}`);
-                return path.basename(bestVideo);
-            }
-        }
-        return '';
+    copyVideos(result, destFolder) {
+        return result.attachments
+            .filter((a) => (a.name === 'video' || (a.contentType || '').startsWith('video/')) && a.path)
+            .map((attachment) => this.copyToFolder(destFolder, attachment.path))
+            .filter((p) => !!p);
     }
     /**
      * Copies all screenshots found in the test attachments.
      */
     copyScreenshots(result, destFolder) {
         return result.attachments
-            .filter((a) => a.name === 'screenshot' || (a.contentType || '').startsWith('image/'))
+            .filter((a) => a.name === 'screenshot' ||
+            a.name.endsWith('.png') ||
+            (a.contentType || '').startsWith('image/'))
             .map((a) => {
             if (a.path) {
-                return this.copyToFolder(destFolder, a.path);
+                return this.copyToFolder(destFolder, a.path, a.name !== 'screenshot' ? a.name : undefined);
             }
             else if (a.body) {
                 const timestamp = Date.now();
@@ -130,32 +84,12 @@ class A11yReportAssets {
                     : a.name.endsWith('.png')
                         ? a.name
                         : `${a.name}.png`;
-                return this.writeBuffer(destFolder, name, a.body);
+                return this.saveBuffer(destFolder, name, a.body);
             }
             return '';
         })
             .filter((path) => path !== '');
     }
-    /**
-     * Copies all PNG attachments to the report folder and returns their new names.
-     */
-    copyPngAttachments(result, destFolder) {
-        return result.attachments
-            .filter((a) => (a.name.endsWith('.png') || (a.contentType || '') === 'image/png') &&
-            a.name !== 'screenshot')
-            .map((a) => {
-            let name = '';
-            if (a.path) {
-                name = this.copyToFolder(destFolder, a.path, a.name);
-            }
-            else if (a.body) {
-                const safeName = a.name.endsWith('.png') ? a.name : `${a.name}.png`;
-                name = this.writeBuffer(destFolder, safeName, a.body);
-            }
-            return name ? { path: name, name: a.name } : null;
-        })
-            .filter((item) => item !== null);
-    }
     /**
      * Copies all other attachments (traces, logs, etc.) to the report folder.
      */
@@ -163,7 +97,7 @@ class A11yReportAssets {
         const excludedNames = ['screenshot', 'video', 'A11y'];
         return result.attachments
             .filter((a) => !excludedNames.includes(a.name) &&
-            !a.name.endsWith('.png') &&
+            !a.name.toLowerCase().endsWith('.png') &&
             !(a.contentType || '').startsWith('image/') &&
             !(a.contentType || '').startsWith('video/'))
             .map((a) => {
@@ -172,16 +106,16 @@ class A11yReportAssets {
                 name = this.copyToFolder(destFolder, a.path, a.name);
             }
             else if (a.body) {
-                name = this.writeBuffer(destFolder, a.name, a.body);
+                name = this.saveBuffer(destFolder, a.name, a.body);
             }
             return name ? { path: name, name: a.name } : null;
         })
             .filter((item) => item !== null);
     }
     /**
-     * Writes a buffer to a file in the destination folder.
+     * Persists an in-memory buffer to a file in the destination folder.
      */
-    writeBuffer(destFolder, fileName, buffer) {
+    saveBuffer(destFolder, fileName, buffer) {
         if (!fs.existsSync(destFolder)) {
             fs.mkdirSync(destFolder, { recursive: true });
         }

package/dist/A11yScanner.d.ts

@@ -1,24 +1,5 @@
-import type { Page, Locator, TestInfo } from '@playwright/test';
-export interface A11yScannerOptions {
-    /** Specific selector or locator to include in the scan. */
-    include?: string | Locator;
-    /** Alias for include. */
-    box?: string | Locator;
-    /** Whether to log violations to the console. @default true */
-    verbose?: boolean;
-    /** Alias for verbose. */
-    consoleLog?: boolean;
-    /** Specific Axe rules to enable or disable. */
-    rules?: Record<string, {
-        enabled: boolean;
-    }>;
-    /** Specific WCAG tags to check (e.g., ['wcag2a', 'wcag2aa']). */
-    tags?: string[];
-    /** Any other Axe-core options to pass to the builder. */
-    axeOptions?: Record<string, unknown>;
-    /** Custom identifier for the report file name. */
-    pageKey?: string;
-}
+import type { Page, TestInfo } from '@playwright/test';
+import { A11yScannerOptions } from './models';
 /**
  * Performs an accessibility audit using Axe and Lighthouse.
  */

package/dist/A11yScanner.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkAccessibility = void 0;
 exports.scanA11y = scanA11y;
 const playwright_1 = __importDefault(require("@axe-core/playwright"));
-const A11yAuditOverlay_1 = require("./A11yAuditOverlay");
-const models_1 = require("./models");
+const A11yVisualReporter_1 = require("./A11yVisualReporter");
 const A11yTimeUtils_1 = require("./A11yTimeUtils");
+const ResolvedColors_1 = require("./ResolvedColors");
 /**
  * Sanitizes a string to be safe for use in file paths and prevents path traversal attacks.
  * Removes or replaces dangerous characters and path separators.
@@ -40,7 +40,7 @@ async function scanA11y(page, testInfo, options = {}) {
     // Sanitize pageKey to prevent path traversal attacks
     const rawPageKey = options.pageKey || page.url();
     const pageKey = sanitizePageKey(rawPageKey);
-    const overlay = new A11yAuditOverlay_1.A11yAuditOverlay(page);
+    const overlay = new A11yVisualReporter_1.A11yVisualReporter(page);
     // Configure Axe
     let axeBuilder = new playwright_1.default({ page });
     const target = options.include || options.box;
@@ -88,10 +88,10 @@ async function scanA11y(page, testInfo, options = {}) {
         }
         // Batch log to Browser Console in a single evaluate call
         if (showBrowser) {
-            await page.evaluate(([mainMsg, details]) => {
-                console.log(`%c ${mainMsg}`, 'color: #ea580c; font-weight: bold; font-size: 12px;');
+            await page.evaluate(([mainMsg, details, color]) => {
+                console.log(`%c ${mainMsg}`, `color: ${color}; font-weight: bold; font-size: 12px;`);
                 details.forEach((msg) => console.log(msg));
-            }, [mainMsg, detailMessages]);
+            }, [mainMsg, detailMessages, ResolvedColors_1.DEFAULT_COLORS.serious]);
         }
     }
     // Fail the test if violations found (softly)
@@ -103,29 +103,23 @@ async function scanA11y(page, testInfo, options = {}) {
         .toBe(0);
     // Run Axe Audit
     const errors = [];
-    const colorMap = {
-        minor: '#0ea5e9', // Ocean Blue
-        moderate: '#f59e0b', // Amber/Honey
-        serious: '#ea580c', // Deep Orange
-        critical: '#dc2626', // Power Red
-    };
     // Process violations for the report
     for (const violation of axeResults.violations) {
         let errorIdx = 0;
         const targets = [];
-        const severityColor = colorMap[violation.impact || ''] || '#757575';
+        const severityColor = (0, ResolvedColors_1.getSeverityColor)(violation.impact);
         for (const node of violation.nodes) {
             for (const selector of node.target) {
                 const elementSelector = selector.toString();
                 const locator = page.locator(elementSelector);
-                await overlay.showViolationOverlay({ id: violation.id, help: violation.help }, severityColor);
+                await overlay.showBanner({ id: violation.id, help: violation.help }, severityColor);
                 if (await locator.isVisible()) {
                     await overlay.highlightElement(elementSelector, severityColor);
                     // Allow a small time for overlay highlight to be visible in video
                     // eslint-disable-next-line playwright/no-wait-for-timeout
                     await page.waitForTimeout(100);
                     const screenshotName = `a11y-${violation.id}-${errorIdx++}.png`;
-                    const buffer = await overlay.captureAndAttachScreenshot(screenshotName, testInfo);
+                    const buffer = await overlay.captureScreenshot(screenshotName, testInfo);
                     // Capture execution steps for context
                     const excluded = new Set([
                         'Pre Condition',
@@ -147,7 +141,7 @@ async function scanA11y(page, testInfo, options = {}) {
                         stepsJson: JSON.stringify(contextSteps),
                         screenshotBase64: buffer.toString('base64'),
                     });
-                    await overlay.unhighlightElement();
+                    await overlay.removeHighlight();
                 }
             }
         }
@@ -169,16 +163,16 @@ async function scanA11y(page, testInfo, options = {}) {
         pageUrl: page.url(),
         accessibilityScore: 0, // No longer used, derivation from Lighthouse removed
         a11yErrors: errors,
-        criticalColor: models_1.Severity.critical,
-        seriousColor: models_1.Severity.serious,
-        moderateColor: models_1.Severity.moderate,
-        minorColor: models_1.Severity.minor,
+        criticalColor: ResolvedColors_1.DEFAULT_COLORS.critical,
+        seriousColor: ResolvedColors_1.DEFAULT_COLORS.serious,
+        moderateColor: ResolvedColors_1.DEFAULT_COLORS.moderate,
+        minorColor: ResolvedColors_1.DEFAULT_COLORS.minor,
         adoOrganization: process.env.ADO_ORGANIZATION || '',
         adoProject: process.env.ADO_PROJECT || '',
         timestamp: A11yTimeUtils_1.A11yTimeUtils.formatDate(new Date()),
     };
-    await overlay.addTestAttachment(testInfo, 'A11y', JSON.stringify(reportData));
-    await overlay.hideViolationOverlay();
+    await overlay.attachData(testInfo, 'A11y', JSON.stringify(reportData));
+    await overlay.clean();
 }
 /** Alias for backward compatibility */
 exports.checkAccessibility = scanA11y;

package/dist/A11yTimeUtils.js

@@ -24,29 +24,17 @@ class A11yTimeUtils {
      * Formats a Date object into a human-readable string.
      */
     static formatDate(date) {
-        const day = String(date.getDate()).padStart(2, '0');
-        const monthNames = [
-            'Jan',
-            'Feb',
-            'Mar',
-            'Apr',
-            'May',
-            'Jun',
-            'Jul',
-            'Aug',
-            'Sep',
-            'Oct',
-            'Nov',
-            'Dec',
-        ];
-        const month = monthNames[date.getMonth()];
-        const year = date.getFullYear();
-        let hours = date.getHours();
-        const ampm = hours >= 12 ? 'PM' : 'AM';
-        hours = hours % 12 || 12;
-        const formattedHours = String(hours).padStart(2, '0');
-        const minutes = String(date.getMinutes()).padStart(2, '0');
-        return `${day} ${month} ${year}, ${formattedHours}:${minutes} ${ampm}`;
+        const parts = new Intl.DateTimeFormat('en-US', {
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: true,
+        }).formatToParts(date);
+        const get = (type) => { var _a; return ((_a = parts.find((p) => p.type === type)) === null || _a === void 0 ? void 0 : _a.value) || ''; };
+        // Standard US Format: MMM DD, YYYY, HH:MM AM/PM
+        return `${get('month')} ${get('day')}, ${get('year')}, ${get('hour')}:${get('minute')} ${get('dayPeriod').toUpperCase()}`;
     }
 }
 exports.A11yTimeUtils = A11yTimeUtils;

package/dist/A11yVisualReporter.d.ts

@@ -0,0 +1,50 @@
+import type { Page, TestInfo } from '@playwright/test';
+/**
+ * Manages visual feedback on the page during an accessibility scan.
+ * Handles element highlights, violation banners, and report attachments.
+ */
+export declare class A11yVisualReporter {
+    private readonly page;
+    private readonly rootId;
+    private static readonly BANNER_ID;
+    private static readonly HIGHLIGHT_ID;
+    constructor(page: Page);
+    /**
+     * Shows a violation banner at the bottom of the page.
+     */
+    showBanner(violation: {
+        id: string;
+        help: string;
+    }, color: string): Promise<void>;
+    /**
+     * Highlights an element on the page.
+     */
+    highlightElement(selector: string, color: string): Promise<void>;
+    /**
+     * Removes all visual feedback from the page.
+     */
+    clean(): Promise<void>;
+    /**
+     * Removes the element highlight.
+     */
+    removeHighlight(): Promise<void>;
+    /**
+     * Attaches JSON data to the test report.
+     */
+    attachData(testInfo: TestInfo, name: string, data: string): Promise<void>;
+    /**
+     * Captures and attaches a screenshot to the test report.
+     */
+    captureScreenshot(name: string, testInfo: TestInfo): Promise<Buffer>;
+    /**
+     * Injects helper functions into the page context.
+     */
+    private ensureHelpers;
+    private safeEvaluate;
+}
+declare global {
+    interface Window {
+        snapAllyGetRoot: (id: string) => ShadowRoot;
+        snapAllyToAlpha: (color: string, alpha: number) => string;
+    }
+}

package/dist/A11yVisualReporter.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.A11yVisualReporter = void 0;
+/**
+ * Manages visual feedback on the page during an accessibility scan.
+ * Handles element highlights, violation banners, and report attachments.
+ */
+class A11yVisualReporter {
+    constructor(page) {
+        this.page = page;
+        this.rootId = 'snap-ally-visual-root';
+    }
+    /**
+     * Shows a violation banner at the bottom of the page.
+     */
+    async showBanner(violation, color) {
+        await this.safeEvaluate(([v, rawColor, rootId, bannerId]) => {
+            const shadow = window.snapAllyGetRoot(rootId);
+            let container = shadow.getElementById(bannerId);
+            if (!container) {
+                const style = document.createElement('style');
+                style.textContent = `
+                        #${bannerId} {
+                            position: fixed;
+                            left: 50%;
+                            top: 24px;
+                            transform: translateX(-50%);
+                            width: calc(100% - 40px);
+                            max-width: 600px;
+                            padding: 12px 18px;
+                            border-radius: 12px;
+                            color: white;
+                            font-family: system-ui, -apple-system, sans-serif;
+                            font-size: 14px;
+                            display: flex;
+                            align-items: center;
+                            gap: 12px;
+                            box-shadow: 0 12px 40px rgba(0,0,0,0.3);
+                            backdrop-filter: blur(16px) saturate(180%);
+                            -webkit-backdrop-filter: blur(16px) saturate(180%);
+                            border: 1px solid rgba(255,255,255,0.15);
+                            z-index: 10000;
+                            transition: all 0.3s ease;
+                        }
+                        .badge {
+                            background: rgba(255,255,255,0.2);
+                            padding: 2px 8px;
+                            border-radius: 6px;
+                            font-size: 11px;
+                            font-weight: 700;
+                            text-transform: uppercase;
+                            border: 1px solid rgba(255,255,255,0.2);
+                        }
+                        .content { flex: 1; line-height: 1.4; font-weight: 500; }
+                    `;
+                shadow.appendChild(style);
+                container = document.createElement('div');
+                container.id = bannerId;
+                shadow.appendChild(container);
+            }
+            container.style.backgroundColor = window.snapAllyToAlpha(rawColor, 0.85);
+            container.innerHTML = `
+                    <div style="font-size: 20px;">⚠️</div>
+                    <div class="content">
+                        <div style="margin-bottom:4px; display:flex; align-items:center; gap:8px;">
+                            <span class="badge">${v.id}</span>
+                            <span style="opacity: 0.9;">${v.help}</span>
+                        </div>
+                    </div>
+                `;
+        }, [violation, color, this.rootId, A11yVisualReporter.BANNER_ID]);
+    }
+    /**
+     * Highlights an element on the page.
+     */
+    async highlightElement(selector, color) {
+        await this.safeEvaluate(([sel, rawColor, rootId, highlightId]) => {
+            const target = document.querySelector(sel);
+            if (!target)
+                return;
+            target.scrollIntoView({ behavior: 'auto', block: 'center' });
+            const shadow = window.snapAllyGetRoot(rootId);
+            let highlight = shadow.getElementById(highlightId);
+            if (!highlight) {
+                const style = document.createElement('style');
+                style.textContent = `
+                        #${highlightId} {
+                            position: absolute;
+                            pointer-events: none;
+                            border-radius: 8px;
+                            box-sizing: border-box;
+                            z-index: 9999;
+                            transition: all 0.2s ease;
+                            box-shadow: 0 0 0 4px var(--c-alpha), 0 0 20px var(--c-alpha);
+                        }
+                    `;
+                shadow.appendChild(style);
+                highlight = document.createElement('div');
+                highlight.id = highlightId;
+                shadow.appendChild(highlight);
+            }
+            const pad = 4;
+            const rect = target.getBoundingClientRect();
+            highlight.style.left = `${rect.left + window.scrollX - pad}px`;
+            highlight.style.top = `${rect.top + window.scrollY - pad}px`;
+            highlight.style.width = `${rect.width + pad * 2}px`;
+            highlight.style.height = `${rect.height + pad * 2}px`;
+            highlight.style.border = `3px solid ${rawColor}`;
+            highlight.style.setProperty('--c-alpha', window.snapAllyToAlpha(rawColor, 0.3));
+        }, [selector, color, this.rootId, A11yVisualReporter.HIGHLIGHT_ID]);
+    }
+    /**
+     * Removes all visual feedback from the page.
+     */
+    async clean() {
+        await this.safeEvaluate((id) => { var _a; return (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove(); }, this.rootId);
+    }
+    /**
+     * Removes the element highlight.
+     */
+    async removeHighlight() {
+        await this.safeEvaluate(([rootId, hId]) => { var _a, _b, _c; return (_c = (_b = (_a = document.getElementById(rootId)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(hId)) === null || _c === void 0 ? void 0 : _c.remove(); }, [this.rootId, A11yVisualReporter.HIGHLIGHT_ID]);
+    }
+    /**
+     * Attaches JSON data to the test report.
+     */
+    async attachData(testInfo, name, data) {
+        await testInfo.attach(name, {
+            contentType: 'application/json',
+            body: Buffer.from(data),
+        });
+    }
+    /**
+     * Captures and attaches a screenshot to the test report.
+     */
+    async captureScreenshot(name, testInfo) {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const { test } = require('@playwright/test');
+        return await test.step('Capture A11y screenshot', async () => {
+            const screenshot = await this.page.screenshot({ fullPage: false });
+            await testInfo.attach(name, { contentType: 'image/png', body: screenshot });
+            return screenshot;
+        });
+    }
+    /**
+     * Injects helper functions into the page context.
+     */
+    async ensureHelpers() {
+        await this.page.evaluate(() => {
+            if (typeof window.snapAllyGetRoot === 'function')
+                return;
+            window.snapAllyGetRoot = (id) => {
+                let root = document.getElementById(id);
+                if (!root) {
+                    root = document.createElement('div');
+                    root.id = id;
+                    root.style.cssText = 'position:absolute;top:0;left:0;width:0;height:0;z-index:2147483647;';
+                    document.body.appendChild(root);
+                    root.attachShadow({ mode: 'open' });
+                }
+                return root.shadowRoot;
+            };
+            window.snapAllyToAlpha = (color, alpha) => {
+                if (color.startsWith('rgba'))
+                    return color.replace(/[\d.]+\)$/, `${alpha})`);
+                if (color.startsWith('rgb'))
+                    return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`);
+                const hex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+                return `${color}${hex}`;
+            };
+        });
+    }
+    async safeEvaluate(fn, arg) {
+        try {
+            await this.ensureHelpers();
+            await (arg !== undefined ? this.page.evaluate(fn, arg) : this.page.evaluate(fn));
+        }
+        catch (e) {
+            const msg = e instanceof Error ? e.message : String(e);
+            if (msg.includes('closed') || msg.includes('destroyed') || msg.includes('ended'))
+                return;
+            throw e;
+        }
+    }
+}
+exports.A11yVisualReporter = A11yVisualReporter;
+A11yVisualReporter.BANNER_ID = 'snap-ally-banner';
+A11yVisualReporter.HIGHLIGHT_ID = 'snap-ally-highlight';