Merge pull request #43 from szolkowski/feature/wave-3-tests-and-ci

Add accessibility and JSON-LD schema validation tests

Author: szolkowski

.github/workflows/ci.yml

@@ -99,6 +99,12 @@ jobs:
       - name: Run UI tests
         id: ui_tests
         run: npm test
+        env:
+          # GitHub Actions sets $HOME=/github/home (uid 1001), but the
+          # Playwright container runs as root — firefox refuses to launch
+          # under a $HOME it doesn't own. /root is owned by the running
+          # user, satisfies firefox, and chromium/webkit don't care.
+          HOME: /root
       - name: Upload Playwright report
         id: upload_report
         if: always() && steps.ui_tests.conclusion != 'skipped'
@@ -123,6 +129,73 @@ jobs:
           header: ui-tests
           path: /tmp/ui-test-summary.md
 
+  # Lighthouse CI (PRs only). Runs against the freshly-built site and asserts
+  # against budgets in lighthouserc.json. Reuses the Playwright container
+  # because it already ships Chrome + Node 20+ (lhci 0.15 needs both).
+  lighthouse-ci:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.59.1-jammy
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Ruby runtime + build deps
+        run: |
+          apt-get update -qq
+          apt-get install -y -qq --no-install-recommends \
+            libyaml-0-2 \
+            build-essential \
+            libssl-dev
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@086ffb1a2090c870a3f881cc91ea83aa4243d408 # v1.195.0
+        with:
+          ruby-version: '3.1'
+          bundler-cache: true
+          cache-version: 0
+      - name: Build site
+        run: bundle exec jekyll build
+        env:
+          JEKYLL_ENV: production
+      - name: Install npm deps
+        run: npm ci
+      - name: Run Lighthouse CI
+        id: lhci
+        # The Playwright image ships chromium at /ms-playwright/chromium-*/...
+        # rather than /usr/bin/google-chrome, so chrome-launcher (used by lhci)
+        # can't auto-detect it. Resolve the binary via the playwright Node API
+        # and pass it through as CHROME_PATH.
+        run: |
+          export CHROME_PATH="$(node -e 'console.log(require("playwright").chromium.executablePath())')"
+          echo "Using Chrome at: $CHROME_PATH"
+          npx lhci autorun --config=lighthouserc.json
+        env:
+          # Optional — set this secret to post lhci status checks via the
+          # Lighthouse CI GitHub App. Without it, lhci runs but skips the
+          # status-check post.
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+      - name: Upload Lighthouse reports
+        id: upload_lhci
+        if: always() && steps.lhci.conclusion != 'skipped'
+        uses: actions/upload-artifact@v4
+        with:
+          name: lighthouse-reports
+          path: .lighthouseci/
+          retention-days: 14
+      - name: Generate Lighthouse summary
+        if: always() && steps.lhci.conclusion != 'skipped'
+        env:
+          ARTIFACT_URL: ${{ steps.upload_lhci.outputs.artifact-url }}
+        run: |
+          node scripts/ci-lighthouse-summary.mjs > /tmp/lighthouse-summary.md
+          cat /tmp/lighthouse-summary.md >> "$GITHUB_STEP_SUMMARY"
+      - name: Post Lighthouse comment on PR
+        if: always() && github.event_name == 'pull_request' && steps.lhci.conclusion != 'skipped'
+        uses: marocchino/sticky-pull-request-comment@52423e01640425a022ef5fd42c6fb5f633a02728 # v2.9.0
+        with:
+          header: lighthouse
+          path: /tmp/lighthouse-summary.md
+
   # Publishes the Pages artifact from build-pages. Runs only on master pushes.
   deploy-pages:
     environment:

.gitignore

@@ -9,4 +9,5 @@ vendor
 .DS_Store
 node_modules/
 playwright-report/
-test-results/
+test-results/
+.lighthouseci/

Gemfile

@@ -8,9 +8,8 @@ source "https://rubygems.org"
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
 gem "jekyll", "~> 4.3.3"
-gem "minima", "~> 2.5"
-# This is the default theme for new Jekyll sites. You may change this to anything you like.
-# gem "minima", "~> 2.5"
+# Theme is pulled via remote_theme: pages-themes/architect (see _config.yml);
+# no `gem "<theme>"` line is needed.
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
 # uncomment the line below. To upgrade, run `bundle update github-pages`.
 # gem "github-pages", group: :jekyll_plugins

Gemfile.lock

@@ -62,10 +62,6 @@ GEM
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
     mercenary (0.4.0)
-    minima (2.5.1)
-      jekyll (>= 3.5, < 5.0)
-      jekyll-feed (~> 0.9)
-      jekyll-seo-tag (~> 2.1)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (5.0.5)
@@ -104,7 +100,6 @@ DEPENDENCIES
   jekyll-remote-theme
   jekyll-seo-tag (~> 2.8.0)
   jekyll-sitemap
-  minima (~> 2.5)
   tzinfo (~> 1.2)
   tzinfo-data
   wdm (~> 0.1.1)

_includes/_header.html

@@ -1,3 +1,4 @@
+<a class="skip-link" href="#main-content">Skip to main content</a>
 <header>
     <div class="inner">
         <nav class="site-nav" aria-label="Main navigation">

assets/css/custom-styles.scss

@@ -2,6 +2,38 @@
 ---
 
 @import "{{ site.theme }}";
+
+// Skip-to-main-content link — visually hidden until keyboard-focused so
+// screen-reader and keyboard users can bypass the site nav on every page.
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 9999;
+  padding: 0.5rem 1rem;
+  background: #2879d0;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.skip-link:focus {
+  left: 0;
+}
+
+// Uniform :focus-visible ring on interactive elements. currentColor adapts to
+// the surrounding text colour (dark ring on light backgrounds, light ring on
+// the dark hero), which keeps WCAG 2.1 AA contrast everywhere.
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
 ul.share-buttons{
   list-style: none;
   padding: 0;

lighthouserc.json

@@ -0,0 +1,31 @@
+{
+  "ci": {
+    "collect": {
+      "staticDistDir": "_site",
+      "url": [
+        "http://localhost/",
+        "http://localhost/about/",
+        "http://localhost/2026/04/13/optipowertools-hangfire-2-0-cms-13-support/",
+        "http://localhost/2026/03/03/catalog-traversal-with-hangfire-part-3-advanced-job-management/",
+        "http://localhost/2026/04/09/optimizely-alloy-on-macos-apple-silicon/",
+        "http://localhost/tags/"
+      ],
+      "numberOfRuns": 1,
+      "settings": {
+        "preset": "desktop",
+        "chromeFlags": "--no-sandbox --disable-dev-shm-usage --disable-gpu"
+      }
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["warn", { "minScore": 0.9 }],
+        "categories:accessibility": ["error", { "minScore": 0.95 }],
+        "categories:best-practices": ["warn", { "minScore": 0.9 }],
+        "categories:seo": ["error", { "minScore": 0.95 }]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}