@lifeofqui/lint-config 1.2.0 → 1.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @lifeofqui/lint-config
 
-Gemeinsames Lint- und Format-Setup für Vue-/Nuxt-Projekte: **Oxlint** für JS/TS, **ESLint** nur für das, was Oxlint nicht kann (Vue-Templates/SFCs, AST-Selector-Regeln), **Oxfmt** zum Formatieren.
+Gemeinsames Lint- und Format-Setup für Vue-/Nuxt-Projekte: **Oxlint** für JS/TS, **ESLint** nur für das, was Oxlint nicht kann (Vue-Templates/SFCs inkl. Barrierefreiheit, AST-Selector-Regeln), **Oxfmt** zum Formatieren.
 
 Das Paket bringt Regeln **und** Tool-Versionen mit: `eslint`, `oxlint` und `oxfmt` sind exakt gepinnte Dependencies. Ein Update dieses Pakets aktualisiert also Regeln und Tools in einem Schritt.
 
@@ -82,13 +82,29 @@ Optionen von `defineLintConfig`:
 
 ## Updates verteilen
 
-1. Regel oder Tool-Version hier ändern (Tool-Versionen immer exakt pinnen).
-2. Lokal testen: `npm pack`, im Projekt `npm i -D ../lint-config/lifeofqui-lint-config-<version>.tgz`, dann `npm run lint:check`.
-3. `npm version patch|minor|major` und danach `npm publish`.
-4. In den Projekten öffnet Dependabot einen PR (`.github/dependabot.yml`), die CI prüft ihn mit `npm run lint:check`.
+Tool-Updates kommen per Dependabot (`.github/dependabot.yml`): wöchentlich ein gesammelter PR für alle Minor- und Patch-Updates, Majors als eigene PRs. Regeländerungen werden direkt hier gemacht. Tool-Versionen immer exakt pinnen.
+
+1. Die CI prüft jeden PR mit `npm test` (`test/smoke.sh`). Das Skript packt das Paket, installiert es in eine Kopie von `test/fixture` und prüft, dass `eslint`, `oxlint` und `oxfmt` in `node_modules/.bin` liegen. Dann laufen alle drei Tools über das Fixture, und Oxlint und ESLint müssen bekannte Verstöße melden.
+2. Lokal gegen echten Code testen: auf `main` (der Version, von der aus aktualisiert wird) `test/sync-projects.sh` ausführen. Das Skript kopiert aus jedem Nachbarprojekt, das dieses Paket nutzt (`../*`, `../*/*`), die größte Datei je Ordner (`app/pages`, `app/components`, `server`, `tests`, …) nach `test/fixture/**/_local/`. Dort werden die Dateien mit der aktuellen Version formatiert und gefixt. Was danach noch fehlschlägt, fliegt raus. Die Kopien sind gitignored, weil die Projekte privat sind. Dann auf den Update-Branch wechseln und `npm test` ausführen: Jeder Fehler kommt jetzt vom Update.
+3. Bei größeren Änderungen zusätzlich in einem echten Projekt testen: `npm pack`, dort `npm i -D ../lint-config/lifeofqui-lint-config-<version>.tgz`, dann `npm run lint:check` und `npm run build`.
+4. Nach dem Merge lokal auf `main`: `npm version patch|minor|major` und `git push --follow-tags`. Der Tag startet `.github/workflows/publish.yml`. Der Workflow lässt `npm test` laufen und legt die Version dann per npm Trusted Publishing als Staged Publish ab.
+5. Freigeben: auf npmjs.com im Tab „Staged Packages“ auf Approve klicken, oder `npm stage approve <stage-id>` (beides mit 2FA). Erst dann ist die Version live.
+6. In den Projekten öffnet Dependabot einen PR, die CI prüft ihn mit `npm run lint:check`.
+
+Einmalig auf npmjs.com einrichten: Paket → Settings → Trusted Publisher → GitHub Actions mit Owner `LifeOfQui`, Repository `lint-config` und Workflow `publish.yml`. „Allow npm publish“ bleibt aus, damit jede Version die Freigabe mit 2FA braucht.
 
 Semver: neue oder verschärfte Regeln und Tool-Updates mit Formatierungsänderungen → `minor`, Lockerungen und Fixes → `patch`, geänderte Datei-Struktur oder Optionen → `major`.
 
+## Barrierefreiheit
+
+`eslint-plugin-vuejs-accessibility` läuft mit einer kuratierten Auswahl über `app/**/*.vue`. Die Auswahl wurde gegen alle Projekte geprüft. Regeln, die dort fast nur Fehlalarme liefern, sind nicht dabei (Begründung als Kommentar in `eslint.js`). Die meisten Treffer kommen von `label-has-for` und `form-control-has-label`: ein `<label>` ohne `for` neben einem `<input>` ohne `id`. Fix: das Input ins Label schachteln oder `for`/`id` setzen.
+
+Bestehende Treffer in einem Projekt lassen sich bei der Umstellung per Bulk Suppression einfrieren, neuer Code muss die Regeln dann einhalten:
+
+```bash
+npx eslint . --suppress-rule vuejs-accessibility/label-has-for --suppress-rule vuejs-accessibility/form-control-has-label
+```
+
 ## Stolperfalle: Inline-Handler mit mehreren Anweisungen
 
 Oxfmt entfernt mit `semi: false` das `;` aus Vue-Handlern wie `@click="a = 1; b = 2"` und schreibt die Anweisungen untereinander. Der Vue-Compiler erkennt mehrere Anweisungen aber nur am `;` und bricht dann den **Build** ab („Error parsing JavaScript expression“). Lint und Typecheck merken davon nichts.

package/eslint.js

@@ -3,6 +3,7 @@ import { includeIgnoreFile } from 'eslint/config'
 import skipFormatting from 'eslint-config-prettier'
 import pluginOxlint from 'eslint-plugin-oxlint'
 import pluginVue from 'eslint-plugin-vue'
+import pluginVueA11y from 'eslint-plugin-vuejs-accessibility'
 import { existsSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
@@ -95,6 +96,38 @@ export function defineLintConfig({
         },
       },
 
+      // Accessibility (curated): accessible names keep e2e locators role-based. Left out for noise in
+      // real projects: key-event rules (modal backdrops), no-onchange (deprecated), media-has-caption,
+      // no-autofocus, interactive-supports-focus (flags aria-activedescendant listboxes).
+      {
+        files: ['app/**/*.vue'],
+        plugins: { 'vuejs-accessibility': pluginVueA11y },
+        rules: {
+          'vuejs-accessibility/alt-text': 'error',
+          'vuejs-accessibility/anchor-has-content': 'error',
+          'vuejs-accessibility/aria-props': 'error',
+          'vuejs-accessibility/aria-role': 'error',
+          'vuejs-accessibility/aria-unsupported-elements': 'error',
+          'vuejs-accessibility/form-control-has-label': 'error',
+          'vuejs-accessibility/heading-has-content': 'error',
+          'vuejs-accessibility/iframe-has-title': 'error',
+          'vuejs-accessibility/label-has-for': [
+            'error',
+            {
+              // PrimeVue form controls
+              controlComponents: ['Checkbox', 'RadioButton', 'ToggleSwitch'],
+              required: { some: ['nesting', 'id'] },
+            },
+          ],
+          'vuejs-accessibility/no-access-key': 'error',
+          'vuejs-accessibility/no-aria-hidden-on-focusable': 'error',
+          'vuejs-accessibility/no-distracting-elements': 'error',
+          'vuejs-accessibility/no-role-presentation-on-focusable': 'error',
+          'vuejs-accessibility/role-has-required-aria-props': 'error',
+          'vuejs-accessibility/tabindex-no-positive': 'error',
+        },
+      },
+
       // Nuxt page and layout transitions need a single root element
       {
         files: ['app/pages/**/*.vue', 'app/layouts/**/*.vue'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifeofqui/lint-config",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Shared ESLint, Oxlint and Oxfmt setup for Vue/Nuxt projects",
   "license": "MIT",
   "author": "Quirin Koch",
@@ -31,14 +31,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "test": "test/smoke.sh"
+  },
   "dependencies": {
     "@vue/eslint-config-typescript": "14.9.0",
-    "eslint": "10.13.0",
+    "eslint": "10.14.0",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-oxlint": "1.90.0",
+    "eslint-plugin-oxlint": "1.92.0",
     "eslint-plugin-vue": "10.12.0",
-    "oxfmt": "0.75.0",
-    "oxlint": "1.90.0"
+    "eslint-plugin-vuejs-accessibility": "2.6.3",
+    "oxfmt": "0.77.0",
+    "oxlint": "1.92.0"
   },
   "engines": {
     "node": ">=22.18"