feat(fp): WP-17 — app-level a11y: route focus, template lint, WCAG checklist

Adds route-change focus management (new page's h1, afterNextRender) plus scroll-position restoration wired once in app.config.ts; angular-eslint's templateAccessibility bundle linting every inline template via processInlineTemplates (verified firing with a planted violation, one real hit fixed in rich-text-editor); docs/wcag-checklist.md and Foundations/ Accessibility MDX tying the four a11y layers (axe, lint, play tests, manual checklist) together. The checklist pass already earned its keep — it found a real 320px overflow in aanvraag-block's warning alert. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-04 08:26:01 +02:00
parent f3de30b72c
commit e272869f00
11 changed files with 942 additions and 506 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
        "@storybook/addon-onboarding": "^10.4.6",
        "@storybook/angular": "^10.4.6",
        "@storybook/test-runner": "^0.24.4",
+        "angular-eslint": "^22.0.0",
        "axe-playwright": "^2.2.2",
        "concurrently": "^10.0.3",
        "eslint": "^10.6.0",
@@ -532,6 +533,167 @@
        "yarn": ">= 1.13.0"
      }
    },
+    "node_modules/@angular-eslint/builder": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-22.0.0.tgz",
+      "integrity": "sha512-T2vWQYUhJs6iUlgocHV12OgoxbmN63f17a+tgW+3sYrKN0KAB3xuHsPOoYpRYoWqkVVC44HD441Ju4IDvo8vKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/architect": ">= 0.2200.0 < 0.2300.0",
+        "@angular-devkit/core": ">= 22.0.0 < 23.0.0"
+      },
+      "peerDependencies": {
+        "@angular/cli": ">= 22.0.0 < 23.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular-eslint/bundled-angular-compiler": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-22.0.0.tgz",
+      "integrity": "sha512-rv15vGDpGW8zZFaLdhQ+iIO1f0bZds/xvuxoX277hFisXp5Kt6FumJNNIb4g/qxq3xsY46a7fD6R7KvGY3smHg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@angular-eslint/eslint-plugin": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-22.0.0.tgz",
+      "integrity": "sha512-mKLScPZhqG64ic0KIQoxqSqCdkPwtEZuTOuunvc9lYTw05MJSHRUM2yVFODlCGq97c6BN1F6KBk2I+a+KFnr1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-eslint/bundled-angular-compiler": "22.0.0",
+        "@angular-eslint/utils": "22.0.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/utils": "^8.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular-eslint/eslint-plugin-template": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-22.0.0.tgz",
+      "integrity": "sha512-y6XL5HJ8C31NpBvkVHpU3bWc+Rk9g1zRtHrs39omhuT29eEUcS3zu47HMFV6tf8rHOI97B2Mstg6qYS5XL9ATg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-eslint/bundled-angular-compiler": "22.0.0",
+        "@angular-eslint/utils": "22.0.0",
+        "aria-query": "5.3.2",
+        "axobject-query": "4.1.0"
+      },
+      "peerDependencies": {
+        "@angular-eslint/template-parser": "22.0.0",
+        "@typescript-eslint/types": "^8.0.0",
+        "@typescript-eslint/utils": "^8.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular-eslint/schematics": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-22.0.0.tgz",
+      "integrity": "sha512-gsJQx6c+WIWC5d+NAqn4rRdUzwhinUCTNmCM9x4wygV9DrbAfVG+6OFPEbaDMryNvf0HYDcnGclbIbXjukGCaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/core": ">= 22.0.0 < 23.0.0",
+        "@angular-devkit/schematics": ">= 22.0.0 < 23.0.0",
+        "@angular-eslint/eslint-plugin": "22.0.0",
+        "@angular-eslint/eslint-plugin-template": "22.0.0",
+        "ignore": "7.0.5",
+        "semver": "7.8.0",
+        "strip-json-comments": "3.1.1"
+      },
+      "peerDependencies": {
+        "@angular/cli": ">= 22.0.0 < 23.0.0"
+      }
+    },
+    "node_modules/@angular-eslint/schematics/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@angular-eslint/schematics/node_modules/semver": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
+      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@angular-eslint/template-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-22.0.0.tgz",
+      "integrity": "sha512-jU5MKQ24bBB4J99gSSexmUrLm2LvTJZCuCHhNTQ1LavWX4e1lrIxhm+6pJILOm6Cixf8jyNXnHMty6nljX8J+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-eslint/bundled-angular-compiler": "22.0.0",
+        "eslint-scope": "9.1.2"
+      },
+      "peerDependencies": {
+        "eslint": "^9.0.0 || ^10.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular-eslint/template-parser/node_modules/eslint-scope": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.2.tgz",
+      "integrity": "sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@angular-eslint/template-parser/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@angular-eslint/utils": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/utils/-/utils-22.0.0.tgz",
+      "integrity": "sha512-VFodMojghnPYm+B3U+HRYrqebPMj8NyobNjVzDdY8V5XIBW+4ivOSEINIz81G48rmm/NZKwj56+bJ88bVX4KIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-eslint/bundled-angular-compiler": "22.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/utils": "^8.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
+        "typescript": "*"
+      }
+    },
    "node_modules/@angular/build": {
      "version": "22.0.4",
      "resolved": "https://registry.npmjs.org/@angular/build/-/build-22.0.4.tgz",
@@ -11093,6 +11255,30 @@
        "node": ">= 14.0.0"
      }
    },
+    "node_modules/angular-eslint": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/angular-eslint/-/angular-eslint-22.0.0.tgz",
+      "integrity": "sha512-6tHLndzM6rU+2iuICakJS/hD1scK5sWLkcD7828zStT1ViA9zX8z9g/V1IlBiKEdZeMsl+m7K2DlNc34AkYyoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/core": ">= 22.0.0 < 23.0.0",
+        "@angular-devkit/schematics": ">= 22.0.0 < 23.0.0",
+        "@angular-eslint/builder": "22.0.0",
+        "@angular-eslint/eslint-plugin": "22.0.0",
+        "@angular-eslint/eslint-plugin-template": "22.0.0",
+        "@angular-eslint/schematics": "22.0.0",
+        "@angular-eslint/template-parser": "22.0.0",
+        "@typescript-eslint/types": "^8.0.0",
+        "@typescript-eslint/utils": "^8.0.0"
+      },
+      "peerDependencies": {
+        "@angular/cli": ">= 22.0.0 < 23.0.0",
+        "eslint": "^9.0.0 || ^10.0.0",
+        "typescript": "*",
+        "typescript-eslint": "^8.0.0"
+      }
+    },
    "node_modules/ansi-colors": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -11411,6 +11597,16 @@
        "node": ">= 6"
      }
    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
    "node_modules/babel-jest": {
      "version": "30.4.1",
      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-30.4.1.tgz",