tslint-react-a11y

1.1.0 • Public • Published

tslint-react-a11y

JSX a11y lint rules for TSLint.

Instalation

npm i tslint-react-a11y

Usage

In tslint.json:

{
  "extends": ["tslint:latest", "tslint-react", "tslint-react-a11y"],
  "rules": {
    // override tslint-react-a11y rules here
    "react-a11y-lang": false
  }
}

Supported rules

This is a subset of the react rules defined in tslint-microsoft-contrib that regard accessibility.

Rule Name Description
react-a11y-accessible-headings For accessibility of your website, there should be no more than 2 H1 heading elements, HTML heading elements must be concise, used for structuring information on the page and non-empty.
react-a11y-anchors For accessibility of your website, anchor element link text should be at least 4 characters long. Links with the same HREF should have the same link text. Links that point to different HREFs should have different link text. This can be relaxed to allow differences in cases using ignore-case option. You can also allow differences in leading/trailing whitespace by adding {"ignore-whitespace": "trim"} option or all whitespace by adding {"ignore-whitespace": "all"} option. Links with images and text content, the alt attribute should be unique to the text content or empty. An an anchor element's href prop value must not be undefined, null, or just #.
References:
react-a11y-aria-unsupported-elements For accessibility of your website, enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.
react-a11y-event-has-role For accessibility of your website, elements with event handlers must have explicit role or implicit role.
References:
react-a11y-iframes Enforce that iframe elements are not empty, have title, and are unique.
react-a11y-image-button-has-alt For accessibility of your website, enforce that inputs element with type="image" must have non-empty alt attribute.
react-a11y-img-has-alt Enforce that an img element contains the alt attribute or role='presentation' for a decorative image. All images must have alt text to convey their purpose and meaning to screen reader users. Besides, the alt attribute specifies an alternate text for an image, if the image cannot be displayed.
This rule accepts as a parameter a string array for tag names other than img to also check. For example, if you use a custom tag named 'Image' then configure the rule with: [true, ['Image']].
References:
react-a11y-input-elements For accessibility of your website, HTML input boxes and text areas must include default, place-holding characters.
References:
react-a11y-lang For accessibility of your website, HTML elements must have a lang attribute and the attribute must be a valid language code.
References:
react-a11y-meta For accessibility of your website, HTML meta elements must not have http-equiv="refresh".
react-a11y-mouse-event-has-key-event For accessibility of your website, elements with mouseOver/mouseOut should be accompanied by onFocus/onBlur keyboard events.
react-a11y-no-onchange For accessibility of your website, enforce usage of onBlur over onChange on select menus. References:
react-a11y-props For accessibility of your website, enforce all aria-* attributes are valid. Elements cannot use an invalid aria-* attribute. This rule will fail if it finds an aria-* attribute that is not listed in WAI-ARIA states and properties.
react-a11y-proptypes For accessibility of your website, enforce the type of aria state and property values are correct.
react-a11y-required For accessibility of your website, enforce that required input elements have aria-required set to true.
References:
react-a11y-role For accessibility of your website, elements with aria roles must use a **valid**, **non-abstract** aria role. A reference to role definitions can be found at [WAI-ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions).
References:
react-a11y-role-has-required-aria-props For accessibility of your website, elements with aria roles must have all required attributes according to the role.
References:
react-a11y-role-supports-aria-props For accessibility of your website, enforce that elements with explicit or implicit roles defined contain only aria-* properties supported by that role. Many aria attributes (states and properties) can only be used on elements with particular roles. Some elements have implicit roles, such as <a href='hrefValue' />, which will be resolved to role='link'. A reference for the implicit roles can be found at Default Implicit ARIA Semantics.
References:
react-a11y-tabindex-no-positive For accessibility of your website, enforce tabindex value is **not greater than zero**. Avoid positive tabindex attribute values to synchronize the flow of the page with keyboard tab order.
References:
react-a11y-titles For accessibility of your website, HTML title elements must not be empty, must be more than one word, and must not be more than 60 characters long.
References:

Package Sidebar

Install

npm i tslint-react-a11y

Weekly Downloads

1,823

Version

1.1.0

License

ISC

Unpacked Size

14.7 kB

Total Files

4

Last publish

Collaborators

  • joaovieira