[POC] Add workflows for accessibility

.github/workflows/a11ytester-action.yml

@@ -0,0 +1,27 @@
+name: ♿️ A11Y CI with a11ytester-action
+on:
+  pull_request:
+    paths:
+      - '**/.github/workflows/axe-core.yml'
+      - '.github/workflows/generate-site-preview.yml'
+      - 'src/**/*'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'gatsby-*.js'
+      - '.nvmrc'
+
+env:
+  WEBSITE_TO_AUDIT: 'https://process-analytics-process-analytics-dev-site_preview-pr-${{ github.event.pull_request.number }}.surge.sh/'
+
+jobs:
+  a11ytester-action-CLI:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      # Using the a11ytester-action GitHub Action
+      # @see https://github.com/marketplace/actions/a11ytester-action
+      - name: a11ytester
+        uses: mikaelvesavuori/[email protected]
+        with:
+          urls: ${{ env.WEBSITE_TO_AUDIT }}

.github/workflows/a11ywatch.yml

@@ -0,0 +1,34 @@
+name: ♿️ A11Y CI with a11ywatch
+on:
+  pull_request:
+    paths:
+      - '**/.github/workflows/axe-core.yml'
+      - '.github/workflows/generate-site-preview.yml'
+      - 'src/**/*'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'gatsby-*.js'
+      - '.nvmrc'
+
+env:
+  WEBSITE_TO_AUDIT: 'https://process-analytics-process-analytics-dev-site_preview-pr-${{ github.event.pull_request.number }}.surge.sh/'
+
+jobs:
+  a11ywatch-CLI:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      # Using the Web Accessibility Evaluation GitHub Action
+      # @see https://github.com/marketplace/actions/web-accessibility-evaluation
+      - uses: a11ywatch/[email protected]
+        with:
+          WEBSITE_URL: ${{ env.WEBSITE_TO_AUDIT }}
+          SUBDOMAINS: true
+          TLD: false
+          SITEMAP: true
+          FAIL_ERRORS_COUNT: 2
+          LIST: true
+          FIX: false
+          UPGRADE: false
+          TOKEN: ${{ secrets.GH_RELEASE_TOKEN }}

.github/workflows/axe-core.yml

@@ -0,0 +1,47 @@
+name: ♿️ A11Y CI with Axe Core
+on:
+  pull_request:
+    paths:
+      - '**/.github/workflows/axe-core.yml'
+      - '.github/workflows/generate-site-preview.yml'
+      - 'src/**/*'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'gatsby-*.js'
+      - '.nvmrc'
+
+env:
+  WEBSITE_TO_AUDIT: 'https://process-analytics-process-analytics-dev-site_preview-pr-${{ github.event.pull_request.number }}.surge.sh/'
+
+jobs:
+  Axe-CLI:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Chrome Driver
+        uses: nanasess/setup-chromedriver@v2
+      - name: Install Axe CLI
+        run: npm install -g @axe-core/cli
+
+      - name: Run Axe CLI
+        id: axe
+        uses: mathiasvr/[email protected]
+        with:
+          run: axe $WEBSITE_TO_AUDIT --chromedriver-path="/usr/local/bin/chromedriver" --exit --tags wcag2aaa
+
+      - name: Comment pull request
+        if: always()
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_RELEASE_TOKEN }}
+          header: axe-core-comment
+          recreate: true
+          message: |
+            ## ♿️ Axe report
+            Audited website : ${{ env.WEBSITE_TO_AUDIT }}
+            ```
+            ${{ steps.axe.outputs.stdout }}
+            ${{ steps.axe.outputs.stderr }}
+            ```
+            *This report has been generated using [@axe-core/cli](https://github.com/dequelabs/axe-core-npm/blob/develop/packages/cli).*

.github/workflows/generate-site-preview.yml

@@ -7,7 +7,7 @@ on:
     branches:
       - main
     paths:
-      - '.github/workflows/generate-site-preview.yml'
+      - '.github/workflows/*'
       - 'src/**/*'
       - 'static/**/*'
       - 'package.json'

.github/workflows/lighthouse-budget.json

@@ -0,0 +1,31 @@
+[
+  {
+    "path": "/*",
+    "timings": [
+      {
+        "metric": "interactive",
+        "budget": 3000
+      },
+      {
+        "metric": "first-meaningful-paint",
+        "budget": 2000
+      }
+    ],
+    "resourceSizes": [
+      {
+        "resourceType": "script",
+        "budget": 125
+      },
+      {
+        "resourceType": "total",
+        "budget": 300
+      }
+    ],
+    "resourceCounts": [
+      {
+        "resourceType": "third-party",
+        "budget": 10
+      }
+    ]
+  }
+]

.github/workflows/lighthouse-check.yml

@@ -0,0 +1,32 @@
+name: ♿️ A11Y CI with Lighthouse Check
+on:
+  pull_request:
+    paths:
+      - '**/.github/workflows/lighthouse-check.yml'
+      - '.github/workflows/generate-site-preview.yml'
+      - 'src/**/*'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'gatsby-*.js'
+      - '.nvmrc'
+
+env:
+  WEBSITE_TO_AUDIT: 'https://process-analytics-process-analytics-dev-site_preview-pr-${{ github.event.pull_request.number }}.surge.sh/'
+
+jobs:
+  Lighthouse-Check-CLI:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      # Using the Lighthouse Check GitHub Action
+      # @see https://github.com/marketplace/actions/lighthouse-check
+      - name: Run Lighthouse Check GitHub Action
+        uses: foo-software/lighthouse-check-action@master
+        id: lighthouse_audit
+        with:
+          urls: ${{ env.WEBSITE_TO_AUDIT }}
+          gitHubAccessToken: ${{ secrets.GH_RELEASE_TOKEN }}
+          prCommentEnabled: true
+          prCommentSaveOld: false
+          device: all

.github/workflows/lighthouse-comment.js

@@ -0,0 +1,62 @@
+// @ts-check
+
+/**
+ * @typedef {Object} Summary
+ * @prop {number} performance
+ * @prop {number} accessibility
+ * @prop {number} best-practices
+ * @prop {number} seo
+ * @prop {number} pwa
+ */
+
+/**
+ * @typedef {Object} Manifest
+ * @prop {string} url
+ * @prop {boolean} isRepresentativeRun
+ * @prop {string} htmlPath
+ * @prop {string} jsonPath
+ * @prop {Summary} summary
+ */
+
+/**
+ * @typedef {Object} LighthouseOutputs
+ * @prop {Record<string, string>} links
+ * @prop {Manifest[]} manifest
+ */
+
+const formatScore = (/** @type { number } */ score) => Math.round(score * 100);
+const emojiScore = (/** @type { number } */ score) =>
+    score >= 0.9 ? '🟢' : score >= 0.5 ? '🟠' : '🔴';
+
+const scoreRow = (
+    /** @type { string } */ label,
+    /** @type { number } */ score
+) => `| ${emojiScore(score)} ${label} | ${formatScore(score)} |`;
+
+/**
+ * @param {LighthouseOutputs} lighthouseOutputs
+ */
+function makeComment(lighthouseOutputs) {
+    const { summary } = lighthouseOutputs.manifest[0];
+    const [[testedUrl, reportUrl]] = Object.entries(lighthouseOutputs.links);
+
+    const comment = `## ⚡️🏠 Lighthouse report
+ Audited website : [${testedUrl}](${testedUrl})
+ Complete report is [here](${reportUrl}). Here's the summary:
+
+ | Category | Score |
+ | -------- | ----- |
+ ${scoreRow('Performance', summary.performance)}
+ ${scoreRow('Accessibility', summary.accessibility)}
+ ${scoreRow('Best practices', summary['best-practices'])}
+ ${scoreRow('SEO', summary.seo)}
+ ${scoreRow('PWA', summary.pwa)}
+ *This report has been generated using [lighthouse](https://github.com/GoogleChrome/lighthouse).*
+ `;
+
+    return comment;
+}
+
+module.exports = ({ lighthouseOutputs }) => {
+    return makeComment(lighthouseOutputs);
+};

.github/workflows/lighthouse.yml

@@ -0,0 +1,54 @@
+name: ♿️ A11Y CI with Lighthouse
+on:
+  pull_request:
+    paths:
+      - '**/.github/workflows/lighthouse.yml'
+      - '**/.github/workflows/lighthouse-comment.js'
+      - '**/.github/workflows/lighthouse-budget.json'
+      - '.github/workflows/generate-site-preview.yml'
+      - 'src/**/*'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'gatsby-*.js'
+      - '.nvmrc'
+
+env:
+  WEBSITE_TO_AUDIT: 'https://process-analytics-process-analytics-dev-site_preview-pr-${{ github.event.pull_request.number }}.surge.sh/'
+
+jobs:
+  Lighthouse-CLI:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      # Using the Lighthouse GitHub Action
+      # @see https://github.com/marketplace/actions/lighthouse-ci-action
+      - name: Run Lighthouse GitHub Action
+        uses: treosh/lighthouse-ci-action@v10
+        id: lighthouse_audit
+        with:
+          urls: $WEBSITE_TO_AUDIT
+          budgetPath: .github/workflows/lighthouse-budget.json # test performance budgets
+          uploadArtifacts: true # save results as an action artifacts
+          temporaryPublicStorage: true # upload lighthouse report to the temporary storage
+      - name: Format lighthouse score
+        if: always()
+        id: format_lighthouse_score
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const lighthouseCommentMaker = require('./.github/workflows/lighthouse-comment.js');
+            const lighthouseOutputs = {
+              manifest: ${{ steps.lighthouse_audit.outputs.manifest }},
+              links: ${{ steps.lighthouse_audit.outputs.links }}
+            };
+            const comment = lighthouseCommentMaker({ lighthouseOutputs });
+            core.setOutput("comment", comment);
+      - name: Add Lighthouse stats as comment
+        if: always()
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_RELEASE_TOKEN }}
+          header: lighthouse-comment
+          recreate: true
+          message: ${{ steps.format_lighthouse_score.outputs.comment }}

.github/workflows/pa11y.yml

@@ -0,0 +1,44 @@
+name: ♿️ A11Y CI with Pa11y
+on:
+  pull_request:
+    paths:
+      - '**/.github/workflows/pa11y.yml'
+      - '**/.pa11yci'
+      - '.github/workflows/generate-site-preview.yml'
+      - 'src/**/*'
+      - 'package.json'
+      - 'package-lock.json'
+      - 'gatsby-*.js'
+      - '.nvmrc'
+
+env:
+  WEBSITE_TO_AUDIT: 'https://process-analytics-process-analytics-dev-site_preview-pr-${{ github.event.pull_request.number }}.surge.sh/'
+
+jobs:
+  Pa11y-CLI:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install Pa11y CI
+        run: npm install -g pa11y-ci
+      - name: Run Pa11y CLI
+        id: pa11y
+        uses: mathiasvr/[email protected]
+        with:
+          run: pa11y-ci $WEBSITE_TO_AUDIT -c ./.pa11yci
+      - name: Comment pull request
+        uses: marocchino/sticky-pull-request-comment@v2
+        if: always()
+        with:
+          GITHUB_TOKEN: ${{ secrets.GH_RELEASE_TOKEN }}
+          header: pa11y-comment
+          recreate: true
+          message: |
+            ## ♿️ Pa11y report
+            Audited website : ${{ env.WEBSITE_TO_AUDIT }}
+            ```
+            ${{ steps.pa11y.outputs.stdout }}
+            ${{ steps.pa11y.outputs.stderr }}
+            ```
+            *This report has been generated using [pa11y-ci](https://github.com/pa11y/pa11y-ci).*

.pa11yci

@@ -0,0 +1,9 @@
+{
+    "defaults": {
+      "timeout": 10000,
+      "standard": "WCAG2AAA",
+      "chromeLaunchConfig": {
+        "args": ["--no-sandbox"]
+        }
+    }
+  }