[Issue #40]: Setup pa11y-ci (#41)

## Summary
Fixes #40 

### Time to review: 5 min

## Changes proposed
- Add `pa11y-ci` to run PR checks
   - Tests for each of the pages we have so far

.github/workflows/ci-frontend-a11y.yml

@@ -0,0 +1,62 @@
+name: pa11y tests
+
+on:
+  pull_request:
+    paths:
+      - frontend/**
+      - .github/workflows/ci-frontend-a11y.yml
+
+jobs:
+  build:
+    name: Pa11y-ci tests
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./frontend
+
+    env:
+      NODE_VERSION: 20
+      LOCKFILE_PATH: ./frontend/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
+          echo "pa11y-ci tests finished."
+          
+      - name: Upload screenshots to artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: screenshots
+          path: ./frontend/screenshots-output

frontend/.gitignore

@@ -51,3 +51,7 @@ npm-debug.log*
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+# pa11y
+screenshots-output/*
+pa11y_output.txt

frontend/.pa11yci.json

@@ -0,0 +1,100 @@
+{
+  "defaults": {
+    "timeout": 240000,
+    "runners": ["axe"],
+    "ignore": ["color-contrast"],
+    "concurrency": 1,
+    "chromeLaunchConfig": {
+      "ignoreHTTPSErrors": true,
+      "args": ["--disable-dev-shm-usage", "--no-sandbox"]
+    }
+  },
+  "urls": [
+    {
+      "url": "http://localhost:3000",
+      "viewport": { "width": 320, "height": 480 },
+      "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"
+      ]
+    },
+    {
+      "url": "http://localhost:3000",
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/desktop-main-view-home.png"
+      ]
+    },
+    {
+      "url": "http://localhost:3000/search?status=forecasted,posted",
+      "viewport": { "width": 320, "height": 480 },
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/mobile-main-view-search.png",
+        "click element .usa-navbar button",
+        "screen capture screenshots-output/mobile-expand-menu-search.png"
+      ]
+    },
+    {
+      "url": "http://localhost:3000/search?status=forecasted,posted",
+      "viewport": { "width": 320, "height": 480 },
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/desktop-main-view-search.png"
+      ]
+    },
+    {
+      "url": "http://localhost:3000/process",
+      "viewport": { "width": 320, "height": 480 },
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/mobile-main-view-process.png",
+        "click element .usa-navbar button",
+        "screen capture screenshots-output/mobile-expand-menu-process.png"
+      ]
+    },
+    {
+      "url": "http://localhost:3000/process",
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/desktop-main-view-process.png"
+      ]
+    },
+    {
+      "url": "http://localhost:3000/research",
+      "viewport": { "width": 320, "height": 480 },
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/mobile-main-view-research.png",
+        "click element .usa-navbar button",
+        "screen capture screenshots-output/mobile-expand-menu-research.png"
+      ]
+    },
+    {
+      "url": "http://localhost:3000/research",
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/desktop-main-view-research.png"
+      ]
+    },
+    {
+      "url": "http://localhost:3000/newsletter",
+      "viewport": { "width": 320, "height": 480 },
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/mobile-main-view-newsletter.png",
+        "click element .usa-navbar button",
+        "screen capture screenshots-output/mobile-expand-menu-newsletter.png"
+      ]
+    },
+    {
+      "url": "http://localhost:3000/newsletter",
+      "actions": [
+        "wait for element #main-content to be visible",
+        "screen capture screenshots-output/desktop-main-view-newsletter.png"
+      ]
+    }
+  ]
+}

frontend/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}"