[Issue #677]: Add accessibility checks against pr preview env

.github/workflows/accessibility-scans.yml

@@ -0,0 +1,99 @@
+name: Accessibility Scans
+
+on:
+ workflow_call:
+ inputs:
+ service_endpoint:
+ required: true
+ type: string
+
+jobs:
+ accessibility-desktop-scans:
+ name: Run Desktop Accessibility Scans
+ runs-on: ubuntu-latest
+
+ env:
+ SERVICE_ENDPOINT: ${{ inputs.service_endpoint }}
+
+ steps:
+ - name: Checkout source
+ uses: actions/checkout@v4
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20'
+ cache-dependency-path: ./accessibility/package-lock.json
+ cache: npm
+
+ - name: Install dependencies
+ run: npm ci
+ working-directory: ./accessibility
+
+ - name: Create screenshots directory
+ run: mkdir -p ./accessibility/screenshots-output
+
+ - name: Update pa11y-ci config for desktop
+ run: node ./accessibility/update-config.js .pa11yci-desktop.js ${{ inputs.service_endpoint }}
+
+ - name: Cat updated pa11y-ci config for desktop
+ run: cat ./accessibility/.pa11yci-desktop.js
+
+ - name: Run pa11y-ci Desktop
+ run: |
+ set -e # Ensure the script fails if any command fails
+ npm run test:pa11y-desktop
+ echo "pa11y-ci desktop tests finished."
+ working-directory: ./accessibility
+
+ - name: Upload screenshots to artifacts
+ if: always()
+ uses: actions/upload-artifact@v3
+ with:
+ name: screenshots-desktop
+ path: ./accessibility/screenshots-output
+
+ accessibility-mobile-scans:
+ name: Run Mobile Accessibility Scans
+ runs-on: ubuntu-latest
+
+ env:
+ SERVICE_ENDPOINT: ${{ inputs.service_endpoint }}
+
+ steps:
+ - name: Checkout source
+ uses: actions/checkout@v4
+
+ - name: Set up Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: '20'
+ cache-dependency-path: ./accessibility/package-lock.json
+ cache: npm
+
+ - name: Install dependencies
+ run: npm ci
+ working-directory: ./accessibility
+
+ - name: Create screenshots directory
+ run: mkdir -p ./accessibility/screenshots-output
+
+ - name: Update pa11y-ci config for mobile
+ run: node ./accessibility/update-config.js .pa11yci-mobile.js ${{ inputs.service_endpoint }}
+
+ - name: Cat updated pa11y-ci config for mobile
+ run: cat ./accessibility/.pa11yci-mobile.js
+
+ - name: Run pa11y-ci Mobile
+ run: |
+ set -e # Ensure the script fails if any command fails
+ npm run test:pa11y-mobile
+ echo "pa11y-ci mobile tests finished."
+ working-directory: ./accessibility
+
+ - name: Upload screenshots to artifacts
+ if: always()
+ uses: actions/upload-artifact@v3
+ with:
+ name: screenshots-mobile
+ path: ./accessibility/screenshots-output

.github/workflows/pr-environment-update.yml

@@ -15,6 +15,7 @@ on:
  commit_hash:
  required: true
  type: string
+
 jobs:
  build-and-publish:
  name: " " # GitHub UI is noisy when calling reusable workflows, so use whitespace for name to reduce noise
@@ -35,6 +36,9 @@ jobs:
 
  concurrency: pr-environment-${{ inputs.pr_number }}
 
+ outputs:
+ service_endpoint: ${{ steps.get-service-endpoint.outputs.service_endpoint }}
+
  steps:
  - uses: actions/checkout@v4
 
@@ -51,6 +55,21 @@ jobs:
  environment: ${{ inputs.environment }}
 
  - name: Update environment
+ id: update-environment
  run: ./bin/update-pr-environment "${{ inputs.app_name }}" "${{ inputs.environment }}" "${{ inputs.pr_number }}" "${{ inputs.commit_hash }}"
  env:
  GH_TOKEN: ${{ github.token }}
+
+ - name: Capture service endpoint
+ id: get-service-endpoint
+ run: |
+ service_endpoint=$(terraform -chdir="infra/${{ inputs.app_name }}/service" output -raw service_endpoint)
+ echo "service_endpoint=${service_endpoint}"
+ echo "service_endpoint=${service_endpoint}" >> "$GITHUB_OUTPUT"
+
+ accessibility:
+ name: Accessibility Checks
+ needs: [update]
+ uses: ./.github/workflows/accessibility-scans.yml
+ with:
+ service_endpoint: ${{ needs.update.outputs.service_endpoint }}

accessibility/.gitignore

@@ -0,0 +1 @@
+node_modules/*

accessibility/.pa11yci-desktop.js

@@ -0,0 +1,34 @@
+module.exports = {
+ "defaults": {
+ // The maximum time allowed for the entire test run, in milliseconds
+ "timeout": 240000,
+
+ // The accessibility testing runners to use; "axe" is a common choice
+ "runners": ["axe"],
+
+ // An array of rules to ignore during the accessibility test
+ // pa11y reports false positive color-contrast issues https://github.com/pa11y/pa11y/issues/633
+ "ignore": ["color-contrast"],
+
+ // The number of tests to run concurrently
+ "concurrency": 1,
+
+ // Configuration for launching Chrome
+ "chromeLaunchConfig": {
+ // Ignore HTTPS errors (useful for testing environments with self-signed certificates)
+ "ignoreHTTPSErrors": true,
+ "args": [
+ // Prevent chrome from crashing when using shared memory for large files/data
+ "--disable-dev-shm-usage",
+ // Disables Chrome's sandboxing for compatibility with environments where sandboxing might cause issues.
+ "--no-sandbox"
+ ]
+ },
+
+ // Actions to perform during the test
+ "actions": [
+ "wait for element body to be visible",
+ "screen capture screenshots-output/desktop-main-view.png"
+ ]
+ }
+ };

accessibility/.pa11yci-mobile.js

@@ -0,0 +1,42 @@
+module.exports = {
+ "defaults": {
+ // The maximum time allowed for the entire test run, in milliseconds
+ "timeout": 240000,
+
+ // The accessibility testing runners to use; "axe" is a common choice
+ "runners": ["axe"],
+
+ // An array of rules to ignore during the accessibility test
+ // pa11y reports false positive color-contrast issues https://github.com/pa11y/pa11y/issues/633
+ "ignore": ["color-contrast"],
+
+ // The number of tests to run concurrently
+ "concurrency": 1,
+
+ // Configuration for launching Chrome
+ "chromeLaunchConfig": {
+ // Ignore HTTPS errors (useful for testing environments with self-signed certificates)
+ "ignoreHTTPSErrors": true,
+ "args": [
+ // Prevent chrome from crashing when using shared memory for large files/data
+ "--disable-dev-shm-usage",
+ // Disables Chrome's sandboxing for compatibility with environments where sandboxing might cause issues.
+ "--no-sandbox"
+ ]
+ },
+
+ // Configuration for the viewport size and type
+ "viewport": {
+ "width": 390,
+ "height": 844,
+ "mobile": true ,
+
+ // Actions to perform during the test
+ "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"
+ ]
+ }
+ };