snap-ally 0.3.0 → 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/SnapAllyReporter.js

@@ -68,7 +68,7 @@ class SnapAllyReporter {
         };
         this.testRuleCounts = {};
         this.testGlobalCounts = {};
-        this.options = options;
+        this.options = { verbose: true, consoleLog: true, ...options };
         this.outputFolder = path.resolve(process.cwd(), options.outputFolder || 'steps-report');
         this.validateOutputFolder(this.outputFolder);
         this.colors = {
@@ -92,23 +92,23 @@ class SnapAllyReporter {
         const normalizedCwd = path.normalize(cwd);
         // Prevent deletion of current working directory
         if (normalizedPath === normalizedCwd) {
-            throw new Error(`[SnapAlly] Invalid outputFolder: Cannot delete the current working directory. ` +
+            throw new Error('[SnapAlly] Invalid outputFolder: Cannot delete the current working directory. ' +
                 `Resolved path: "${resolvedPath}"`);
         }
         // Prevent deletion of parent directories
         if (normalizedCwd.startsWith(normalizedPath + path.sep) || normalizedCwd.startsWith(normalizedPath + '/')) {
-            throw new Error(`[SnapAlly] Invalid outputFolder: Cannot delete a parent directory of the current working directory. ` +
+            throw new Error('[SnapAlly] Invalid outputFolder: Cannot delete a parent directory of the current working directory. ' +
                 `Resolved path: "${resolvedPath}"`);
         }
         // Prevent deletion of root or near-root directories
         const pathSegments = normalizedPath.split(path.sep).filter(s => s.length > 0);
         if (pathSegments.length <= 1) {
-            throw new Error(`[SnapAlly] Invalid outputFolder: Path is too close to root directory. ` +
+            throw new Error('[SnapAlly] Invalid outputFolder: Path is too close to root directory. ' +
                 `Resolved path: "${resolvedPath}"`);
         }
         // Ensure the path is within the current working directory (safest approach)
         if (!normalizedPath.startsWith(normalizedCwd + path.sep) && !normalizedPath.startsWith(normalizedCwd + '/')) {
-            throw new Error(`[SnapAlly] Invalid outputFolder: Path must be within the current working directory. ` +
+            throw new Error('[SnapAlly] Invalid outputFolder: Path must be within the current working directory. ' +
                 `Resolved path: "${resolvedPath}", CWD: "${cwd}"`);
         }
     }
@@ -134,17 +134,14 @@ class SnapAllyReporter {
         console.log(`\n[SnapAlly] Report generated: ${summaryPath}`);
     }
     async processTestResult(test, result, index) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const testFolderName = `test-${index}`;
         const testFolder = path.join(this.outputFolder, testFolderName);
         const videoPath = this.assetsManager.copyVideos(result, testFolder);
         const screenshotPaths = this.assetsManager.copyScreenshots(result, testFolder);
         const attachments = this.assetsManager.copyAllOtherAttachments(result, testFolder);
         const a11yAttachment = result.attachments.find((a) => a.name === 'A11y');
-        if (a11yAttachment) {
-            console.log(`[SnapAlly] Found A11y attachment for project: ${test._projectId}`);
-        }
-        else {
+        if (!a11yAttachment && this.options.verbose) {
             console.warn(`[SnapAlly] A11y attachment missing for test: ${test.title}. Available: ${result.attachments.map(a => a.name).join(', ')}`);
         }
         let a11yData = null;
@@ -157,16 +154,14 @@ class SnapAllyReporter {
             }
         }
         // Handle cases where a11yData might be the direct ReportData or wrapped in a data property
-        const actualData = (a11yData === null || a11yData === void 0 ? void 0 : a11yData.data) || a11yData;
+        const actualData = (a11yData && typeof a11yData === 'object' && 'data' in a11yData ? a11yData.data : a11yData);
         const violations = (actualData === null || actualData === void 0 ? void 0 : actualData.a11yErrors) || (actualData === null || actualData === void 0 ? void 0 : actualData.violations) || [];
         const a11yErrorCount = violations.reduce((acc, curr) => { var _a, _b; return acc + (curr.total || ((_a = curr.target) === null || _a === void 0 ? void 0 : _a.length) || ((_b = curr.nodes) === null || _b === void 0 ? void 0 : _b.length) || 0); }, 0);
         const filteredSteps = (() => {
-            const sRaw = result.steps.map(s => s.title);
             const blocklist = ['Evaluate', 'Create page', 'Close page', 'Before Hooks', 'After Hooks', 'Worker Teardown', 'Worker Cleanup', 'Attach', 'Wait for timeout', 'Capture A11y screenshot'];
             const filtered = result.steps
                 .filter((s) => !blocklist.some(b => s.title.includes(b)))
                 .map((s) => s.title);
-            console.log(`[SnapAlly] Steps for ${test.title}: Raw=${sRaw.length}, Filtered=${filtered.length}`);
             return filtered;
         })();
         const testResults = {
@@ -181,13 +176,11 @@ class SnapAllyReporter {
             statusIcon: this.getStatusIcon(result.status),
             browser: (() => {
                 var _a, _b;
-                if (test.outcome() === 'skipped')
-                    return 'n/a';
                 const bName = test._projectId ||
                     ((_b = (_a = test.parent) === null || _a === void 0 ? void 0 : _a.project()) === null || _b === void 0 ? void 0 : _b.name) ||
                     test.projectName ||
                     'chromium';
-                return bName;
+                return test.outcome() === 'skipped' ? 'n/a' : bName;
             })(),
             adoOrganization: ((_a = this.options.ado) === null || _a === void 0 ? void 0 : _a.organization) || (actualData === null || actualData === void 0 ? void 0 : actualData.adoOrganization),
             adoProject: ((_b = this.options.ado) === null || _b === void 0 ? void 0 : _b.project) || (actualData === null || actualData === void 0 ? void 0 : actualData.adoProject),
@@ -222,7 +215,7 @@ class SnapAllyReporter {
             console.log(`[SnapAlly] Generating A11y report for ${test.title} (Browser: ${testResults.browser})`);
             await this.renderer.render('accessibility-report.html', testResults, testFolder, a11yReportPath);
         }
-        console.log(`[SnapAlly] Data state for "${test.title}": browser=${testResults.browser}, a11yErrors=${((_d = testResults.a11yErrors) === null || _d === void 0 ? void 0 : _d.length) || 0}`);
+        // Removed debug logging of internal data state
         const reportPath = path.join(testFolder, reportFileName);
         await this.renderer.render('test-execution-report.html', testResults, testFolder, reportPath);
         this.updateSummary(test, testResults);
@@ -299,7 +292,7 @@ class SnapAllyReporter {
                 if (!this.executionSummary.wcagErrors[ruleId]) {
                     this.executionSummary.wcagErrors[ruleId] = {
                         count: 0,
-                        severity: err.severity || err.impact,
+                        severity: err.severity || err.impact || 'minor',
                         helpUrl: err.helpUrl,
                         description: err.description,
                     };
@@ -315,7 +308,7 @@ class SnapAllyReporter {
                 if (!bSummary.wcagErrors[ruleId]) {
                     bSummary.wcagErrors[ruleId] = {
                         count: 0,
-                        severity: err.severity || err.impact,
+                        severity: err.severity || err.impact || 'minor',
                         helpUrl: err.helpUrl,
                         description: err.description,
                     };

package/dist/core/Scanner.js

@@ -27,9 +27,15 @@ function sanitizePageKey(input) {
  * Performs an accessibility audit using Axe and Lighthouse.
  */
 async function scanA11y(page, testInfo, options = {}) {
-    var _a, _b, _c, _d, _e, _f;
-    const showTerminal = (_a = options.verbose) !== null && _a !== void 0 ? _a : true;
-    const showBrowser = (_b = options.consoleLog) !== null && _b !== void 0 ? _b : true;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // 1. Find reporter config for global defaults
+    const reporterConfig = testInfo.config.reporter.find((r) => Array.isArray(r) &&
+        (typeof r[0] === 'string' &&
+            (r[0].includes('SnapAllyReporter') || r[0].endsWith('SnapAllyReporter.ts'))));
+    const globalOptions = (Array.isArray(reporterConfig) ? ((_a = reporterConfig[1]) !== null && _a !== void 0 ? _a : {}) : {});
+    // 2. Resolve final options (local > global > default)
+    const showTerminal = (_c = (_b = options.verbose) !== null && _b !== void 0 ? _b : globalOptions.verbose) !== null && _c !== void 0 ? _c : true;
+    const showBrowser = (_e = (_d = options.consoleLog) !== null && _d !== void 0 ? _d : globalOptions.consoleLog) !== null && _e !== void 0 ? _e : true;
     const rawPageKey = options.pageKey || page.url();
     const pageKey = sanitizePageKey(rawPageKey);
     const overlay = new VisualReporter_1.VisualReporter(page);
@@ -82,14 +88,10 @@ async function scanA11y(page, testInfo, options = {}) {
             }, [mainMsg, detailMessages, models_1.DEFAULT_COLORS.serious]);
         }
     }
-    test_1.expect
-        .soft(violationCount, `Accessibility audit failed with ${violationCount} violations.`)
-        .toBe(0);
-    const reporterConfig = testInfo.config.reporter.find((r) => Array.isArray(r) &&
-        (typeof r[0] === 'string' &&
-            (r[0].includes('SnapAllyReporter') || r[0].endsWith('src/SnapAllyReporter.ts'))));
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const customColors = reporterConfig && Array.isArray(reporterConfig) ? (_c = reporterConfig[1]) === null || _c === void 0 ? void 0 : _c.colors : undefined;
+    await test_1.test.step('Check Accessibility', async () => {
+        test_1.expect.soft(violationCount).toBe(0);
+    });
+    const customColors = globalOptions === null || globalOptions === void 0 ? void 0 : globalOptions.colors;
     const errors = [];
     for (const violation of axeResults.violations) {
         let errorIdx = 0;
@@ -151,9 +153,9 @@ async function scanA11y(page, testInfo, options = {}) {
         seriousColor: (customColors === null || customColors === void 0 ? void 0 : customColors.serious) || models_1.DEFAULT_COLORS.serious,
         moderateColor: (customColors === null || customColors === void 0 ? void 0 : customColors.moderate) || models_1.DEFAULT_COLORS.moderate,
         minorColor: (customColors === null || customColors === void 0 ? void 0 : customColors.minor) || models_1.DEFAULT_COLORS.minor,
-        adoOrganization: ((_d = options.ado) === null || _d === void 0 ? void 0 : _d.organization) || process.env.ADO_ORGANIZATION || '',
-        adoProject: ((_e = options.ado) === null || _e === void 0 ? void 0 : _e.project) || process.env.ADO_PROJECT || '',
-        adoAreaPath: ((_f = options.ado) === null || _f === void 0 ? void 0 : _f.areaPath) || process.env.ADO_AREA_PATH || '',
+        adoOrganization: ((_f = options.ado) === null || _f === void 0 ? void 0 : _f.organization) || process.env.ADO_ORGANIZATION || '',
+        adoProject: ((_g = options.ado) === null || _g === void 0 ? void 0 : _g.project) || process.env.ADO_PROJECT || '',
+        adoAreaPath: ((_h = options.ado) === null || _h === void 0 ? void 0 : _h.areaPath) || process.env.ADO_AREA_PATH || '',
         timestamp: TimeUtils_1.TimeUtils.formatDate(new Date()),
     };
     await overlay.attachJsonData(testInfo, 'A11y', JSON.stringify(reportData));

package/dist/models/ReporterOptions.d.ts

@@ -13,6 +13,16 @@ export interface ReporterOptions {
         moderate?: string;
         minor?: string;
     };
+    /**
+     * Whether to log violations to the terminal.
+     * @default true
+     */
+    verbose?: boolean;
+    /**
+     * Whether to log violations to the browser console.
+     * @default true
+     */
+    consoleLog?: boolean;
     /**
      * Azure DevOps integration options.
      */

package/dist/models/ResolvedColors.js

@@ -4,10 +4,10 @@ exports.FALLBACK_GRAY = exports.DEFAULT_COLORS = void 0;
 exports.getSeverityColor = getSeverityColor;
 /** Default severity colors used when the user doesn't override them. */
 exports.DEFAULT_COLORS = {
-    critical: '#dc2626', // Power Red
-    serious: '#ea580c', // Deep Orange
-    moderate: '#f59e0b', // Amber/Honey
-    minor: '#f0f06f', // Ocean Blue (Updated to Yellow per user request)
+    critical: '#b91c1c', // Deep Red
+    serious: '#c2410c', // Deep Orange
+    moderate: '#a16207', // Dark Amber
+    minor: '#1e40af', // Royal Blue
 };
 /** Default fallback color for unknown severities. */
 exports.FALLBACK_GRAY = '#757575';

package/dist/templates/report-app.js

@@ -711,8 +711,10 @@ function renderBarChart(elementId, wcagData, colors) {
 
     const chartColors = wcagEntries.map((e) => (colors && colors[e[1].severity]) || '#ef4444');
 
+    const chartHeight = 80 + (wcagEntries.length * 50);
+
     new ApexCharts(el, {
-        chart: { type: 'bar', height: 350, toolbar: { show: false } },
+        chart: { type: 'bar', height: chartHeight, toolbar: { show: false } },
         series: [{ name: 'Violations', data: wcagEntries.map((e) => e[1].count) }],
         xaxis: {
             categories: wcagEntries.map((e) => e[0]),
@@ -733,7 +735,7 @@ function renderBarChart(elementId, wcagData, colors) {
             bar: {
                 borderRadius: 6,
                 horizontal: true,
-                barHeight: '70%',
+                barHeight: wcagEntries.length === 1 ? '35%' : wcagEntries.length <= 3 ? '50%' : '75%',
                 distributed: true,
                 dataLabels: { position: 'top' },
             },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "snap-ally",
-    "version": "0.3.0",
+    "version": "1.0.0",
     "description": "A custom Playwright reporter for Accessibility testing using Axe, with HTML reporting and Azure DevOps integration.",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -48,4 +48,4 @@
         "prettier": "^3.8.1",
         "typescript": "^5.0.0"
     }
-}
+}