❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
Overview
Enable eslint-plugin-vuejs-accessibility in packages/kolibri-format/eslint.config.mjs using the flat/recommended preset at error severity, and remediate the pre-existing violations across the ~612 .vue files in the Kolibri codebase. Includes a minor version bump of kolibri-format.
Complexity: High
Target branch: develop
Context
Kolibri has ~612 .vue files but no static accessibility linting today. The Kolibri Design System components (KButton, KModal, etc.) already bake in a11y best practices, but consumer templates can still regress — missing alt text on <img>, interactive <div> without keyboard handlers, labels without associated inputs, unlabelled form controls, and so on.
eslint-plugin-vuejs-accessibility is a static subset of a11y checks. It does not replace runtime/visual audits (screen readers, axe-style tooling), but it catches the most common template-level mistakes at lint time.
kolibri-format (the shared ESLint config at packages/kolibri-format/eslint.config.mjs) is the correct place to add the plugin so both the Kolibri repo and external consumers get the rules.
The Change
Add eslint-plugin-vuejs-accessibility as a dependency of kolibri-format and register it in packages/kolibri-format/eslint.config.mjs:
- Extend the
flat/recommended preset.
- Raise any rules in the preset that ship at
warn to error, so they are consistent with the rest of the Kolibri lint config.
Remediate the resulting violations across all .vue files in the Kolibri codebase.
Bump kolibri-format to a new minor version.
How to Get There
After wiring the plugin and preset, run:
pnpm run lint-frontend:format
Most vuejs-accessibility rules have no autofixer — remediation is manual: adding alt attributes, keyboard event handlers alongside click handlers, for/id wiring on labels, aria-* where semantically appropriate, and so on. Where a violation cannot be fixed without redesign (e.g. a complex custom widget missing role semantics), flag it in the PR discussion rather than silencing with an inline disable.
Out of Scope
- Runtime a11y testing (axe-core, manual screen-reader passes).
- Visual/contrast audits.
- Adding or enabling rules beyond the
flat/recommended preset.
- Redesigning components whose a11y problems can't be fixed at the template level — flag these for follow-up issues rather than resolving them here.
Acceptance Criteria
References
AI usage
Used Claude Code to draft this issue iteratively. I provided direction on scope and reviewed each section before it was committed. Claude scanned the codebase to gauge the number of .vue files in scope for remediation (~612 files).
❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
Overview
Enable
eslint-plugin-vuejs-accessibilityinpackages/kolibri-format/eslint.config.mjsusing theflat/recommendedpreset at error severity, and remediate the pre-existing violations across the ~612.vuefiles in the Kolibri codebase. Includes a minor version bump ofkolibri-format.Complexity: High
Target branch: develop
Context
Kolibri has ~612
.vuefiles but no static accessibility linting today. The Kolibri Design System components (KButton,KModal, etc.) already bake in a11y best practices, but consumer templates can still regress — missingalttext on<img>, interactive<div>without keyboard handlers, labels without associated inputs, unlabelled form controls, and so on.eslint-plugin-vuejs-accessibilityis a static subset of a11y checks. It does not replace runtime/visual audits (screen readers,axe-style tooling), but it catches the most common template-level mistakes at lint time.kolibri-format(the shared ESLint config atpackages/kolibri-format/eslint.config.mjs) is the correct place to add the plugin so both the Kolibri repo and external consumers get the rules.The Change
Add
eslint-plugin-vuejs-accessibilityas a dependency ofkolibri-formatand register it inpackages/kolibri-format/eslint.config.mjs:flat/recommendedpreset.warntoerror, so they are consistent with the rest of the Kolibri lint config.Remediate the resulting violations across all
.vuefiles in the Kolibri codebase.Bump
kolibri-formatto a new minor version.How to Get There
After wiring the plugin and preset, run:
Most
vuejs-accessibilityrules have no autofixer — remediation is manual: addingaltattributes, keyboard event handlers alongside click handlers,for/idwiring on labels,aria-*where semantically appropriate, and so on. Where a violation cannot be fixed without redesign (e.g. a complex custom widget missing role semantics), flag it in the PR discussion rather than silencing with an inline disable.Out of Scope
flat/recommendedpreset.Acceptance Criteria
eslint-plugin-vuejs-accessibilityis added as a dependency ofkolibri-formatflat/recommendedpreset is registered inpackages/kolibri-format/eslint.config.mjswarnare raised toerrorpnpm run lint-frontendpasses with no new violations across the repokolibri-formathas a minor version bump in itspackage.jsonpnpm-lock.yamlis updated for the version bumpReferences
eslint-plugin-vuejs-accessibilityAI usage
Used Claude Code to draft this issue iteratively. I provided direction on scope and reviewed each section before it was committed. Claude scanned the codebase to gauge the number of
.vuefiles in scope for remediation (~612 files).