Wishlist: Add ESLint accessibility rules

[Stephanie Leary]

Once we complete the Angular 15 upgrade (bug 2000482), we will be able to use a number of accessibility-related ESLint rules available in version 14 and up. We should add these to the rules section in .eslintrc.json:

@angular-eslint/template/accessibility-alt-text
@angular-eslint/template/accessibility-elements-content
@angular-eslint/template/accessibility-label-has-associated-control
@angular-eslint/template/accessibility-interactive-supports-focus
@angular-eslint/template/accessibility-table-scope
@angular-eslint/template/accessibility-valid-aria
@angular-eslint/template/accessibility-role-has-required-aria
@angular-eslint/template/no-positive-tabindex
@angular-eslint/template/no-autofocus
@angular-eslint/template/no-distracting-elements
@angular-eslint/template/click-events-have-key-events
@angular-eslint/template/mouse-events-have-key-events
@angular-eslint/template/button-has-type

These are each discussed in detail in this 3-part series of articles:
https://dev.to/angular/angular-eslint-rules-for-keyboard-accessibility-236f

[Galen Charlton (gmc)]

Noting that when we upgrade to Angular 16, @angular-eslint includes a new preset for accessibility checks that would spare us from having to enumerate all of the rules: https://github.com/angular-eslint/angular-eslint/pull/1361

Running a quick check against the main branch turns up 653 errors if all of a11y the rules are in place, broken down as follows:

     63 error A label component must be associated with a form element @angular-eslint/template/accessibility-label-has-associated-control
      1 error <a> should have content @angular-eslint/template/accessibility-elements-content
     68 error click must be accompanied by either keyup, keydown or keypress event for accessibility @angular-eslint/template/click-events-have-key-events
     67 error Elements with interaction handlers must be focusable @angular-eslint/template/accessibility-interactive-supports-focus
      4 error <img/> element must have a text alternative @angular-eslint/template/accessibility-alt-text
      1 error The `aria-description` is an invalid ARIA attribute @angular-eslint/template/accessibility-valid-aria
      1 error The `tabindex` attribute should not be positive @angular-eslint/template/no-positive-tabindex
    448 error Type for <button> is missing @angular-eslint/template/button-has-type

[Stephanie Leary (stephanieleary)]

+1 to not having to enumerate the rules, especially as they change between releases.

We will have a lot of cleanup to do, yes. I'm thinking perhaps one bug each for the 60+ instances, and one roundup bug for the remaining small issues. Does that make sense for the committers' workflow?

There are a couple of additional small issues reported in VSCode's Axe Linter extension; it would be great to include those in the cleanup and encourage people to use that as well.

[Galen Charlton (gmc)]

Agreed that a bug for each major class of issues + a roundup will work.

Regarding VSCode and its extensions, obviously fixing any issues that the Axe Linter reports is in order, as is a suggestion (and suggested config) for running that linter. However, building in a full dependency on non-libre tools would be of concern.

[Stephanie Leary (stephanieleary)]

Note that I've opened bug 2043220 for the link, button, and interaction handler errors listed in Galen's comment #1.

[Stephanie Leary (stephanieleary)]

Here's a collab branch, built on top of the branch Jane and I are using for bug 1850473 : https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/sleary/LP2017793-accessibility-lint-form-labels

This will need to be updated when 3.12 is final.