tslint-react-a11y

1.1.0 verified Fri May 01 auth: no javascript maintenance

JSX accessibility lint rules for TSLint, extracted from tslint-microsoft-contrib. Version 1.1.0 (latest) adds 6 new rules including react-a11y-accessible-headings and react-a11y-iframes. Provides a focused set of WCAG-compliant React rules for automated a11y checks. Unlike eslint-plugin-jsx-a11y, this integrates directly with TSLint for TypeScript projects. The package is now in long-term maintenance as TSLint is deprecated in favor of ESLint. No additional releases expected.

Common errors

error Cannot find module 'tslint' ↓

cause Missing tslint peer dependency

fix

npm install --save-dev tslint

error Unknown rule: react-a11y-accessible-headings ↓

cause Using v1.0.0 which does not include this rule

fix

Update to v1.1.0: npm install tslint-react-a11y@1.1.0

error TypeError: Cannot read property 'apply' of undefined ↓

cause Incorrect rulesDirectory path in tslint.json

fix

Add "rulesDirectory": ["node_modules/tslint-react-a11y/lib"]

Warnings

deprecated TSLint is deprecated; consider migrating to ESLint with eslint-plugin-jsx-a11y. ↓

fix Use eslint-plugin-jsx-a11y with @typescript-eslint/parser for TypeScript.

breaking Rule options changed between v1.0.0 and v1.1.0; react-a11y-anchors now accepts an object rather than boolean. ↓

fix Update rule configuration to { "react-a11y-anchors": [true, { "ignore-case": false, "ignore-whitespace": "trim" }] }

gotcha Missing tslint and typescript peer dependencies cause runtime errors. ↓

fix Install tslint and typescript as devDependencies.

gotcha Rules from tslint-react-a11y can conflict with tslint:latest or tslint-react rules if not properly ordered. ↓

fix Place tslint-react-a11y last in the extends array.

Install

npm install tslint-react-a11y

yarn add tslint-react-a11y

pnpm add tslint-react-a11y

Imports

tslint-react-a11y
wrong
```
Trying to import package via require/import statement
```
correct
```
In tslint.json: { "extends": ["tslint-react-a11y"] }
```
This is a TSLint config package, not a programmatic library. Use config extension not code imports.

react-a11y-accessible-headings

wrong

Using require('tslint-react-a11y').rules or similar

correct

In tslint.json rules section: { "react-a11y-accessible-headings": true }

Rules are enabled via tslint.json rules object, not by importing the package.

RulesDirectory

wrong

Forgetting to specify rulesDirectory when not using extends

correct

In tslint.json: { "rulesDirectory": ["node_modules/tslint-react-a11y/lib"] }

When using 'extends', rulesDirectory may be automatically set. Check tslint docs.

Quickstart

Complete tslint.json configuration enabling all accessibility rules with example option object.

// tslint.json
{
  "extends": ["tslint:latest", "tslint-react", "tslint-react-a11y"],
  "rules": {
    "react-a11y-anchors": [true, { "ignore-case": false, "ignore-whitespace": "trim" }],
    "react-a11y-aria-unsupported-elements": true,
    "react-a11y-event-has-role": true,
    "react-a11y-image-button-has-alt": true,
    "react-a11y-img-has-alt": true,
    "react-a11y-lang": true,
    "react-a11y-meta": true,
    "react-a11y-props": true,
    "react-a11y-proptypes": true,
    "react-a11y-role": true,
    "react-a11y-role-supports-aria-props": true,
    "react-a11y-tabindex-no-positive": true,
    "react-a11y-titles": true,
    // v1.1.0 new rules
    "react-a11y-accessible-headings": true,
    "react-a11y-iframes": true,
    "react-a11y-input-elements": true,
    "react-a11y-mouse-event-has-key-event": true,
    "react-a11y-no-onchange": true,
    "react-a11y-required": true
  }
}