chore: add pa11y and adhere to wcag aaa

Author: SethFalco

.github/workflows/ci.yml

@@ -0,0 +1,51 @@
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - run: corepack enable
+      - uses: actions/setup-node@v6
+        with: &setup-node-config
+          node-version: 24
+          registry-url: https://registry.npmjs.org
+      - run: yarn install
+      - run: yarn run lint
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - run: corepack enable
+      - uses: actions/setup-node@v6
+        with: *setup-node-config
+      - run: yarn install
+      - run: yarn run typecheck
+  a11y:
+    runs-on: ubuntu-latest
+    steps:
+      # https://github.com/pa11y/pa11y/blob/2055ee510163d871e874f6ea0bfe895f84bbac4a/.github/workflows/tests.yml#L37
+      - run: echo 0 | sudo tee /proc/sys/kernel/apparmor_restrict_unprivileged_userns
+      - uses: actions/checkout@v6
+      - run: corepack enable
+      - uses: actions/setup-node@v6
+        with: *setup-node-config
+      - run: yarn install
+      - run: yarn run build:html
+      - run: yarn run a11y:ci
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - run: corepack enable
+      - uses: actions/setup-node@v6
+        with: *setup-node-config
+      - run: yarn install
+      - run: npx resume export --theme . --resume ./test/fixture.resume.json /tmp/resume.html
+      - run: npx resume export --theme . --resume ./test/fixture.resume.json /tmp/resume.pdf

.github/workflows/publish.yml

@@ -1,5 +1,3 @@
-name: Node.js Package
-
 on:
   release:
     types: [created]
@@ -13,11 +11,11 @@ jobs:
   publish-npm:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       - run: corepack enable
       - uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           registry-url: https://registry.npmjs.org
       - run: yarn install
       - run: yarn npm publish --access public

.github/workflows/pulls.yml

@@ -0,0 +1,85 @@
+import { styleText } from 'node:util';
+import pa11y from 'pa11y';
+import puppeteer from 'puppeteer';
+
+/**
+ * @typedef {'light'|'dark'} ColorScheme
+ *
+ * @typedef {object} TestCase
+ * @property {string} name
+ * @property {string} url
+ * @property {ColorScheme} colorScheme
+ */
+
+const PAGE_URL = 'http://localhost:8080/resume.html';
+
+/** @type {TestCase[]} */
+const TEST_CASES = [
+  {
+    name: 'Light Mode (default)',
+    url: PAGE_URL,
+    colorScheme: 'light'
+  },
+  {
+    name: 'Dark Mode',
+    url: PAGE_URL,
+    colorScheme: 'dark'
+  },
+];
+
+/**
+ * @param {import('puppeteer').Browser} browser
+ * @param {TestCase} testCase
+ * @returns {Promise<any>}
+ */
+const pa11yRunner = async (browser, testCase) => {
+  const page = await browser.newPage();
+  await page.emulateMediaFeatures([
+    { name: 'prefers-color-scheme', value: testCase.colorScheme }
+  ]);
+
+  const results = await pa11y(testCase.url, {
+    standard: 'WCAG2AAA',
+    browser,
+    page,
+  });
+
+  await page.close();
+  return results;
+};
+
+const browser = await puppeteer.launch();
+const results = await Promise.all(TEST_CASES.map(async (testCase) => ({
+  name: testCase.name,
+  result: await pa11yRunner(browser, testCase),
+})));
+
+await browser.close();
+
+let failed = false;
+
+for (const { name, result } of results) {
+  if (result.issues.length === 0) {
+    continue;
+  }
+
+  failed = true;
+
+  for (const issue of result.issues) {
+    console.error(
+      '%s > %s\n%s %s\n%s %s\n%s %s\n',
+      styleText(['blue', 'bold'], name),
+      styleText(['red', 'bold'], issue.code),
+      styleText('yellow', 'Message:'),
+      issue.message,
+      styleText('yellow', 'Context:'),
+      styleText(['gray', 'italic'], issue.context),
+      styleText('yellow', 'Selector:'),
+      styleText('gray', issue.selector),
+    );
+  }
+}
+
+if (failed) {
+  process.exitCode = 1;
+}

assets/preview-dark.png

@@ -1,7 +1,7 @@
 {
   "packageManager": "yarn@4.10.3",
   "name": "@jsonresume/jsonresume-theme-class",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Class Theme for JSON Resume",
   "author": "Seth Falco",
   "license": "MIT",
@@ -28,8 +28,10 @@
   "scripts": {
     "serve": "resume serve --theme . --resume ./test/fixture.resume.json",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
-    "typecheck": "tsc --noEmit",
+    "format": "eslint --fix .",
+    "typecheck": "tsc",
+    "a11y": "node ./pa11y.js",
+    "a11y:ci": "start-server-and-test 'serve . -l 8080' 'http://localhost:8080/resume.html' 'yarn run a11y'",
     "generate-preview": "node scripts/generate-preview.js",
     "build:pdf": "resume export --theme . --resume ./test/fixture.resume.json resume.pdf",
     "build:html": "resume export --theme . --resume ./test/fixture.resume.json resume.html"
@@ -51,8 +53,11 @@
     "eslint": "^9.38.0",
     "eslint-plugin-import": "^2.32.0",
     "globals": "^14.0.0",
+    "pa11y": "^9.1.0",
     "puppeteer": "^18.2.1",
     "resume-cli": "^3.1.2",
+    "serve": "^14.2.5",
+    "start-server-and-test": "^2.1.3",
     "typescript": "^5.9.3"
   }
 }

assets/preview-light.png

@@ -2,9 +2,10 @@ body {
   --fg-color: black;
   --bg-color: #fff;
   --header-h1-fg-color: #fff;
-  --header-h2-fg-color: #f3f3f3;
-  --header-bg-color: #1866c3;
-  --link-color: #3061a5;
+  --header-h2-fg-color: #f2f2f2;
+  --header-bg-color: #13509b;
+  --note-color: #595959;
+  --link-color: #2c5999;
   --separator-color: #e2e2e2;
 
   margin: 0;
@@ -21,13 +22,15 @@ body {
     --header-h1-fg-color: #ddd;
     --header-h2-fg-color: #eee;
     --header-bg-color: #1b1b1b;
-    --link-color: #70a1e5;
-    --separator-color: #939393
+    --note-color: #b8b8b8;
+    --link-color: #96baec;
+    --separator-color: #939393;
   }
 }
 
 em {
-  color: #999;
+  color: var(--note-color);
+  font-size: 14px;
 }
 
 a {