Enable vuejs-accessibility lint rules and remediate violations across Vue files#14640
Open
rtibblesbot wants to merge 6 commits into
Open
Enable vuejs-accessibility lint rules and remediate violations across Vue files#14640rtibblesbot wants to merge 6 commits into
rtibblesbot wants to merge 6 commits into
Conversation
Contributor
npm Package VersionsMerging this PR will publish the following packages to npm:
Warning The following packages have changed files but no version bump:
If these changes affect published code, consider bumping the version. |
Contributor
c4c8e82 to
dfa36f5
Compare
dfa36f5 to
cf09194
Compare
9b5a1c2 to
a417a09
Compare
a417a09 to
2b9f950
Compare
7 tasks
2b9f950 to
3a024b0
Compare
Enable the flat/recommended preset at error severity in the shared ESLint config, bump kolibri-format to a new minor version, update pnpm-lock.yaml, and apply the resulting auto-fixes to kolibri-build and FilterTextbox. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add missing alt text to decorative and informational images across coach prompts, device channel panels, learn topics, and renderer components to satisfy vuejs-accessibility/alt-text. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… focus management Refactor SafeHtmlImage to use a native button for opening the lightbox, add keyboard handlers (Enter/Space), and manage focus return on close. Fix Lightbox to trap focus within the dialog, handle Escape, and add proper ARIA attributes. Move aria-haspopup="dialog" to the triggering button and mark the decorative icon aria-hidden. Update tests. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ents Replace interactive divs/spans with native button elements where appropriate, add paired keyboard handlers alongside click handlers, fix role and tabindex placement on presentation wrappers, fix section-aware aria-labels on quiz questions, and fix .prevent modifiers on Home/End listbox key handlers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add title attributes to sandbox iframes in renderer components, add paired keyboard handlers to mouse event listeners, and add track elements for captions in the media player. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Wire label for/id pairs in device settings, facility import, setup wizard, and user auth forms. Add a visible label to the SearchBox input to satisfy vuejs-accessibility/label-has-for. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
3a024b0 to
c0287d2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Plan: Enable
eslint-plugin-vuejs-accessibilityinkolibri-format's ESLint flat config and remediate all resulting violations across the ~612 Vue files in the codebase.alt-textviolationsclick-events-have-key-eventsviolationsno-static-element-interactionsviolationsmouse-events-have-key-eventsviolationsinteractive-supports-focusviolationslabel-has-forviolationsSummary
Enable
eslint-plugin-vuejs-accessibilityinkolibri-formatand remediate the resulting violations across Kolibri's Vue files.eslint-plugin-vuejs-accessibility@^2.5.0tokolibri-format.flat/recommendedpreset ineslint.config.mjs..vuefiles:alt-text,click-events-have-key-events,no-static-element-interactions,mouse-events-have-key-events,interactive-supports-focus,label-has-for,iframe-has-title,media-has-caption.no-autofocusviolations suppressed with inline disables — every instance is intentional focus management (first input in a modal, picture-password selector autofocus).kolibri-formatauto-fixes tokolibri-build(import ordering, arrow-function parens, trailing commas) — triggered by pre-commit when the ESLint config was updated; no semantic changes.Note on screenshots: all template changes add ARIA attributes and keyboard handlers with no visual effect. A dev server was not available in this environment; the verifiable evidence is
pnpm run lint-frontendpassing with zerovuejs-accessibilityerrors.References
Closes #14637
Reviewer guidance
Run
pnpm run lint-frontend— should exit 0 with novuejs-accessibilityerrors.Risky areas:
SafeHtmlImage.vue/Lightbox.vue: keyboard focus management added (tab-trap, focus restoration on close) — verify focus trap and restoration behave correctly in the presentation player.no-autofocusinline disables: confirm each suppressed instance is genuinely intentional focus-on-open behaviour, not noise suppression.AI usage
Implemented with Claude Code. Violations were catalogued by rule frequency, fixed category-by-category in separate commits, and each file was verified with
pre-commit run --filesbefore staging.@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly
How was this generated?