From bb1b692909a1fb800360ec4a9c61c3eb2fc4d1cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joa=CC=83o=20Vieira?= Date: Sun, 20 Oct 2019 18:29:13 +0100 Subject: [PATCH] Update deps. Include new rules. --- README.md | 280 ++++++++++++++++++++++++++++++++++++++++--- package-lock.json | 24 ++-- package.json | 4 +- tslint-react-a11y.js | 8 +- 4 files changed, 285 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 3cc45b3..aaceaeb 100644 --- a/README.md +++ b/README.md @@ -26,19 +26,267 @@ In `tslint.json`: This is a subset of the react rules defined in [`tslint-microsoft-contrib`](https://github.com/Microsoft/tslint-microsoft-contrib) that regard accessibility. -Rule name | Description -:---------- | :------------ -`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. 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 just #.
References:
[WCAG Rule 38: Link text should be as least four 4 characters long](http://oaa-accessibility.org/wcag20/rule/38/)
[WCAG Rule 39: Links with the same HREF should have the same link text](http://oaa-accessibility.org/wcag20/rule/39/)
[WCAG Rule 41: Links that point to different HREFs should have different link text](http://oaa-accessibility.org/wcag20/rule/41/)
[WCAG Rule 43: Links with images and text content, the alt attribute should be unique to the text content or empty](http://oaa-accessibility.org/wcag20/rule/43/)
-`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:
[WCAG Rule 94](http://oaa-accessibility.org/wcag20/rule/94/)
[Using the button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role). -`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:
[Web Content Accessibility Guidelines 1.0](https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent)
[ARIA Presentation Role](https://www.w3.org/TR/wai-aria/roles#presentation)
[WCAG Rule 31: If an image has an alt or title attribute, it should not have a presentation role](http://oaa-accessibility.org/wcag20/rule/31/) -`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:
[H58: Using language attributes to identify changes in the human language](https://www.w3.org/TR/WCAG20-TECHS/H58.html)
[lang attribute must have a valid value](https://dequeuniversity.com/rules/axe/1.1/valid-lang)
[List of ISO 639-1 codes](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes). -`react-a11y-meta` | For accessibility of your website, HTML meta elements must not have http-equiv="refresh". -`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](https://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def). -`react-a11y-proptypes` | For accessibility of your website, enforce the type of aria state and property values are correct. -`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:
[ARIA Definition of Roles](https://www.w3.org/TR/wai-aria/roles#role_definitions)
[WCAG Rule 90: Required properties and states should be defined](http://oaa-accessibility.org/wcag20/rule/90/)
[WCAG Rule 91: Required properties and states must not be empty](http://oaa-accessibility.org/wcag20/rule/91/)
-`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 ``, which will be resolved to `role='link'`. A reference for the implicit roles can be found at [Default Implicit ARIA Semantics](https://www.w3.org/TR/html-aria/#sec-strong-native-semantics).
References:
[ARIA attributes can only be used with certain roles](http://oaa-accessibility.org/wcag20/rule/87/)
[Check aria properties and states for valid roles and properties](http://oaa-accessibility.org/wcag20/rule/84/)
[Check that 'ARIA-' attributes are valid properties and states](http://oaa-accessibility.org/wcag20/rule/93/) -`react-a11y-role` | For accessibility of your website, elements with aria roles must use a **valid**, **non-abstract** aria role. A reference to role defintions can be found at [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/roles#role_definitions). References:
[WCAG Rule 92: Role value must be valid](http://oaa-accessibility.org/wcag20/rule/92/) -`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:
[WCAG 2.4.3 - Focus Order](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-order)
[Audit Rules - tabindex-usage](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#tabindex-usage)
[Avoid positive integer values for tabIndex](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03) -`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:
[WCAG 2.0 - Requirement 2.4.2 Page Titled (Level A)](http://www.w3.org/TR/WCAG20/#navigation-mechanisms-title)
[OAA-Accessibility Rule 13: Title element should not be empty](http://oaa-accessibility.org/wcag20/rule/13/)
[OAA-Accessibility Rule 24: Title content should be concise](http://oaa-accessibility.org/wcag20/rule/24/)
[OAA-Accessibility Rule 25: Title text must contain more than one word](http://oaa-accessibility.org/wcag20/rule/25/)
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rule NameDescription
+ 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: + +
diff --git a/package-lock.json b/package-lock.json index 901dcdb..417a147 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,28 +1,28 @@ { "name": "tslint-react-a11y", - "version": "1.0.0", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { "tslib": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.1.tgz", - "integrity": "sha512-avfPS28HmGLLc2o4elcc2EIq2FcH++Yo5YxpBZi9Yw93BCTGFthI4HPE4Rpep6vSYQaK8e69PelM44tPj+RaQg==" + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", + "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==" }, "tslint-microsoft-contrib": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.0.3.tgz", - "integrity": "sha512-5AnfTGlfpUzpRHLmoojPBKFTTmbjnwgdaTHMdllausa4GBPya5u36i9ddrTX4PhetGZvd4JUYIpAmgHqVnsctg==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-6.2.0.tgz", + "integrity": "sha512-6tfi/2tHqV/3CL77pULBcK+foty11Rr0idRDxKnteTaKm6gWF9qmaCNU17HVssOuwlYNyOmd9Jsmjd+1t3a3qw==", "requires": { - "tsutils": "2.27.1" + "tsutils": "^2.27.2 <2.29.0" } }, "tsutils": { - "version": "2.27.1", - "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.27.1.tgz", - "integrity": "sha512-AE/7uzp32MmaHvNNFES85hhUDHFdFZp6OAiZcd6y4ZKKIg6orJTm8keYWBhIhrJQH3a4LzNKat7ZPXZt5aTf6w==", + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.28.0.tgz", + "integrity": "sha512-bh5nAtW0tuhvOJnx1GLRn5ScraRLICGyJV5wJhtRWOLsxW70Kk5tZtpK3O/hW6LDnqKS9mlUMPZj9fEMJ0gxqA==", "requires": { - "tslib": "1.9.1" + "tslib": "^1.8.1" } } } diff --git a/package.json b/package.json index fa472a7..22f64f8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tslint-react-a11y", - "version": "1.0.0", + "version": "1.1.0", "description": "JSX a11y lint rules for TSLint.", "main": "tslint-react-a11y.js", "repository": { @@ -20,6 +20,6 @@ }, "homepage": "https://github.com/joaovieira/tslint-react-a11y#readme", "dependencies": { - "tslint-microsoft-contrib": "^5.0.3" + "tslint-microsoft-contrib": "^6.2.0" } } diff --git a/tslint-react-a11y.js b/tslint-react-a11y.js index 01b8c3d..e3e5227 100644 --- a/tslint-react-a11y.js +++ b/tslint-react-a11y.js @@ -3,19 +3,25 @@ const path = require('path'); module.exports = { rulesDirectory: path.dirname(require.resolve('tslint-microsoft-contrib')), rules: { + 'react-a11y-accessible-headings': true, 'react-a11y-anchors': true, 'react-a11y-aria-unsupported-elements': true, 'react-a11y-event-has-role': true, + 'react-a11y-iframes': true, 'react-a11y-image-button-has-alt': true, 'react-a11y-img-has-alt': true, + 'react-a11y-input-elements': true, 'react-a11y-lang': true, + 'react-a11y-meta': true, + 'react-a11y-mouse-event-has-key-event': true, + 'react-a11y-no-onchange': true, 'react-a11y-props': true, 'react-a11y-proptypes': true, + 'react-a11y-required': true, 'react-a11y-role-has-required-aria-props': true, 'react-a11y-role-supports-aria-props': true, 'react-a11y-role': true, 'react-a11y-tabindex-no-positive': true, 'react-a11y-titles': true, - 'react-a11y-meta': true, }, };