Merge pull request #882 from microsoft/accessibility-insights

Accessibility insights

Author: capfei

.github/workflows/build.yml

@@ -31,6 +31,12 @@ jobs:
         NEXT_ENV_DESCRIPTOR=production \
         NEXT_ONE_DS_INSTRUMENTATION_KEY=b341ec446e65436485df678003ce82f7-1d36a7a4-ef54-4cf0-93eb-ba18b3241d36-7404 \
         npm run build
+    - name: "Install Playwright browser"
+      run: npx playwright install --with-deps chromium
+    - name: "Run automated accessibility checks"
+      env:
+        A11Y_USE_EXISTING_BUILD: '1'
+      run: npm run a11y -- --reporter=line
     - name: "Stamp content.json"
       env:
         GITSHA: ${{ github.sha }}

.gitignore

@@ -90,6 +90,8 @@ typings/
 
 # Next.js build output
 .next
+playwright-report/
+test-results/
 
 # Nuxt.js build / generate output
 .nuxt

README.md

@@ -91,5 +91,14 @@ npm install
 npm run dev
 ```
 
+To run the automated accessibility checks for the primary site pages:
+
+```sh
+npm run a11y:install
+npm run a11y
+```
+
+The accessibility check builds the exported site, serves the generated `out/` folder locally, and runs axe-based checks in Chromium against the main routes. In CI, the workflow reuses the existing build output instead of rebuilding.
+
 The `Dockerfile` is available to host a local `nginx` version of the static site,
 although dynamic site features are not available when running local.

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.