[Issue #347]: Add pa11y-ci checks

.github/workflows/ci-a11y.yml

@@ -0,0 +1,63 @@
+name: Accessibility tests
+
+on:
+  pull_request:
+    paths:
+      - app/**
+      - .github/workflows/ci-a11y.yml
+
+jobs:
+  build:
+    name: Pa11y-ci tests
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./app
+
+    env:
+      NODE_VERSION: 20
+      LOCKFILE_PATH: ./app/package-lock.json
+      PACKAGE_MANAGER: npm
+
+    steps:
+      - name: Checkout source
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache-dependency-path: ${{ env.LOCKFILE_PATH }}
+          cache: ${{ env.PACKAGE_MANAGER }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create screenshots directory
+        run: mkdir -p screenshots-output
+
+      - name: Build project
+        run: npm run build
+
+      - name: Start server and log output
+        run: npm run start &
+
+      - name: Wait for frontend to be ready
+        run: |
+          # Ensure the server wait script is executable
+          chmod +x ./bin/wait-for-frontend.sh
+          ./bin/wait-for-frontend.sh
+
+      - name: Run pa11y-ci
+        run: |
+          set -e # Ensure the script fails if any command fails
+          npm run test:pa11y-desktop
+          npm run test:pa11y-mobile
+          echo "pa11y-ci tests finished."
+
+      - name: Upload screenshots to artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: screenshots
+          path: ./app/screenshots-output

app/.pa11yci-desktop.json

@@ -0,0 +1,16 @@
+{
+  "defaults": {
+    "timeout": 240000,
+    "runners": ["axe"],
+    "ignore": ["color-contrast"],
+    "concurrency": 1,
+    "chromeLaunchConfig": {
+      "ignoreHTTPSErrors": true,
+      "args": ["--disable-dev-shm-usage", "--no-sandbox"]
+    },
+    "actions": [
+      "wait for element #main-content to be visible",
+      "screen capture screenshots-output/desktop-main-view.png"
+    ]
+  }
+}

app/.pa11yci-mobile.json

@@ -0,0 +1,23 @@
+{
+  "defaults": {
+    "timeout": 240000,
+    "runners": ["axe"],
+    "ignore": ["color-contrast"],
+    "concurrency": 1,
+    "chromeLaunchConfig": {
+      "ignoreHTTPSErrors": true,
+      "args": ["--disable-dev-shm-usage", "--no-sandbox"]
+    },
+    "viewport": {
+      "width": 390,
+      "height": 844,
+      "mobile": true
+    },
+    "actions": [
+      "wait for element #main-content to be visible",
+      "screen capture screenshots-output/mobile-main-view.png",
+      "click element .usa-navbar button",
+      "screen capture screenshots-output/mobile-expand-menu.png"
+    ]
+  }
+}

app/bin/wait-for-frontend.sh

@@ -0,0 +1,31 @@
+# wait-for-frontend.sh
+
+#!/bin/bash
+set -e
+
+# Color formatting for readability
+GREEN='\033[0;32m'
+RED='\033[0;31m'
+NO_COLOR='\033[0m'
+
+MAX_WAIT_TIME=800 # seconds, adjust as necessary
+WAIT_TIME=0
+
+
+echo "Waiting for server to become ready..."
+
+# Use curl to check the server health endpoint
+until curl --output /dev/null --silent --head --fail http://localhost:3000;
+do
+  printf '.'
+  sleep 5
+
+  WAIT_TIME=$(($WAIT_TIME + 5))
+  if [ $WAIT_TIME -gt $MAX_WAIT_TIME ]
+  then
+    echo -e "${RED}ERROR: Server did not become ready within ${MAX_WAIT_TIME} seconds.${NO_COLOR}"
+    exit 1
+  fi
+done
+
+echo -e "${GREEN}Server is ready after ~${WAIT_TIME} seconds.${NO_COLOR}"