feat: implement comprehensive accessibility testing with axe-core (#692)

.github/workflows/accessibility-testing.yml

@@ -1,55 +1,276 @@
 name: Accessibility Testing
 
 on:
-  push:
-    branches: [main, develop]
   pull_request:
     branches: [main, develop]
+    paths:
+      - 'apps/frontend/**'
+      - 'packages/app/**'
+      - '.github/workflows/accessibility-testing.yml'
+  push:
+    branches: [main]
 
 jobs:
-  accessibility:
+  accessibility-tests:
+    name: Accessibility (a11y) Tests
     runs-on: ubuntu-latest
+    timeout-minutes: 30
 
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm ci
+        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
-        run: npm run test:a11y --workspace=apps/frontend
+        id: a11y-tests
+        run: |
+          npx playwright test --grep @a11y --reporter=html,json,github
+        working-directory: apps/frontend
+        continue-on-error: true
 
-      - name: Run WCAG compliance tests
-        run: npm run test:wcag --workspace=apps/frontend
+      - 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 accessibility report
+      - 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-report
-          path: apps/frontend/coverage/a11y/
+          name: accessibility-violations-${{ github.run_number }}
+          path: |
+            apps/frontend/test-results/
+            apps/frontend/playwright-report/
+          retention-days: 7
 
       - name: Comment PR with results
-        if: github.event_name == 'pull_request'
+        if: always() && github.event_name == 'pull_request'
         uses: actions/github-script@v7
         with:
           script: |
             const fs = require('fs');
-            const report = fs.readFileSync('apps/frontend/coverage/a11y/report.json', 'utf8');
-            const violations = JSON.parse(report).violations.length;
 
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
+            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,
-              body: `## Accessibility Test Results\n\n**Violations Found:** ${violations}\n\n[View Full Report](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})`
+              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"