ci: run lighthouse a11y tests in both light + dark mode

Author: danielroe

.github/workflows/ci.yml

@@ -91,7 +91,7 @@ jobs:
       - name: 🏗️ Build project
         run: pnpm build
 
-      - name: ♿ Accessibility audit (Lighthouse)
-        run: pnpx @lhci/cli autorun
+      - name: ♿ Accessibility audit (Lighthouse - dark & light mode)
+        run: ./scripts/lighthouse-a11y.sh
         env:
           LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

.lighthouserc.json

@@ -9,6 +9,7 @@
         "http://localhost:3000/nuxt"
       ],
       "numberOfRuns": 1,
+      "puppeteerScript": "./lighthouse-setup.js",
       "settings": {
         "onlyCategories": ["accessibility"],
         "skipAudits": ["valid-source-maps"]

lighthouse-setup.js

@@ -0,0 +1,28 @@
+/**
+ * Lighthouse CI puppeteer setup script.
+ * Sets the color mode (light/dark) before running accessibility audits.
+ *
+ * The color mode is determined by the LIGHTHOUSE_COLOR_MODE environment variable.
+ * If not set, defaults to 'dark'.
+ */
+
+/** @param {import('puppeteer').Browser} browser */
+export default async function setup(browser, { url }) {
+  const colorMode = process.env.LIGHTHOUSE_COLOR_MODE || 'dark'
+  const page = await browser.newPage()
+
+  // Set localStorage before navigating so @nuxtjs/color-mode picks it up
+  await page.evaluateOnNewDocument(mode => {
+    localStorage.setItem('npmx-color-mode', mode)
+  }, colorMode)
+
+  await page.goto(url, { waitUntil: 'networkidle0' })
+
+  // Also set the data-theme attribute directly to ensure the mode is applied
+  await page.evaluate(mode => {
+    document.documentElement.setAttribute('data-theme', mode)
+  }, colorMode)
+
+  // Close the page - Lighthouse will open its own
+  await page.close()
+}

scripts/lighthouse-a11y.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+# Run Lighthouse accessibility tests in both light and dark mode
+#
+# This script runs lhci autorun twice, once for each color mode.
+# The LIGHTHOUSE_COLOR_MODE env var is read by lighthouse-setup.js
+# to set the appropriate theme before each audit.
+
+set -e
+
+echo "🌙 Running Lighthouse accessibility audit (dark mode)..."
+LIGHTHOUSE_COLOR_MODE=dark pnpx @lhci/cli autorun
+
+echo ""
+echo "☀️  Running Lighthouse accessibility audit (light mode)..."
+LIGHTHOUSE_COLOR_MODE=light pnpx @lhci/cli autorun
+
+echo ""
+echo "✅ Accessibility audits completed for both color modes"