initial commit

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

@@ -0,0 +1,70 @@
+name: pa11y tests
+
+on:
+  pull_request:
+    paths:
+      - frontend/**
+      - .github/workflows/ci-frontend-a11y.yml
+
+defaults:
+  run:
+    working-directory: ./frontend
+
+env:
+  NODE_VERSION: 18
+  LOCKFILE_PATH: ./frontend/package-lock.json
+  PACKAGE_MANAGER: npm
+
+jobs:
+  build:
+    name: Building site and running pa11y-ci tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout source
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        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: Start server
+        run: npm run start &
+
+      - name: Wait for server to be ready
+        run: npx wait-on http://localhost:3000
+
+      - name: Run pa11y-ci
+        run: npm run test:pa11y 2>&1 | tee pa11y_output.txt
+
+      - name: Read pa11y_output file
+        id: pa11y_output
+        uses: juliangruber/read-file-action@v1
+        with:
+          path: ./pa11y_output.txt
+
+      - name: Comment on pull request
+        uses: thollander/actions-comment-pull-request@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          message: |
+            <details><summary>Pa11y testing results</summary>
+            ```
+            ${{ steps.pa11y_output.outputs.content }}
+            ```
+            </details>
+
+      - name: Check for pa11y failures
+        if: contains(steps.pa11y_output.outputs.content, 'errno 2')
+        run: |
+          echo "::error::The site is failing accessibility tests. Please review the comment in the pull request or the pa11y-ci step in the workflow for details."
+          exit 1

frontend/.gitignore

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

frontend/.pa11yci.json

@@ -0,0 +1,30 @@
+{
+  "standard": "WCAG2AAA",
+  "level": "error",
+  "defaults": {
+    "timeout": 20000,
+    "wait": 2000,
+    "ignore": []
+  },
+  "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://pa11y.org",
+      "viewport": { "width": 1280, "height": 1024 },
+      "actions": [
+        "wait for element .site-brand to be visible",
+        "screen capture screenshots-output/desktop-main-view.png"
+      ]
+    }
+  ]
+}