@octaviaflow/accessibility-checker 1.1.2 → 2.0.0

package/README.md

@@ -17,6 +17,7 @@ A comprehensive TypeScript-based accessibility testing tool that combines heuris
 ## 📦 Installation
 
 ### NPM/Yarn
+
 ```bash
 npm install @octaviaflow/accessibility-checker
 # or
@@ -24,11 +25,13 @@ yarn add @octaviaflow/accessibility-checker
 ```
 
 ### Bun
+
 ```bash
 bun add @octaviaflow/accessibility-checker
 ```
 
 ### Global Installation
+
 ```bash
 npm install -g @octaviaflow/accessibility-checker
 ```
@@ -71,18 +74,19 @@ console.log(`Found ${result.summary.totalIssues} accessibility issues`);
 
 ## 📋 CLI Options
 
-| Option | Alias | Description | Default |
-|--------|-------|-------------|---------|
-| `--input <file>` | `-i` | HTML file to analyze | - |
-| `--output <file>` | `-o` | Output file path | `./data/results.json` |
-| `--format <type>` | - | Output format: `json`, `html`, `csv`, `excel` | `json` |
-| `--sample` | - | Run with sample HTML for testing | `false` |
-| `--verbose` | `-v` | Verbose output with detailed logging | `false` |
-| `--help` | `-h` | Show help message | - |
+| Option            | Alias | Description                                   | Default               |
+| ----------------- | ----- | --------------------------------------------- | --------------------- |
+| `--input <file>`  | `-i`  | HTML file to analyze                          | -                     |
+| `--output <file>` | `-o`  | Output file path                              | `./data/results.json` |
+| `--format <type>` | -     | Output format: `json`, `html`, `csv`, `excel` | `json`                |
+| `--sample`        | -     | Run with sample HTML for testing              | `false`               |
+| `--verbose`       | `-v`  | Verbose output with detailed logging          | `false`               |
+| `--help`          | `-h`  | Show help message                             | -                     |
 
 ## 📊 Output Formats
 
 ### JSON Format
+
 ```json
 {
   "summary": {
@@ -102,7 +106,9 @@ console.log(`Found ${result.summary.totalIssues} accessibility issues`);
       "source": "heuristic"
     }
   ],
-  "axe": { /* Full axe-core results */ },
+  "axe": {
+    /* Full axe-core results */
+  },
   "meta": {
     "timestamp": "2025-11-13T10:52:00.000Z",
     "source": "index.html",
@@ -112,6 +118,7 @@ console.log(`Found ${result.summary.totalIssues} accessibility issues`);
 ```
 
 ### HTML Report
+
 - **Responsive design** with modern styling
 - **Color-coded issues** by severity and type
 - **Interactive elements** with expandable details
@@ -119,6 +126,7 @@ console.log(`Found ${result.summary.totalIssues} accessibility issues`);
 - **WCAG compliance mapping**
 
 ### Excel Report
+
 - **Summary sheet** with overview metrics
 - **Issues sheet** with detailed findings
 - **Formatted tables** with proper styling
@@ -127,11 +135,13 @@ console.log(`Found ${result.summary.totalIssues} accessibility issues`);
 ## 🔧 Development
 
 ### Prerequisites
+
 - **Node.js** ≥ 22.0.0
 - **Bun** ≥ 1.3.2 (recommended)
 - **TypeScript** ≥ 5.8.3
 
 ### Setup
+
 ```bash
 # Clone the repository
 git clone https://github.com/OctaviaFlow/OctaviaFlow-Design-System.git
@@ -155,16 +165,16 @@ bun run dev
 
 ### Scripts
 
-| Script | Description |
-|--------|-------------|
-| `bun run build` | Build CommonJS, ESM, and TypeScript declarations |
-| `bun run test` | Run tests once and exit |
-| `bun run test:watch` | Run tests in watch mode |
-| `bun run lint` | Run ESLint |
-| `bun run lint:fix` | Fix ESLint issues |
-| `bun run format` | Format code with Prettier |
-| `bun run ci-check` | Full CI pipeline (build + test + lint) |
-| `bun run dev` | Build and run sample |
+| Script               | Description                                      |
+| -------------------- | ------------------------------------------------ |
+| `bun run build`      | Build CommonJS, ESM, and TypeScript declarations |
+| `bun run test`       | Run tests once and exit                          |
+| `bun run test:watch` | Run tests in watch mode                          |
+| `bun run lint`       | Run ESLint                                       |
+| `bun run lint:fix`   | Fix ESLint issues                                |
+| `bun run format`     | Format code with Prettier                        |
+| `bun run ci-check`   | Full CI pipeline (build + test + lint)           |
+| `bun run dev`        | Build and run sample                             |
 
 ## 🏗️ Architecture
 
@@ -243,7 +253,7 @@ const html = `
 
 const result = await analyze(html);
 console.log(`Found ${result.summary.totalIssues} issues:`);
-result.issues.forEach(issue => {
+result.issues.forEach((issue) => {
   console.log(`- ${issue.type}: ${issue.message}`);
 });
 ```
@@ -255,7 +265,7 @@ result.issues.forEach(issue => {
 - name: Accessibility Check
   run: |
     octaviaflow-achecker --input dist/index.html --format json --output accessibility-report.json
-    
+
 - name: Upload Report
   uses: actions/upload-artifact@v3
   with:
@@ -270,14 +280,14 @@ import { analyze, saveReport } from '@octaviaflow/accessibility-checker';
 
 async function generateAccessibilityReport(htmlFiles: string[]) {
   const results = [];
-  
+
   for (const file of htmlFiles) {
     const html = await fs.readFile(file, 'utf8');
     const result = await analyze(html);
     result.meta = { ...result.meta, source: file };
     results.push(result);
   }
-  
+
   // Generate combined report
   const combinedResult = {
     summary: {
@@ -287,16 +297,16 @@ async function generateAccessibilityReport(htmlFiles: string[]) {
           acc[type] = (acc[type] || 0) + count;
         });
         return acc;
-      }, {})
+      }, {}),
     },
-    issues: results.flatMap(r => r.issues),
+    issues: results.flatMap((r) => r.issues),
     meta: {
       timestamp: new Date().toISOString(),
       source: 'batch-analysis',
-      fileCount: htmlFiles.length
-    }
+      fileCount: htmlFiles.length,
+    },
   };
-  
+
   await saveReport(combinedResult, './batch-report.html', 'html');
 }
 ```
@@ -311,17 +321,17 @@ describe('Accessibility Tests', () => {
   test('homepage should be accessible', async () => {
     const html = await getRenderedHTML('/');
     const result = await analyze(html);
-    
+
     expect(result.summary.totalIssues).toBe(0);
   });
-  
+
   test('should have no critical axe violations', async () => {
     const html = await getRenderedHTML('/dashboard');
     const result = await analyze(html);
-    
+
     if (result.axe && 'violations' in result.axe) {
       const criticalViolations = result.axe.violations.filter(
-        v => v.impact === 'critical'
+        (v) => v.impact === 'critical'
       );
       expect(criticalViolations).toHaveLength(0);
     }
@@ -349,17 +359,17 @@ export default [
       parser: tsParser,
       parserOptions: {
         ecmaVersion: 2022,
-        sourceType: 'module'
-      }
+        sourceType: 'module',
+      },
     },
     plugins: {
-      '@typescript-eslint': typescriptEslint
+      '@typescript-eslint': typescriptEslint,
     },
     rules: {
       '@typescript-eslint/no-explicit-any': 'warn',
-      'no-console': 'off'
-    }
-  }
+      'no-console': 'off',
+    },
+  },
 ];
 ```
 

package/cjs/index.js

@@ -79,7 +79,7 @@ async function main(args) {
             timestamp: new Date().toISOString(),
             source: inputPath || 'sample',
             format,
-            version: '1.0.0'
+            version: '1.0.0',
         };
         spinner.succeed('Analysis complete');
         if (verbose) {
@@ -110,7 +110,7 @@ async function main(args) {
     }
 }
 if (require.main === module) {
-    main().catch(err => {
+    main().catch((err) => {
         console.error(chalk_1.default.red('Fatal error:'), err);
         process.exit(2);
     });

package/cjs/storage/reportWriter.js

@@ -82,28 +82,34 @@ function generateHtmlReport(result) {
     </div>
     
     <div class="issues">
-      ${issues.length === 0 ? `
+      ${issues.length === 0
+        ? `
         <div class="no-issues">
           <h2>✅ No Issues Found!</h2>
           <p>This page appears to be accessible according to our analysis.</p>
         </div>
-      ` : `
+      `
+        : `
         <h2>Issues Found (${issues.length})</h2>
-        ${issues.map(issue => `
+        ${issues
+            .map((issue) => `
           <div class="issue">
             <div class="issue-header">
               <span class="issue-type ${issue.type.replace(':', '-')}">${issue.type}</span>
               <span class="issue-message">${issue.message}</span>
             </div>
-            ${issue.snippet ? `
+            ${issue.snippet
+            ? `
               <div class="issue-body">
                 <strong>Code snippet:</strong>
                 <div class="code-snippet">${issue.snippet.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
                 ${issue.helpUrl ? `<p><a href="${issue.helpUrl}" target="_blank">Learn more →</a></p>` : ''}
               </div>
-            ` : ''}
+            `
+            : ''}
           </div>
-        `).join('')}
+        `)
+            .join('')}
       `}
     </div>
     
@@ -117,15 +123,15 @@ function generateHtmlReport(result) {
 function generateCsvReport(result) {
     const { issues } = result;
     const headers = ['Type', 'Message', 'Source', 'Snippet', 'Help URL'];
-    const rows = issues.map(issue => [
+    const rows = issues.map((issue) => [
         issue.type,
         issue.message,
         issue.source || 'heuristic',
         (issue.snippet || '').replace(/"/g, '""'),
-        issue.helpUrl || ''
+        issue.helpUrl || '',
     ]);
     const csvContent = [headers, ...rows]
-        .map(row => row.map(cell => `"${cell}"`).join(','))
+        .map((row) => row.map((cell) => `"${cell}"`).join(','))
         .join('\n');
     return csvContent;
 }
@@ -133,7 +139,10 @@ async function generateExcelReport(result, filePath) {
     const workbook = new XLSX.Workbook();
     const summarySheet = workbook.addWorksheet('Summary');
     summarySheet.addRow(['OctaviaFlow Accessibility Report']);
-    summarySheet.addRow(['Generated:', new Date(result.meta?.timestamp || Date.now()).toLocaleString()]);
+    summarySheet.addRow([
+        'Generated:',
+        new Date(result.meta?.timestamp || Date.now()).toLocaleString(),
+    ]);
     summarySheet.addRow(['Source:', result.meta?.source || 'Unknown']);
     summarySheet.addRow([]);
     summarySheet.addRow(['Total Issues:', result.summary.totalIssues]);
@@ -145,13 +154,13 @@ async function generateExcelReport(result, filePath) {
     });
     const issuesSheet = workbook.addWorksheet('Issues');
     issuesSheet.addRow(['Type', 'Message', 'Source', 'Snippet', 'Help URL']);
-    result.issues.forEach(issue => {
+    result.issues.forEach((issue) => {
         issuesSheet.addRow([
             issue.type,
             issue.message,
             issue.source || 'heuristic',
             issue.snippet || '',
-            issue.helpUrl || ''
+            issue.helpUrl || '',
         ]);
     });
     summarySheet.getRow(1).font = { bold: true, size: 16 };

package/mjs/index.js

@@ -72,7 +72,7 @@ export async function main(args) {
             timestamp: new Date().toISOString(),
             source: inputPath || 'sample',
             format,
-            version: '1.0.0'
+            version: '1.0.0',
         };
         spinner.succeed('Analysis complete');
         if (verbose) {
@@ -103,7 +103,7 @@ export async function main(args) {
     }
 }
 if (require.main === module) {
-    main().catch(err => {
+    main().catch((err) => {
         console.error(chalk.red('Fatal error:'), err);
         process.exit(2);
     });

package/mjs/storage/reportWriter.js

@@ -78,28 +78,34 @@ function generateHtmlReport(result) {
     </div>
     
     <div class="issues">
-      ${issues.length === 0 ? `
+      ${issues.length === 0
+        ? `
         <div class="no-issues">
           <h2>✅ No Issues Found!</h2>
           <p>This page appears to be accessible according to our analysis.</p>
         </div>
-      ` : `
+      `
+        : `
         <h2>Issues Found (${issues.length})</h2>
-        ${issues.map(issue => `
+        ${issues
+            .map((issue) => `
           <div class="issue">
             <div class="issue-header">
               <span class="issue-type ${issue.type.replace(':', '-')}">${issue.type}</span>
               <span class="issue-message">${issue.message}</span>
             </div>
-            ${issue.snippet ? `
+            ${issue.snippet
+            ? `
               <div class="issue-body">
                 <strong>Code snippet:</strong>
                 <div class="code-snippet">${issue.snippet.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
                 ${issue.helpUrl ? `<p><a href="${issue.helpUrl}" target="_blank">Learn more →</a></p>` : ''}
               </div>
-            ` : ''}
+            `
+            : ''}
           </div>
-        `).join('')}
+        `)
+            .join('')}
       `}
     </div>
     
@@ -113,15 +119,15 @@ function generateHtmlReport(result) {
 function generateCsvReport(result) {
     const { issues } = result;
     const headers = ['Type', 'Message', 'Source', 'Snippet', 'Help URL'];
-    const rows = issues.map(issue => [
+    const rows = issues.map((issue) => [
         issue.type,
         issue.message,
         issue.source || 'heuristic',
         (issue.snippet || '').replace(/"/g, '""'),
-        issue.helpUrl || ''
+        issue.helpUrl || '',
     ]);
     const csvContent = [headers, ...rows]
-        .map(row => row.map(cell => `"${cell}"`).join(','))
+        .map((row) => row.map((cell) => `"${cell}"`).join(','))
         .join('\n');
     return csvContent;
 }
@@ -129,7 +135,10 @@ async function generateExcelReport(result, filePath) {
     const workbook = new XLSX.Workbook();
     const summarySheet = workbook.addWorksheet('Summary');
     summarySheet.addRow(['OctaviaFlow Accessibility Report']);
-    summarySheet.addRow(['Generated:', new Date(result.meta?.timestamp || Date.now()).toLocaleString()]);
+    summarySheet.addRow([
+        'Generated:',
+        new Date(result.meta?.timestamp || Date.now()).toLocaleString(),
+    ]);
     summarySheet.addRow(['Source:', result.meta?.source || 'Unknown']);
     summarySheet.addRow([]);
     summarySheet.addRow(['Total Issues:', result.summary.totalIssues]);
@@ -141,13 +150,13 @@ async function generateExcelReport(result, filePath) {
     });
     const issuesSheet = workbook.addWorksheet('Issues');
     issuesSheet.addRow(['Type', 'Message', 'Source', 'Snippet', 'Help URL']);
-    result.issues.forEach(issue => {
+    result.issues.forEach((issue) => {
         issuesSheet.addRow([
             issue.type,
             issue.message,
             issue.source || 'heuristic',
             issue.snippet || '',
-            issue.helpUrl || ''
+            issue.helpUrl || '',
         ]);
     });
     summarySheet.getRow(1).font = { bold: true, size: 16 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octaviaflow/accessibility-checker",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "license": "Apache-2.0",
   "type": "module",
   "description": "Accessibility checker for OctaviaFlow Design System - A custom implementation",
@@ -34,8 +34,8 @@
     "build": "bun run clean && bun run build:cjs && bun run build:mjs && bun run build:types",
     "test": "vitest run",
     "test:watch": "vitest",
-    "lint": "eslint src/**/*.ts",
-    "lint:fix": "eslint src/**/*.ts --fix",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "format": "prettier --write src/**/*.{ts,js,json}",
     "format:check": "prettier --check src/**/*.{ts,js,json}",
     "ci-check": "bun run build && bun run test && bun run lint && echo \"✓ Done\"",
@@ -62,8 +62,8 @@
     "minimist": "^1.2.8",
     "puppeteer": "^24.29.1",
     "string-hash": "^1.1.3",
-    "chalk": "^5.3.0",
-    "ora": "^8.1.1"
+    "chalk": "4.1.2",
+    "ora": "5.4.1"
   },
   "devDependencies": {
     "@types/jsdom": "^27.0.0",
@@ -75,13 +75,13 @@
     "eslint": "^9.39.1",
     "eslint-config-octaviaflow": "^2.0.0",
     "jest": "^29.7.0",
-    "jest-config-octaviaflow": "^1.1.1",
+    "jest-config-octaviaflow": "^2.0.0",
     "prettier": "^3.6.2",
-    "prettier-config-octaviaflow": "^1.1.2",
+    "prettier-config-octaviaflow": "^2.0.0",
     "rimraf": "^6.0.1",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
-    "typescript-config-octaviaflow": "^1.1.1",
+    "typescript-config-octaviaflow": "^2.0.0",
     "vitest": "^2.1.8"
   },
   "bin": {