Merge pull request #667 from universal-ember/re-enable-a11y-testing

Re enable a11y testing

Author: NullVoxPopuli

.github/workflows/ci.yml

@@ -65,7 +65,7 @@ jobs:
           node-version: 22
       - run: pnpm build
       - run: pnpm i -f # sync for some reason isn't running before lint
-      - run: pnpm turbo test --filter test-app
+      - run: pnpm turbo test:ember --filter test-app
 
   floating:
     name: "Floating Dependencies"
@@ -80,7 +80,7 @@ jobs:
           pnpm-args: --no-lockfile
       - run: pnpm build
       - run: pnpm i -f # sync for some reason isn't running before lint
-      - run: pnpm turbo test --filter test-app
+      - run: pnpm turbo test:ember --filter test-app
 
   compatibility:
     needs: ["test", "setup"]
@@ -156,7 +156,8 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
       - run: pnpm build
       - run: pnpm i -f # sync for some reason isn't running before lint
-      - run: pnpm test --filter docs-app
+      - run: pnpm test:ember
+        working-directory: docs-app
 
   DeployProduction:
     name: "Deploy: Production"

docs-app/app/templates/5-floaty-bits/portal-targets.gjs.md

@@ -8,6 +8,7 @@ The portal targets are stable element references that can be nested over and ove
 - `modal` - for modal dialogs
 
 These render as three `<div>` elements with `data-portal-name` attributes:
+
 ```html
 <div data-portal-name="ember-primitives__portal-targets__popover"></div>
 <div data-portal-name="ember-primitives__portal-targets__tooltip"></div>

docs-app/app/templates/6-utils/shadowed.gjs.md

@@ -4,7 +4,7 @@
 import { CommentQuery } from 'kolay';
 
 <template>
-  <CommentQuery @module="components/shadowed" @name="Shadowed" />
+  <CommentQuery @package="ember-primitives" @module="declarations/components/shadowed" @name="Shadowed" />
 </template>
 ```
 

docs-app/package.json

@@ -45,7 +45,7 @@
     "hash": "^0.2.1",
     "highlight.js": "^11.8.0",
     "highlightjs-glimmer": "^2.2.1",
-    "kolay": "^5.0.1",
+    "kolay": "^5.1.2",
     "limber-ui": "^4.1.1",
     "lorem-ipsum": "^2.0.8",
     "nvp.ui": "^0.5.3",
@@ -88,10 +88,11 @@
     "@types/qunit": "^2.19.10",
     "@types/rsvp": "^4.0.9",
     "autoprefixer": "^10.4.24",
+    "axe-core": "^4.11.1",
     "babel-plugin-ember-template-compilation": "^4.0.0",
     "broccoli-asset-rev": "^3.0.0",
     "concurrently": "^9.2.1",
-    "ember-a11y-testing": "^7.1.3",
+    "ember-a11y-testing": "^8.0.0",
     "ember-page-title": "^9.0.3",
     "ember-qunit": "^9.0.4",
     "ember-resources": "^7.0.7",

docs-app/testem.cjs

@@ -1,9 +1,12 @@
 'use strict';
 
 if (typeof module !== 'undefined') {
+  const { a11yMiddleware } = require('ember-a11y-testing/middleware');
+
   module.exports = {
     test_page: 'tests/index.html?hidepassed',
     cwd: 'dist',
+    middleware: [a11yMiddleware],
     disable_watching: true,
     launch_in_ci: ['Chrome'],
     launch_in_dev: ['Chrome'],

docs-app/tests/application/pages-test.ts

@@ -3,16 +3,9 @@ import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 
 import { colorScheme } from 'ember-primitives/color-scheme';
+import { docsManager } from 'kolay';
 
-// import { a11yAudit } from 'ember-a11y-testing/test-support';
-
-async function a11yAudit(_options: any) {
-  await Promise.resolve();
-  console.debug(`a11y audit disabled until ember-a11y-testing supports native vite apps`);
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-const pages: { path: string }[] = (window as any).__pages__;
+import { a11yAudit } from 'ember-a11y-testing/test-support';
 
 /**
  * per-page settings
@@ -71,8 +64,7 @@ async function checkA11y(assert: Assert, path: string, theme: string, settings:
       }
     }
 
-    const message =
-      `no a11y errors found for ${path} using the ${theme} theme` + `\n\n` + errorText;
+    const message = `${path}: no a11y errors found using the ${theme} theme` + `\n\n` + errorText;
 
     if (window.location.search.includes('debugA11yAudit')) {
       console.error(errorText);
@@ -85,22 +77,39 @@ async function checkA11y(assert: Assert, path: string, theme: string, settings:
 module('Application | Pages', function (hooks) {
   setupApplicationTest(hooks);
 
-  for (const page of pages) {
-    test(`${page.path}`, async function (assert) {
-      const path = page.path.replace('.md', '');
+  test('Pages all fit a11y criteria', async function (assert) {
+    await visit('/');
+
+    const pages: { path: string }[] = [];
+
+    const docsService = docsManager(this);
+    const groups = docsService.manifest.groups;
+
+    for (const group of groups) {
+      for (const page of group.list) {
+        pages.push(page);
+      }
+    }
+
+    assert.ok(pages.length > 10, `There are at least a few pages`);
+
+    for (const page of pages) {
+      const path = page.path.replace('.gjs.md', '').replace('.md', '');
       const settings: object = a11yChecks[page.path] ?? {};
 
       await visit(path);
       await waitUntil(() => findAll('nav a').length !== 0);
       await checkA11y(assert, path, 'default', settings);
 
-      assert.dom('[data-page-error]').doesNotExist();
+      assert
+        .dom('[data-page-error]')
+        .doesNotExist(`${page.path}: does not contain [data-page-error]`);
 
       colorScheme.update('dark');
       await checkA11y(assert, path, 'dark', settings);
 
       colorScheme.update('light');
       await checkA11y(assert, path, 'light', settings);
-    });
-  }
+    }
+  });
 });

docs-app/tests/index.html

@@ -23,17 +23,6 @@
       import "ember-testing";
     </script>
 
-    <script type="module">
-      window.Buffer = globalThis.Buffer = { isBuffer: () => false };
-
-      let response = await fetch("/kolay-manifest/manifest.json");
-      let json = await response.json();
-      let pages = json.groups[0].list;
-
-      // The accessibility page deliberately
-      // has violations for demonstration
-      window.__pages__ = pages.filter((page) => !page.path.includes("accessibility"));
-    </script>
     <script type="module">
       import { start } from "./test-helper";
       import.meta.glob("./**/*.{js,ts,gjs,gts}", { eager: true });

docs-app/tests/test-helper.ts

@@ -6,13 +6,16 @@ import { start as qunitStart } from 'ember-qunit';
 import Application from 'docs-app/app';
 import config, { enterTestMode } from 'docs-app/config/environment';
 
+import { setupMiddlewareReporter } from 'ember-a11y-testing/test-support';
+
 QUnit.config.urlConfig.push({
   id: 'debugA11yAudit',
   label: 'Log a11y violations',
 });
 
 export function start() {
   enterTestMode();
+  setupMiddlewareReporter();
   setApplication(Application.create(config.APP));
 
   setup(QUnit.assert);

packages/docs-support/package.json

@@ -62,7 +62,7 @@
     "ember-primitives": "workspace:^",
     "ember-resources": "^7.0.7",
     "inter-ui": "^4.0.2",
-    "kolay": "^5.0.1",
+    "kolay": "^5.1.2",
     "package-up": "^5.0.0",
     "read-package-up": "^12.0.0",
     "should-handle-link": "^1.2.2",