accessibility-testing.yml

name: Accessibility Testing

on:
  pull_request:
    branches: [main, develop]
    paths:
      - 'apps/frontend/**'
      - 'packages/app/**'
      - '.github/workflows/accessibility-testing.yml'
  push:
    branches: [main]

jobs:
  accessibility-tests:
    name: Accessibility (a11y) Tests
    runs-on: ubuntu-latest
    timeout-minutes: 30

    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium
        working-directory: apps/frontend

      - name: Build frontend
        run: npm run build --workspace=apps/frontend
        env:
          NODE_ENV: production

      - name: Run accessibility tests
        id: a11y-tests
        run: |
          npx playwright test --grep @a11y --reporter=html,json,github
        working-directory: apps/frontend
        continue-on-error: true

      - name: Parse test results
        if: always()
        id: parse-results
        run: |
          if [ -f "apps/frontend/test-results.json" ]; then
            node -e "
              const fs = require('fs');
              const results = JSON.parse(fs.readFileSync('apps/frontend/test-results.json', 'utf8'));
              const stats = results.stats || {};
              
              console.log('TOTAL_TESTS=' + (stats.expected || 0));
              console.log('PASSED_TESTS=' + (stats.passed || 0));
              console.log('FAILED_TESTS=' + (stats.failed || 0));
              console.log('SKIPPED_TESTS=' + (stats.skipped || 0));
              
              // Check for critical violations
              const hasCriticalViolations = stats.failed > 0;
              console.log('HAS_CRITICAL=' + hasCriticalViolations);
            " >> $GITHUB_OUTPUT
          fi

      - name: Generate accessibility report
        if: always()
        run: |
          echo "# Accessibility Test Report" > a11y-report.md
          echo "" >> a11y-report.md
          echo "## Summary" >> a11y-report.md
          echo "" >> a11y-report.md
          
          if [ -f "apps/frontend/test-results.json" ]; then
            node -e "
              const fs = require('fs');
              try {
                const results = JSON.parse(fs.readFileSync('apps/frontend/test-results.json', 'utf8'));
                const stats = results.stats || {};
                
                console.log('- **Total Tests**: ' + (stats.expected || 0));
                console.log('- **✅ Passed**: ' + (stats.passed || 0));
                console.log('- **❌ Failed**: ' + (stats.failed || 0));
                console.log('- **⏭️ Skipped**: ' + (stats.skipped || 0));
                console.log('');
                
                if (stats.failed > 0) {
                  console.log('## ⚠️ Critical Accessibility Violations Detected');
                  console.log('');
                  console.log('Accessibility violations were found that must be fixed before merging.');
                  console.log('');
                  console.log('### Next Steps');
                  console.log('');
                  console.log('1. Download the **accessibility-test-results** artifact');
                  console.log('2. Open **playwright-report/index.html**');
                  console.log('3. Review each violation in detail');
                  console.log('4. Fix the issues following our [Common Issues Guide](../../packages/app/e2e/a11y/COMMON_ISSUES.md)');
                  console.log('5. Re-run tests to verify fixes');
                } else {
                  console.log('## ✅ All Accessibility Tests Passed');
                  console.log('');
                  console.log('No critical accessibility violations detected!');
                }
              } catch (err) {
                console.log('Unable to parse test results');
              }
            " >> a11y-report.md
          else
            echo "⚠️ Test results file not found" >> a11y-report.md
          fi

      - name: Upload test results
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: accessibility-test-results-${{ github.run_number }}
          path: |
            apps/frontend/test-results/
            apps/frontend/playwright-report/
            apps/frontend/test-results.json
            a11y-report.md
          retention-days: 30

      - name: Upload accessibility violations
        uses: actions/upload-artifact@v4
        if: failure() || steps.a11y-tests.outcome == 'failure'
        with:
          name: accessibility-violations-${{ github.run_number }}
          path: |
            apps/frontend/test-results/
            apps/frontend/playwright-report/
          retention-days: 7

      - name: Comment PR with results
        if: always() && github.event_name == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            
            let body = '## ♿ Accessibility Test Results\n\n';
            
            // Read test results
            const resultsPath = 'apps/frontend/test-results.json';
            if (fs.existsSync(resultsPath)) {
              try {
                const results = JSON.parse(fs.readFileSync(resultsPath, 'utf8'));
                const stats = results.stats || {};
                
                body += '### Test Summary\n\n';
                body += `- ✅ **Passed**: ${stats.passed || 0}\n`;
                body += `- ❌ **Failed**: ${stats.failed || 0}\n`;
                body += `- ⏭️ **Skipped**: ${stats.skipped || 0}\n`;
                body += `- 📊 **Total**: ${stats.expected || 0}\n\n`;
                
                if (stats.failed > 0) {
                  body += '### ⚠️ Action Required: Accessibility Violations Found\n\n';
                  body += 'Critical accessibility violations were detected. These must be fixed before merging.\n\n';
                  body += '#### How to Fix\n\n';
                  body += '1. **Download Artifacts**: Get `accessibility-violations-' + context.runId + '` from the workflow run\n';
                  body += '2. **Review Report**: Open `playwright-report/index.html` in a browser\n';
                  body += '3. **Fix Issues**: Follow our [Common Issues Guide](https://github.com/' + context.repo.owner + '/' + context.repo.repo + '/blob/main/packages/app/e2e/a11y/COMMON_ISSUES.md)\n';
                  body += '4. **Re-test**: Run tests locally:\n';
                  body += '   ```bash\n';
                  body += '   cd apps/frontend\n';
                  body += '   npx playwright test --grep @a11y\n';
                  body += '   ```\n';
                  body += '5. **Push Fixes**: Commit and push your fixes\n\n';
                  body += `[📥 Download Violation Details](${context.payload.repository.html_url}/actions/runs/${context.runId})\n\n`;
                  body += '#### Common Violations\n\n';
                  body += '- **Color Contrast**: Text must have sufficient contrast with background\n';
                  body += '- **Form Labels**: All inputs must have associated labels\n';
                  body += '- **Button Names**: Buttons must have accessible names\n';
                  body += '- **Alt Text**: Images must have alternative text\n';
                  body += '- **Keyboard Access**: All interactive elements must be keyboard accessible\n\n';
                } else {
                  body += '### ✅ All Tests Passed!\n\n';
                  body += 'No accessibility violations detected. Great job maintaining an accessible application! 🎉\n\n';
                }
                
                body += '---\n\n';
                body += '📚 **Resources**:\n';
                body += '- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)\n';
                body += '- [Common Issues & Fixes](https://github.com/' + context.repo.owner + '/' + context.repo.repo + '/blob/main/packages/app/e2e/a11y/COMMON_ISSUES.md)\n';
                body += '- [Testing Guide](https://github.com/' + context.repo.owner + '/' + context.repo.repo + '/blob/main/packages/app/e2e/a11y/README.md)\n';
                
              } catch (err) {
                body += '⚠️ Unable to parse test results. Check the workflow logs for details.\n';
                body += '\nError: ' + err.message;
              }
            } else {
              body += '⚠️ Test results file not found. The tests may not have run successfully.\n';
            }
            
            // Post or update comment
            const { data: comments } = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
            });
            
            const botComment = comments.find(comment => 
              comment.user.type === 'Bot' && 
              comment.body.includes('♿ Accessibility Test Results')
            );
            
            if (botComment) {
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: botComment.id,
                body: body
              });
            } else {
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                body: body
              });
            }

      - name: Fail if critical violations found
        if: steps.a11y-tests.outcome == 'failure'
        run: |
          echo "❌ Critical accessibility violations found!"
          echo "Review the test report for details."
          exit 1

  accessibility-audit:
    name: Lighthouse Accessibility Audit
    runs-on: ubuntu-latest
    timeout-minutes: 15

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build frontend
        run: npm run build --workspace=apps/frontend

      - name: Start server
        run: |
          cd apps/frontend
          npm start &
          npx wait-on http://localhost:3000 -t 60000

      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            http://localhost:3000
            http://localhost:3000/courses
            http://localhost:3000/dashboard
          configPath: './apps/frontend/lighthouserc.js'
          uploadArtifacts: true
          temporaryPublicStorage: true

      - name: Check Lighthouse scores
        run: |
          echo "✅ Lighthouse accessibility audit complete"
          echo "Review the uploaded artifacts for detailed scores"