Wishlist: Add ESLint accessibility rules
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Confirmed
|
Wishlist
|
Unassigned |
Bug Description
Once we complete the Angular 15 upgrade (bug 2000482), we will be able to use a number of accessibility-
@angular-
@angular-
@angular-
@angular-
@angular-
@angular-
@angular-
@angular-
@angular-
@angular-
@angular-
@angular-
@angular-
These are each discussed in detail in this 3-part series of articles:
https:/
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 eslint/ template/ accessibility- elements- content eslint/ template/ click-events- have-key- events eslint/ template/ accessibility- interactive- supports- focus eslint/ template/ accessibility- alt-text eslint/ template/ accessibility- valid-aria eslint/ template/ no-positive- tabindex eslint/ template/ button- has-type
1 error <a> should have content @angular-
68 error click must be accompanied by either keyup, keydown or keypress event for accessibility @angular-
67 error Elements with interaction handlers must be focusable @angular-
4 error <img/> element must have a text alternative @angular-
1 error The `aria-description` is an invalid ARIA attribute @angular-
1 error The `tabindex` attribute should not be positive @angular-
448 error Type for <button> is missing @angular-