Merge latest.

Author: Ethan Cohen

.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,

CHANGELOG.md

@@ -0,0 +1,55 @@
+0.6.2 / 2016-04-08
+==================
+- [fix] Fix rule details for img-uses-alt: allow alt="" or role="presentation".
+
+
+0.6.1 / 2016-04-07
+==================
+- [fix] Do not infer interactivity of components that are not low-level DOM elements.
+
+
+0.6.0 / 2016-04-06
+==================
+- [breaking] Allow alt="" when role="presentation" on img-uses-alt rule.
+- [new] More descriptive error messaging for img-uses-alt rule.
+
+
+0.5.2 / 2016-04-05
+==================
+- [fix] Handle token lists for valid-aria-role.
+
+
+0.5.1 / 2016-04-05
+==================
+- [fix] Handle null valued props for valid-aria-role.
+
+
+0.5.0 / 2016-04-02
+==================
+- [new] Implement valid-aria-role rule. Based on [AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01)
+
+
+0.4.3 / 2016-03-29
+==================
+- [fix] Handle LogicalExpression attribute types when extracting values. LogicalExpressions are of form `<Component prop={foo || "foobar"} />`
+
+
+0.4.2 / 2016-03-24
+==================
+- [fix] Allow component names of form `Object.Property` i.e. `UX.Layout`
+
+
+0.3.0 / 2016-03-02
+==================
+- [new] Implement [no-hash-href](docs/rules/no-hash-href.md) rule.
+- [fix] Fixed TemplateLiteral AST value building to get more exact values from template strings.
+
+
+0.2.0 / 2016-03-01
+==================
+- [new] Implement [redunant-alt](docs/rules/redundant-alt.md) rule.
+
+
+0.1.2 / 2016-03-01
+==================
+- Initial pre-release.

README.md

@@ -75,7 +75,7 @@ Then configure the rules you want to use under the rules section.
 - [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 #.
 - [valid-aria-role](docs/rules/valid-aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
-- [no-invalid-aria](docs/rules/no-invalid-aria.md): Enforce all aria-* properties are valid.
+- [valid-aria-proptype](docs/rules/valid-aria-proptype.md): Enforce ARIA state and property values are valid.
 
 ## 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.

docs/rules/img-uses-alt.md

@@ -41,15 +41,16 @@ To tell this plugin to also check your `Image` element, specify this in your `.e
 }
 ```
 
-Note that passing props as spread attribute without `alt` explicitly defined will cause this rule to fail. Explicitly pass down `alt` prop for rule to pass. The prop must have an actual value to pass. Use `Image` component above as a reference for destructuring and applying the prop. **It is a good thing to explicitly pass props that you expect to be passed for self-documentation.**
+Note that passing props as spread attribute without `alt` explicitly defined will cause this rule to fail. Explicitly pass down `alt` prop or use `role="presentation"` for rule to pass. Use `Image` component above as a reference for destructuring and applying the prop. **It is a good thing to explicitly pass props that you expect to be passed for self-documentation.**
 
 ### Succeed
 ```jsx
 <img src="foo" alt="Foo eating a sandwich." />
 <img src="foo" alt={"Foo eating a sandwich."} />
 <img src="foo" alt={altText} />
 <img src="foo" alt={`${person} smiling`} />
-<img src="foo" alt="" role="presentation" /> <!-- Alt text can be an empty string if `role="presentation"` -->
+<img src="foo" alt="" />
+<img src="foo" role="presentation" />
 ```
 
 ### Fail

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>
+```
+

docs/rules/valid-aria-role.md

@@ -2,6 +2,8 @@
 
 Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to all role defintions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/roles#role_definitions) site.
 
+[AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01)
+
 ## Rule details
 
 This rule takes no arguments.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-jsx-a11y",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "A static analysis linter of jsx and their accessibility with screen readers.",
   "keywords": [
     "eslint",
@@ -38,5 +38,8 @@
   "engines": {
     "node": ">=0.10.0"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "object-assign": "^4.0.1"
+  }
 }

src/index.js

@@ -11,7 +11,7 @@ module.exports = {
     'label-uses-for': require('./rules/label-uses-for'),
     'no-hash-href': require('./rules/no-hash-href'),
     'valid-aria-role': require('./rules/valid-aria-role'),
-    'no-invalid-aria': require('./rules/no-invalid-aria')
+    'valid-aria-proptypes': require('./rules/valid-aria-proptypes')
   },
   configs: {
     recommended: {
@@ -30,7 +30,7 @@ module.exports = {
         "jsx-a11y/label-uses-for": 2,
         "jsx-a11y/no-hash-href": 2,
         "jsx-a11y/valid-aria-role": 2,
-        "jsx-a11y/no-invalid-aria": 2
+        "jsx-a11y/valid-aria-proptypes": 2
       }
     }
   }

src/rules/img-uses-alt.js

@@ -22,39 +22,39 @@ module.exports = context => ({
       return;
     }
 
+    const hasRoleProp = hasAttribute(node.attributes, 'role');
+    const roleValue = getAttributeValue(hasRoleProp);
+    const isPresentation = hasRoleProp && roleValue.toLowerCase() === 'presentation';
+
+    if (isPresentation) {
+      return;
+    }
+
     const hasAltProp = hasAttribute(node.attributes, 'alt');
 
     // Missing alt prop error.
     if (!hasAltProp) {
       context.report({
         node,
-        message: `${nodeType} elements must have an alt prop.`
+        message: `${nodeType} elements must have an alt prop or use role="presentation".`
       });
       return;
     }
 
     // Check if alt prop is undefined.
-    const altProp = getAttributeValue(hasAltProp);
-
-    // Check if alt prop is ""
-    const emptyAlt = hasAltProp && hasAltProp.value
-      && hasAltProp.value.type === 'Literal'
-      && hasAltProp.value.value === "";
-
-    const hasRoleProp = hasAttribute(node.attributes, 'role');
-    const roleProp = getAttributeValue(hasRoleProp);
+    const altValue = getAttributeValue(hasAltProp);
+    const isNullValued = hasAltProp.value === null; // <img alt />
 
-    // Allow altProp to be "" if `role="presentation"` is present.
-    const isValid = altProp || (emptyAlt && hasRoleProp && roleProp.toUpperCase() === 'PRESENTATION');
-
-    // Undefined alt prop error.
-    if (!isValid) {
-      context.report({
-        node,
-        message: `${nodeType} alt prop must have a value. You can set alt="" if role="presentation" is applied.`
-      });
+    if ((altValue && !isNullValued) || altValue === '') {
       return;
     }
+
+    // Undefined alt prop error.
+    context.report({
+      node,
+      message:
+        `Invalid alt value for ${nodeType}. Use alt="" or role="presentation" for presentational images.`
+    });
   }
 });
 

src/rules/label-uses-for.js

@@ -27,7 +27,7 @@ module.exports = context => ({
 
     const htmlForAttr = hasAttribute(node.attributes, 'htmlFor');
     const htmlForValue = getAttributeValue(htmlForAttr);
-    const isInvalid = htmlForAttr === false || htmlForValue === null || htmlForValue === undefined;
+    const isInvalid = htmlForAttr === false || !htmlForValue;
 
     if (isInvalid) {
       context.report({