dotCMS / dotCMS/core

Enforce Angular template accessibility lint rules in core-web

Open
#36,386 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Team : Maintenance Type : Task
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 Angular eslint.config.mjs files
  • Fix all ~191 accessibility violations (add aria-label/content, keyboard handlers, for/id associations, remove autofocus, etc.)
  • nx run-many -t lint --exclude=tag:skip:lint passes 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-ui first, then libs) to keep PRs reviewable.
  • Part of epic #32713.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.