Merge pull request #25 from evcohen/develop

[breaking] - Implement multiple rules and refactor getAttributeValue

Author: beefancohen

.eslintignore

@@ -1,4 +1,3 @@
-node_modules/**
-reports/**
-index.js
+node_modules/
+reports/
 lib/

.eslintrc.js

@@ -64,7 +64,6 @@ module.exports = {
       "ignorePattern": "((^import[^;]+;$)|(^\\s*it\\())",
       "ignoreUrls": true
     } ],
-    "new-cap": 2,
     "no-alert": 2,
     "no-confusing-arrow": 2,
     "no-caller": 2,
@@ -144,6 +143,7 @@ module.exports = {
     "prefer-const": 2,
     "prefer-spread": 2,
     "prefer-template": 2,
+    'quotes': [2, 'single', 'avoid-escape'],
     "radix": 2,
     "semi": 2,
     "sort-vars": [ 2, {

README.md

@@ -74,7 +74,11 @@ Then configure the rules you want to use under the rules section.
 - [label-uses-for](docs/rules/label-uses-for.md): Enforce that label elements have the htmlFor attribute
 - [redundant-alt](docs/rules/redundant-alt.md): Enforce img alt attribute does not contain the word image, picture, or photo.
 - [no-hash-href](docs/rules/no-hash-href.md): Enforce an anchor element's href prop value is not just #.
+- [no-invalid-aria](docs/rules/no-invalid-aria.md): Enforce all aria-* properties are valid.
 - [valid-aria-role](docs/rules/valid-aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
+- [valid-aria-proptype](docs/rules/valid-aria-proptype.md): Enforce ARIA state and property values are valid.
+- [role-requires-aria](docs/rules/role-requires-aria.md): Enforce that elements with ARIA roles must have all required attributes for that role.
+- [no-unsupported-elements-use-aria](docs/rules/no-unsupported-elements-use-aria.md): Enforce that elements that do not support ARIA roles, states and properties do not have those attributes.
 
 ## Contributing
 Feel free to contribute! I am currently using [Google Chrome's Audit Rules](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules) to map out as rules for this plugin.

TODO.md

@@ -1,2 +1 @@
 # TODO
-1. Allow `alt=""` if `role="presentation"` on img-uses-alt rule.

docs/rules/no-invalid-aria.md

@@ -0,0 +1,22 @@
+# no-invalid-aria
+
+Elements cannot use an invalid ARIA attribute. This will fail if it finds an `aria-*` property that is not listed in [WAI-ARIA States and Properties spec](https://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def).
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: Labeled using correctly spelled aria-labelledby -->
+<div id="address_label">Enter your address</div>
+<input aria-labelledby="address_label">
+```
+
+### Fail
+
+```jsx
+<!-- Bad: Labeled using incorrectly spelled aria-labeledby -->
+<div id="address_label">Enter your address</div>
+<input aria-labeledby="address_label">
+```

docs/rules/no-unsupported-elements-use-aria.md

@@ -0,0 +1,23 @@
+# no-unsupported-elements-use-aria
+
+Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` and/or `aria-*` props.
+
+#### References
+1. [AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_12)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the meta element should not be given any ARIA attributes -->
+<meta charset="UTF-8" />
+```
+
+### Fail
+```jsx
+<!-- Bad: the meta element should not be given any ARIA attributes -->
+<meta charset="UTF-8" aria-hidden="false" />
+```
+

docs/rules/role-requires-aria.md

@@ -0,0 +1,24 @@
+# role-requires-aria
+
+Elements with ARIA roles must have all required attributes for that role.
+
+#### References
+1. [Spec](https://www.w3.org/TR/wai-aria/roles)
+2. [AX_ARIA_03](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_03)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the checkbox role requires the aria-checked state -->
+<span role="checkbox" aria-checked="false" aria-labelledby="foo" tabindex="0"></span>
+```
+
+### Fail
+
+```jsx
+<!-- Bad: the checkbox role requires the aria-checked state -->
+<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
+```

docs/rules/valid-aria-proptype.md

@@ -0,0 +1,24 @@
+# valid-aria-proptype
+
+ARIA state and property values must be valid.
+
+#### References
+1. [Spec](https://www.w3.org/TR/wai-aria/states_and_properties)
+2. [AX_ARIA_04](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_04)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the aria-hidden state is of type true/false -->
+<span aria-hidden="true">foo</span>
+```
+
+### Fail
+```jsx
+<!-- Bad: the aria-hidden state is of type true/false -->
+<span aria-hidden="yes">foo</span>
+```
+

package.json

@@ -20,9 +20,9 @@
     "build": "rimraf lib && babel src --out-dir lib",
     "prepublish": "npm run lint && npm run test && npm run build",
     "coveralls": "cat ./reports/coverage/lcov.info | coveralls",
-    "lint": "eslint  --config .eslintrc.js src tests",
+    "lint": "eslint  --config .eslintrc.js .",
     "pretest": "npm run lint",
-    "test": "istanbul cover --dir reports/coverage node_modules/mocha/bin/_mocha tests/**/*.js -- --compilers js:babel-core/register --reporter nyan"
+    "test": "istanbul cover --dir reports/coverage node_modules/mocha/bin/_mocha tests/**/*.js -- --compilers js:babel-core/register --reporter dot"
   },
   "devDependencies": {
     "babel-cli": "^6.6.0",
@@ -38,5 +38,8 @@
   "engines": {
     "node": ">=0.10.0"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "object-assign": "^4.0.1"
+  }
 }

src/index.js

@@ -10,7 +10,11 @@ module.exports = {
     'no-access-key': require('./rules/no-access-key'),
     'label-uses-for': require('./rules/label-uses-for'),
     'no-hash-href': require('./rules/no-hash-href'),
-    'valid-aria-role': require('./rules/valid-aria-role')
+    'valid-aria-role': require('./rules/valid-aria-role'),
+    'valid-aria-proptypes': require('./rules/valid-aria-proptypes'),
+    'no-invalid-aria': require('./rules/no-invalid-aria'),
+    'role-requires-aria': require('./rules/role-requires-aria'),
+    'no-unsupported-elements-use-aria': require('./rules/no-unsupported-elements-use-aria')
   },
   configs: {
     recommended: {
@@ -20,15 +24,19 @@ module.exports = {
         }
       },
       rules: {
-        "jsx-a11y/img-uses-alt": 2,
-        "jsx-a11y/redundant-alt": 2,
-        "jsx-a11y/onclick-uses-role": 2,
-        "jsx-a11y/mouse-events-map-to-key-events": 2,
-        "jsx-a11y/use-onblur-not-onchange": 2,
-        "jsx-a11y/no-access-key": 2,
-        "jsx-a11y/label-uses-for": 2,
-        "jsx-a11y/no-hash-href": 2,
-        "jsx-a11y/valid-aria-role": 2
+        'jsx-a11y/img-uses-alt': 2,
+        'jsx-a11y/redundant-alt': 2,
+        'jsx-a11y/onclick-uses-role': 2,
+        'jsx-a11y/mouse-events-map-to-key-events': 2,
+        'jsx-a11y/use-onblur-not-onchange': 2,
+        'jsx-a11y/no-access-key': 2,
+        'jsx-a11y/label-uses-for': 2,
+        'jsx-a11y/no-hash-href': 2,
+        'jsx-a11y/valid-aria-role': 2,
+        'jsx-a11y/valid-aria-proptypes': 2,
+        'jsx-a11y/no-invalid-aria': 2,
+        'jsx-a11y/role-requires-aria': 2,
+        'jsx-a11y/no-unsupported-elements-use-aria': 2
       }
     }
   }