Dongle-frontend/.github/workflows/frontend_ci.yml at main · HubDApp/Dongle-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
name: Frontend CI

on:
  pull_request:
    branches:
      - main
    paths:
      - "dongle/**"
      - ".github/workflows/frontend_ci.yml"
  push:
    branches:
      - main
    paths:
      - "dongle/**"
      - ".github/workflows/frontend_ci.yml"

concurrency:
  group: frontend-ci-${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  quality-gate:
    name: Lint, Test, Type-check, and Build
    runs-on: ubuntu-latest

    defaults:
      run:
        working-directory: ./dongle

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

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20.19.0"
          cache: "npm"
          cache-dependency-path: "./dongle/package-lock.json"

      - name: Install Dependencies
        run: npm ci

      - name: Run ESLint
        run: npm run lint

      - name: Run Type Check
        run: npm run typecheck

      - name: Run Tests
        id: tests
        run: npm test

      - name: Run Accessibility (axe-core) Tests
        id: a11y_unit
        run: npm run test:a11y

      - name: Dependency Audit
        id: audit
        run: npm run audit

      - name: Build Project
        id: build
        run: npm run build
        env:
          CI: true

      - name: Install Chromium for pa11y-ci
        id: chromium_install
        if: steps.build.outcome == 'success'
        uses: browser-actions/setup-chrome@v1
        with:
          chrome-version: stable
          install-dependencies: true

      - name: Run pa11y-ci WCAG AA Audit
        id: pa11y
        if: steps.chromium_install.outcome == 'success'
        run: |
          export PA11Y_CHROMIUM_PATH="$(which google-chrome-stable || which chromium-browser || which chromium)"
          echo "Using Chrome/Chromium binary: ${PA11Y_CHROMIUM_PATH}"
          PA11Y_PORT=3001 node scripts/serve-static-for-pa11y.mjs > /tmp/pa11y-server.log 2>&1 &
          SERVER_PID=$!
          sleep 3
          npx pa11y-ci --config .pa11yci.js || true
          PA11Y_EXIT=$?
          kill ${SERVER_PID} 2>/dev/null || true
          exit ${PA11Y_EXIT}
        env:
          PA11Y_DEBUG: "1"
          PA11Y_PORT: "3001"

      - name: Generate Summary
        if: always()
        run: |
          echo "### Frontend CI Results" >> $GITHUB_STEP_SUMMARY
          echo "* **Lint:** ${{ job.status == 'success' && 'Passed' || 'Failed' }}" >> $GITHUB_STEP_SUMMARY
          echo "* **Type Check:** ${{ job.status == 'success' && 'Passed' || 'Failed' }}" >> $GITHUB_STEP_SUMMARY
          echo "* **Tests:** ${{ steps.tests.outcome == 'success' && 'Passed' || 'Failed' }}" >> $GITHUB_STEP_SUMMARY
          echo "* **a11y (axe-core):** ${{ steps.a11y_unit.outcome == 'success' && 'Passed' || 'Failed' }}" >> $GITHUB_STEP_SUMMARY
          echo "* **Audit:** ${{ steps.audit.outcome == 'success' && 'Passed' || 'Failed' }}" >> $GITHUB_STEP_SUMMARY
          echo "* **Build:** ${{ steps.build.outcome == 'success' && 'Passed' || 'Failed' }}" >> $GITHUB_STEP_SUMMARY
          echo "* **a11y (pa11y-ci):** ${{ steps.pa11y.outcome == 'success' && 'Passed' || (steps.pa11y.outcome == 'skipped' && 'Skipped' || 'Failed') }}" >> $GITHUB_STEP_SUMMARY
          echo "" >> $GITHUB_STEP_SUMMARY
          echo "#### Accessibility Checks Run" >> $GITHUB_STEP_SUMMARY
          echo "- **axe-core ruleset:** wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22aa + best-practice" >> $GITHUB_STEP_SUMMARY
          echo "- **Targets:** All UI primitives, main pages (Home/Discover/Reviews/Verify/Submit/Admin), forms" >> $GITHUB_STEP_SUMMARY
          echo "- **Keyboard:** Tab order, focus management, Escape handling, Skip links, landmarks" >> $GITHUB_STEP_SUMMARY
          echo "- **Color:** Automated WCAG AA contrast ratio assertion on all color pairs" >> $GITHUB_STEP_SUMMARY
          echo "- **Screen reader:** Live region announcements, aria-live, aria-invalid, heading order, img alt" >> $GITHUB_STEP_SUMMARY
          echo "- **pa11y-ci:** Full-page headless Chrome WCAG 2.1 AA scan on built site" >> $GITHUB_STEP_SUMMARY