@juspay/blend-design-system 0.0.37-beta.1 → 0.0.37-beta.3

package/lib/components/shared/accessibility/reportGenerator.ts

@@ -0,0 +1,522 @@
+/**
+ * Accessibility Report Generator
+ * Generates downloadable reports in various formats
+ */
+
+import type { AccessibilityReport } from '../../Button/accessibility/ButtonAccessibilityReport'
+
+export type ReportFormat = 'json' | 'markdown' | 'html' | 'pdf'
+
+type ReportGenerationOptions = {
+    format: ReportFormat
+    includeTestResults?: boolean
+    includeRecommendations?: boolean
+}
+
+/**
+ * Generate accessibility report in specified format
+ */
+export function generateAccessibilityReport(
+    report: AccessibilityReport,
+    options: ReportGenerationOptions = {
+        format: 'markdown',
+        includeTestResults: true,
+        includeRecommendations: true,
+    }
+): string {
+    switch (options.format) {
+        case 'json':
+            return generateJSONReport(report, options)
+        case 'markdown':
+            return generateMarkdownReport(report, options)
+        case 'html':
+            return generateHTMLReport(report, options)
+        default:
+            return generateMarkdownReport(report, options)
+    }
+}
+
+/**
+ * Generate JSON report
+ */
+function generateJSONReport(
+    report: AccessibilityReport,
+    options: ReportGenerationOptions
+): string {
+    const { ...reportWithoutRecommendations } = report
+    const reportData = {
+        ...(options.includeRecommendations
+            ? report
+            : reportWithoutRecommendations),
+        criteria: options.includeTestResults
+            ? report.criteria
+            : report.criteria.map(({ ...rest }) => rest),
+    }
+
+    return JSON.stringify(reportData, null, 2)
+}
+
+/**
+ * Generate Markdown report
+ */
+function generateMarkdownReport(
+    report: AccessibilityReport,
+    options: ReportGenerationOptions
+): string {
+    const statusEmoji = {
+        compliant: '✅',
+        'non-compliant': '❌',
+        unsure: '⚠️',
+        'not-applicable': '➖',
+    }
+
+    const levelBadge = {
+        A: '[Level A]',
+        AA: '[Level AA]',
+        AAA: '[Level AAA]',
+    }
+
+    let markdown = `# ${report.componentName} Component Accessibility Report\n\n`
+    markdown += `**WCAG Version:** ${report.wcagVersion}  \n`
+    markdown += `**Report Date:** ${report.reportDate}  \n`
+    markdown += `**Conformance Level:** ${report.conformanceLevel}  \n`
+    markdown += `**Overall Status:** ${report.overallStatus.toUpperCase()}  \n\n`
+
+    markdown += `## WCAG Guidelines Coverage\n\n`
+    markdown += `This report evaluates criteria from WCAG 2.0, 2.1, and 2.2:\n\n`
+    markdown += `### WCAG 2.0 (2008)\n`
+    report.wcagVersions['2.0'].forEach((item) => {
+        markdown += `- ${item}\n`
+    })
+    markdown += `\n### WCAG 2.1 (2018)\n`
+    report.wcagVersions['2.1'].forEach((item) => {
+        markdown += `- ${item}\n`
+    })
+    markdown += `\n### WCAG 2.2 (2023)\n`
+    report.wcagVersions['2.2'].forEach((item) => {
+        markdown += `- ${item}\n`
+    })
+    markdown += `\n`
+
+    markdown += `## Executive Summary\n\n`
+    markdown += `${report.summary}\n\n`
+
+    markdown += `## WCAG Success Criteria\n\n`
+
+    const criteriaByLevel = {
+        A: report.criteria.filter((c) => c.level === 'A'),
+        AA: report.criteria.filter((c) => c.level === 'AA'),
+        AAA: report.criteria.filter((c) => c.level === 'AAA'),
+    }
+
+    for (const [level, criteria] of Object.entries(criteriaByLevel)) {
+        if (criteria.length === 0) continue
+
+        markdown += `### Level ${level} Criteria\n\n`
+
+        for (const criterion of criteria) {
+            markdown += `### ${statusEmoji[criterion.status]} ${criterion.id} ${criterion.title} ${levelBadge[criterion.level]}\n\n`
+            markdown += `**Status:** ${criterion.status.toUpperCase()}  \n\n`
+            markdown += `**Description:**\n${criterion.description}\n\n`
+            markdown += `**Implementation:**\n${criterion.implementation}\n\n`
+
+            if (options.includeTestResults && criterion.testResults) {
+                markdown += `**Test Results:**\n${criterion.testResults}\n\n`
+            }
+
+            if (criterion.notes) {
+                markdown += `**Notes:**\n${criterion.notes}\n\n`
+            }
+
+            markdown += `---\n\n`
+        }
+    }
+
+    if (options.includeRecommendations && report.recommendations.length > 0) {
+        markdown += `## Recommendations\n\n`
+        for (const rec of report.recommendations) {
+            markdown += `- ${rec}\n`
+        }
+        markdown += `\n`
+    }
+
+    markdown += `## Strengths\n\n`
+    for (const strength of report.strengths) {
+        markdown += `- ${strength}\n`
+    }
+    markdown += `\n`
+
+    markdown += `## Test Methodology\n\n`
+    markdown += `### Automated Testing\n\n`
+    for (const test of report.testMethodology.automated) {
+        markdown += `- ${test}\n`
+    }
+    markdown += `\n### Manual Testing\n\n`
+    for (const test of report.testMethodology.manual) {
+        markdown += `- ${test}\n`
+    }
+    markdown += `\n`
+
+    const compliantCount = report.criteria.filter(
+        (c) => c.status === 'compliant'
+    ).length
+    const totalCount = report.criteria.filter(
+        (c) => c.status !== 'not-applicable'
+    ).length
+    const unsureCount = report.criteria.filter(
+        (c) => c.status === 'unsure'
+    ).length
+
+    markdown += `## Summary Statistics\n\n`
+    markdown += `- **Total Criteria:** ${report.criteria.length}\n`
+    markdown += `- **Compliant:** ${compliantCount}\n`
+    markdown += `- **Non-Compliant:** ${report.criteria.filter((c) => c.status === 'non-compliant').length}\n`
+    markdown += `- **Unsure:** ${unsureCount}\n`
+    markdown += `- **Not Applicable:** ${report.criteria.filter((c) => c.status === 'not-applicable').length}\n`
+    markdown += `- **Compliance Rate:** ${totalCount > 0 ? Math.round((compliantCount / totalCount) * 100) : 0}%\n\n`
+
+    if (unsureCount > 0) {
+        markdown += `⚠️ **Note:** ${unsureCount} criterion/criteria marked as "unsure" require manual verification in application context.\n\n`
+    }
+
+    markdown += `---\n\n`
+    markdown += `*Report generated on ${new Date().toLocaleString()}*\n`
+
+    return markdown
+}
+
+/**
+ * Generate HTML report
+ */
+function generateHTMLReport(
+    report: AccessibilityReport,
+    options: ReportGenerationOptions
+): string {
+    const statusColors: Record<
+        AccessibilityReport['overallStatus'] | 'not-applicable',
+        string
+    > = {
+        compliant: '#10b981',
+        'non-compliant': '#ef4444',
+        unsure: '#f59e0b',
+        partial: '#3b82f6',
+        'not-applicable': '#6b7280',
+    }
+
+    const statusEmoji = {
+        compliant: '✅',
+        'non-compliant': '❌',
+        unsure: '⚠️',
+        'not-applicable': '➖',
+    }
+
+    let html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${report.componentName} Accessibility Report</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.6;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            color: #333;
+        }
+        h1 { color: #1f2937; border-bottom: 3px solid #3b82f6; padding-bottom: 10px; }
+        h2 { color: #374151; margin-top: 40px; border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; }
+        h3 { color: #4b5563; margin-top: 30px; }
+        h4 { color: #6b7280; margin-top: 20px; }
+        .status-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-weight: 600;
+            font-size: 0.875rem;
+            margin-left: 8px;
+        }
+        .criterion {
+            border-left: 4px solid #e5e7eb;
+            padding-left: 16px;
+            margin: 20px 0;
+        }
+        .criterion.compliant { border-left-color: ${statusColors.compliant}; }
+        .criterion.non-compliant { border-left-color: ${statusColors['non-compliant']}; }
+        .criterion.unsure { border-left-color: ${statusColors.unsure}; }
+        .criterion.not-applicable { border-left-color: ${statusColors['not-applicable']}; }
+        .summary-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 16px;
+            margin: 20px 0;
+        }
+        .stat-card {
+            background: #f9fafb;
+            padding: 16px;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+        }
+        .stat-value {
+            font-size: 2rem;
+            font-weight: bold;
+            color: #1f2937;
+        }
+        .stat-label {
+            color: #6b7280;
+            font-size: 0.875rem;
+        }
+        code {
+            background: #f3f4f6;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.875rem;
+        }
+        ul { padding-left: 24px; }
+        .warning-box {
+            background: #fef3c7;
+            border: 1px solid #fbbf24;
+            border-radius: 8px;
+            padding: 16px;
+            margin: 20px 0;
+        }
+        .wcag-versions {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 16px;
+            margin: 20px 0;
+        }
+        .version-card {
+            background: #f9fafb;
+            padding: 16px;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+        }
+        .version-card.wcag20 { border-left: 4px solid #3b82f6; }
+        .version-card.wcag21 { border-left: 4px solid #10b981; }
+        .version-card.wcag22 { border-left: 4px solid #8b5cf6; }
+    </style>
+</head>
+<body>
+    <h1>${report.componentName} Component Accessibility Report</h1>
+    
+    <div style="margin: 20px 0;">
+        <strong>WCAG Version:</strong> ${report.wcagVersion}<br>
+        <strong>Report Date:</strong> ${report.reportDate}<br>
+        <strong>Conformance Level:</strong> ${report.conformanceLevel}<br>
+        <strong>Overall Status:</strong> 
+        <span class="status-badge" style="background: ${statusColors[report.overallStatus]}; color: white;">
+            ${report.overallStatus.toUpperCase()}
+        </span>
+    </div>
+
+    <h2>WCAG Guidelines Coverage</h2>
+    <p>This report evaluates criteria from WCAG 2.0, 2.1, and 2.2:</p>
+    <div class="wcag-versions">
+        <div class="version-card wcag20">
+            <h3>WCAG 2.0 (2008)</h3>
+            <p><strong>Foundation guidelines</strong></p>
+            <ul>
+                ${report.wcagVersions['2.0'].map((item) => `<li>${item}</li>`).join('')}
+            </ul>
+        </div>
+        <div class="version-card wcag21">
+            <h3>WCAG 2.1 (2018)</h3>
+            <p><strong>Current standard</strong></p>
+            <ul>
+                ${report.wcagVersions['2.1'].map((item) => `<li>${item}</li>`).join('')}
+            </ul>
+        </div>
+        <div class="version-card wcag22">
+            <h3>WCAG 2.2 (2023)</h3>
+            <p><strong>Latest updates</strong></p>
+            <ul>
+                ${report.wcagVersions['2.2'].map((item) => `<li>${item}</li>`).join('')}
+            </ul>
+        </div>
+    </div>
+
+    <h2>Executive Summary</h2>
+    <p>${report.summary}</p>
+
+    <h2>Summary Statistics</h2>
+    <div class="summary-stats">
+        <div class="stat-card">
+            <div class="stat-value">${report.criteria.length}</div>
+            <div class="stat-label">Total Criteria</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value" style="color: ${statusColors.compliant}">
+                ${report.criteria.filter((c) => c.status === 'compliant').length}
+            </div>
+            <div class="stat-label">Compliant</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value" style="color: ${statusColors['non-compliant']}">
+                ${report.criteria.filter((c) => c.status === 'non-compliant').length}
+            </div>
+            <div class="stat-label">Non-Compliant</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value" style="color: ${statusColors.unsure}">
+                ${report.criteria.filter((c) => c.status === 'unsure').length}
+            </div>
+            <div class="stat-label">Unsure</div>
+        </div>
+    </div>
+
+    <h2>WCAG Success Criteria</h2>`
+
+    const criteriaByLevel = {
+        A: report.criteria.filter((c) => c.level === 'A'),
+        AA: report.criteria.filter((c) => c.level === 'AA'),
+        AAA: report.criteria.filter((c) => c.level === 'AAA'),
+    }
+
+    for (const [level, criteria] of Object.entries(criteriaByLevel)) {
+        if (criteria.length === 0) continue
+
+        html += `\n    <h3>Level ${level} Criteria</h3>\n`
+
+        for (const criterion of criteria) {
+            html += `
+    <div class="criterion ${criterion.status}">
+        <h4>${statusEmoji[criterion.status]} ${criterion.id} ${criterion.title} [Level ${criterion.level}]</h4>
+        <p><strong>Status:</strong> <span class="status-badge" style="background: ${statusColors[criterion.status]}; color: white;">${criterion.status.toUpperCase()}</span></p>
+        <p><strong>Description:</strong> ${criterion.description}</p>
+        <p><strong>Implementation:</strong> ${criterion.implementation}</p>
+        ${options.includeTestResults && criterion.testResults ? `<p><strong>Test Results:</strong> ${criterion.testResults}</p>` : ''}
+        ${criterion.notes ? `<p><strong>Notes:</strong> ${criterion.notes}</p>` : ''}
+    </div>`
+        }
+    }
+
+    if (options.includeRecommendations && report.recommendations.length > 0) {
+        html += `\n    <h2>Recommendations</h2>\n    <ul>\n`
+        for (const rec of report.recommendations) {
+            html += `        <li>${rec}</li>\n`
+        }
+        html += `    </ul>\n`
+    }
+
+    html += `
+    <h2>Strengths</h2>
+    <ul>
+        ${report.strengths.map((s) => `        <li>${s}</li>`).join('\n')}
+    </ul>
+
+    <h2>Test Methodology</h2>
+    <h3>Automated Testing</h3>
+    <ul>
+        ${report.testMethodology.automated.map((t) => `        <li>${t}</li>`).join('\n')}
+    </ul>
+    <h3>Manual Testing</h3>
+    <ul>
+        ${report.testMethodology.manual.map((t) => `        <li>${t}</li>`).join('\n')}
+    </ul>
+    <h3>Verification Tools</h3>
+    <ul>
+        ${report.testMethodology.verificationTools.map((t) => `        <li>${t}</li>`).join('\n')}
+    </ul>
+    <h3>WCAG Levels Evaluated</h3>
+    <p><strong>Level A Criteria:</strong> ${report.testMethodology.wcagLevels.A.join(', ')}</p>
+    <p><strong>Level AA Criteria:</strong> ${report.testMethodology.wcagLevels.AA.join(', ')}</p>
+    <p><strong>Level AAA Criteria:</strong> ${report.testMethodology.wcagLevels.AAA.join(', ')}</p>
+
+    ${
+        report.criteria.filter((c) => c.status === 'unsure').length > 0
+            ? `
+    <div class="warning-box">
+        <strong>⚠️ Note:</strong> ${report.criteria.filter((c) => c.status === 'unsure').length} criterion/criteria marked as "unsure" require manual verification in application context.
+    </div>
+    `
+            : ''
+    }
+
+    <hr>
+    <p style="color: #6b7280; font-size: 0.875rem;">
+        Report generated on ${new Date().toLocaleString()}
+    </p>
+</body>
+</html>`
+
+    return html
+}
+
+/**
+ * Download report as file
+ */
+export function downloadReport(
+    content: string,
+    filename: string,
+    mimeType: string
+): void {
+    try {
+        // Create blob with proper encoding
+        const blob = new Blob([content], {
+            type: mimeType + ';charset=utf-8',
+        })
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = filename
+        link.style.display = 'none'
+        document.body.appendChild(link)
+        link.click()
+
+        // Cleanup
+        setTimeout(() => {
+            document.body.removeChild(link)
+            URL.revokeObjectURL(url)
+        }, 100)
+    } catch (error) {
+        console.error('Download error:', error)
+        // Fallback: open in new window for HTML
+        if (mimeType === 'text/html') {
+            const newWindow = window.open()
+            if (newWindow) {
+                newWindow.document.write(content)
+                newWindow.document.close()
+            }
+        } else {
+            throw error
+        }
+    }
+}
+
+/**
+ * Get MIME type for report format
+ */
+export function getMimeType(format: ReportFormat): string {
+    switch (format) {
+        case 'json':
+            return 'application/json'
+        case 'markdown':
+            return 'text/markdown'
+        case 'html':
+            return 'text/html'
+        case 'pdf':
+            return 'application/pdf'
+        default:
+            return 'text/plain'
+    }
+}
+
+/**
+ * Get file extension for report format
+ */
+export function getFileExtension(format: ReportFormat): string {
+    switch (format) {
+        case 'json':
+            return 'json'
+        case 'markdown':
+            return 'md'
+        case 'html':
+            return 'html'
+        case 'pdf':
+            return 'pdf'
+        default:
+            return 'txt'
+    }
+}

package/lib/components/shared/accessibility/storybookParser.ts

@@ -0,0 +1,93 @@
+/**
+ * Storybook Parser
+ * Parses Storybook files to extract accessibility information
+ */
+
+export interface StorybookAccessibilityInfo {
+    totalStories: number
+    accessibilityStories: string[]
+    a11yConfig: {
+        rules: string[]
+        enabled: boolean
+    }
+    wcagVersion?: string
+    accessibilityNotes?: string
+}
+
+/**
+ * Parse Storybook file to extract accessibility information
+ */
+export function parseStorybookFile(
+    storybookFileContent: string
+): StorybookAccessibilityInfo {
+    const accessibilityStories: string[] = []
+    const rules: string[] = []
+
+    // Extract story names
+    const storyMatches = storybookFileContent.matchAll(
+        /export const (\w+): Story =/g
+    )
+    for (const match of storyMatches) {
+        if (match[1]) {
+            accessibilityStories.push(match[1])
+        }
+    }
+
+    // Extract a11y rules
+    const ruleMatches = storybookFileContent.matchAll(/id: ['"]([^'"]+)['"]/g)
+    for (const match of ruleMatches) {
+        if (match[1] && !rules.includes(match[1])) {
+            rules.push(match[1])
+        }
+    }
+
+    // Extract WCAG version mentions
+    const wcagVersionMatch = storybookFileContent.match(/WCAG\s+(\d+\.\d+)/i)
+    const wcagVersion = wcagVersionMatch ? wcagVersionMatch[1] : undefined
+
+    // Extract accessibility notes
+    const accessibilityNotesMatch = storybookFileContent.match(
+        /## Accessibility[\s\S]*?```[\s\S]*?```/i
+    )
+    const accessibilityNotes = accessibilityNotesMatch
+        ? accessibilityNotesMatch[0]
+        : undefined
+
+    return {
+        totalStories: accessibilityStories.length,
+        accessibilityStories,
+        a11yConfig: {
+            rules,
+            enabled: rules.length > 0,
+        },
+        wcagVersion,
+        accessibilityNotes,
+    }
+}
+
+/**
+ * Get Storybook accessibility summary
+ */
+export function getStorybookSummary(
+    storybookInfo: StorybookAccessibilityInfo
+): {
+    summary: string
+    details: string[]
+} {
+    const details: string[] = []
+
+    details.push(`Total Stories: ${storybookInfo.totalStories}`)
+    if (storybookInfo.wcagVersion) {
+        details.push(`WCAG Version: ${storybookInfo.wcagVersion}`)
+    }
+    if (storybookInfo.a11yConfig.rules.length > 0) {
+        details.push(
+            `A11y Rules: ${storybookInfo.a11yConfig.rules.length} (${storybookInfo.a11yConfig.rules.join(', ')})`
+        )
+    }
+
+    return {
+        summary: `${storybookInfo.totalStories} stories with accessibility testing configured`,
+        details,
+    }
+}

package/lib/components/shared/accessibility/testResultsParser.ts

@@ -0,0 +1,75 @@
+/**
+ * Test Results Parser
+ * Parses accessibility test files to extract test coverage information
+ */
+
+export interface TestCoverageInfo {
+    totalTests: number
+    testCategories: string[]
+    testDescriptions: string[]
+    wcagCriteriaTested: string[]
+}
+
+/**
+ * Parse test file to extract coverage information
+ * This is a simplified parser - in a real implementation, you might use AST parsing
+ */
+export function parseTestFile(testFileContent: string): TestCoverageInfo {
+    const testCategories: string[] = []
+    const testDescriptions: string[] = []
+    const wcagCriteriaTested: string[] = []
+
+    // Extract describe blocks (test categories)
+    const describeMatches = testFileContent.matchAll(
+        /describe\(['"]([^'"]+)['"]/g
+    )
+    for (const match of describeMatches) {
+        if (match[1] && !match[1].includes('Button Accessibility')) {
+            testCategories.push(match[1])
+        }
+    }
+
+    // Extract it blocks (test descriptions)
+    const itMatches = testFileContent.matchAll(/it\(['"]([^'"]+)['"]/g)
+    for (const match of itMatches) {
+        if (match[1]) {
+            testDescriptions.push(match[1])
+        }
+    }
+
+    // Extract WCAG criteria mentions
+    const wcagMatches = testFileContent.matchAll(/(\d+\.\d+\.\d+)/g)
+    for (const match of wcagMatches) {
+        if (match[1] && !wcagCriteriaTested.includes(match[1])) {
+            wcagCriteriaTested.push(match[1])
+        }
+    }
+
+    return {
+        totalTests: testDescriptions.length,
+        testCategories,
+        testDescriptions,
+        wcagCriteriaTested,
+    }
+}
+
+/**
+ * Get test coverage summary for display
+ */
+export function getTestCoverageSummary(testInfo: TestCoverageInfo): {
+    summary: string
+    details: string[]
+} {
+    const details: string[] = []
+
+    details.push(`Total Tests: ${testInfo.totalTests}`)
+    details.push(`Test Categories: ${testInfo.testCategories.length}`)
+    details.push(
+        `WCAG Criteria Tested: ${testInfo.wcagCriteriaTested.length} (${testInfo.wcagCriteriaTested.join(', ')})`
+    )
+
+    return {
+        summary: `${testInfo.totalTests} automated tests covering ${testInfo.testCategories.length} categories`,
+        details,
+    }
+}