Enforce Angular template accessibility lint rules in core-web
Nobody has claimed this yet.
- Dominant language
- Java
- Stars
- 970
- Forks
- 486
- Avg merge
- 3d 33m
- Merged PRs (30d)
- 170
Description
Description
Re-enable the Angular template accessibility lint preset and fix the resulting violations. During the ESLint 9 migration ([#see Nx 23 + ESLint 9 issue]), @nx/eslint's flat angular-template preset began applying templateAccessibility (which the legacy eslintrc setup did not enforce). To keep that migration behavior-neutral, the accessibility rules were disabled via per-project overrides in the Angular eslint.config.mjs files. This issue turns them back on and fixes the code.
Rules to re-enable (@angular-eslint/template/*)
alt-text, click-events-have-key-events, elements-content, interactive-supports-focus, label-has-associated-control, mouse-events-have-key-events, no-autofocus, no-distracting-elements, role-has-required-aria, table-scope, valid-aria
Measured scope
~191 violations across ~95 template files. Concentration:
| Area | Violations |
|---|---|
dotcms-ui |
~83 |
dot-rules, edit-ema, edit-content, image-editor, ui, portlets |
remainder |
Dominant rules: elements-content (81), interactive-supports-focus (40), click-events-have-key-events (36), label-has-associated-control (27). The click/focus ones require real keyboard handlers (not auto-fixable).
Acceptance Criteria
- Remove the per-project
templateAccessibility-disabling overrides from the Angulareslint.config.mjsfiles - Fix all ~191 accessibility violations (add
aria-label/content, keyboard handlers,for/idassociations, removeautofocus, etc.) -
nx run-many -t lint --exclude=tag:skip:lintpasses with the accessibility rules enabled - No behavioral regressions in the affected components (manual smoke where keyboard handlers were added)
Additional Context
- Can be split per-area (e.g.
dotcms-uifirst, then libs) to keep PRs reviewable. - Part of epic #32713.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Angular eslint.config.mjs files and remove the per-project templateAccessibility-disabling overrides. Work through the affected Angular templates, especially dotcms-ui and the dot-rules, edit-ema, edit-content, image-editor, ui, and portlet areas, then run nx run-many -t lint --exclude=tag:skip:lint. Done means all listed accessibility violations are fixed, lint passes, and keyboard-related changes have no behavioral regressions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, eslint, typescript
- Domain
- accessibility, frontend, tooling
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100