INFRA01 - Create a check for a11y (#101)

* Added axe and lighthouse checks

* Updated to node 20, install pnpm

* pnpm install instead of pnpm ci

* Using --no-frozen-lockfile

* Cleaning

* renamed lighthouserc.js

* Node version and chromedriver

* Chromedriver version

* Axe vulnerabilities fix (#100)

* axe vulnerabilities fix

* checkoutv4, setup-nodev4, language fix

* cachev4

* actions on main

* Lighthouse improvements

* lighthouse fix

* fix lighthouse config

* PR number fix

* permissions for action

* changed version for sticky pull request

* number on commit

* switched lighthouse on main

.github/workflows/axe.yml

@@ -0,0 +1,46 @@
+name: Axe
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  axe:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: ['20.x']
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - run: pnpm install --no-frozen-lockfile
+      - run: pnpm run build --if-present
+      - run: pnpm run dev & npx wait-on http://localhost:4321
+      - run: pnpm install -g [email protected]
+      - name: Run axe
+        run: |
+          pnpm install -g @axe-core/cli
+          axe --chromedriver-path $(pnpm root -g)/chromedriver/bin/chromedriver http://localhost:4321 --exit

.github/workflows/lighthouse.yml

@@ -0,0 +1,77 @@
+name: Lighthouse
+
+permissions:
+  pull-requests: write
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: ['20.x']
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - run: pnpm install --no-frozen-lockfile
+      - run: pnpm run build
+      - run: pnpm run dev & npx wait-on http://localhost:4321
+      - name: Run Lighthouse
+        id: lighthouse_audit
+        uses: treosh/lighthouse-ci-action@v10
+        with:
+          urls: |
+            http://localhost:4321
+          configPath: ./.github/workflows/lighthouse/lighthouserc.json
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+          runs: 5
+      - name: Format Lighthouse score
+        uses: actions/github-script@v5
+        id: format_lighthouse_score
+        with:
+          script: |
+            const lighthouseCommentMaker = require('./.github/workflows/lighthouse/lighthouseCommentMaker.cjs');
+
+            const lighthouseOutputs = {
+              manifest: ${{ steps.lighthouse_audit.outputs.manifest }},
+              links: ${{ steps.lighthouse_audit.outputs.links }}
+            };
+
+            const prComment = lighthouseCommentMaker({ lighthouseOutputs });
+            core.setOutput("pr_comment", prComment);
+      - uses: jwalton/gh-find-current-pr@v1
+        id: pr_number_finder
+      - name: Add Lighthouse stats as comment
+        uses: marocchino/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          header: lighthouse
+          number: ${{ github.event.number || steps.pr_number_finder.outputs.pr }}
+          message: ${{ steps.format_lighthouse_score.outputs.pr_comment }}

.github/workflows/lighthouse/lighthouse-config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+    extends: 'lighthouse:default',
+    settings: {
+      skipAudits: [
+        'canonical', 
+        'maskable-icon',
+        'valid-source-maps',
+        'unsized-images',
+        'offline-start-url',
+      ],
+    },
+  };

.github/workflows/lighthouse/lighthouseCommentMaker.cjs

@@ -0,0 +1,63 @@
+// @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
+
+We ran Lighthouse against the changes and produced this [report](${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)}
+
+*Lighthouse ran against [${testedUrl}](${testedUrl})*
+`;
+
+  return comment;
+}
+
+module.exports = ({ lighthouseOutputs }) => {
+  return makeComment(lighthouseOutputs);
+};

.github/workflows/lighthouse/lighthouserc.json

@@ -0,0 +1,9 @@
+{
+    "ci": {
+      "collect": {
+        "settings": {
+          "configPath": "./.github/workflows/lighthouse/lighthouse-config.cjs"
+        }
+      }
+    }
+  }

src/pages/index.astro

@@ -1,3 +1,16 @@
-<div>
-  <h1>Hedwig</h1>
-</div>
+---
+import i18next, { changeLanguage } from "i18next";
+
+changeLanguage("en");
+---
+
+<html lang={i18next.language}>
+  <head>
+    <title>Hedwig</title>
+  </head>
+  <body>
+    <main role="main">
+      <h1>Welcome to Hedwig!</h1>
+    </main>
+  </body>
+</html>