Allow alt prop to be empty string is role="presentation"

Fixes #6

Author: Ethan Cohen

docs/rules/img-uses-alt.md

@@ -35,7 +35,7 @@ To tell this plugin to also check your `Image` element, specify this in your `.e
 ```json
 {
     "rules": {
-        "jsx-a11y/img-uses-alt": [ 2, "Image" ], // OR
+        "jsx-a11y/img-uses-alt": [ 2, "Image" ], <!-- OR -->
         "jsx-a11y/img-uses-alt": [ 2, [ "Image", "Avatar" ] ]
     }
 }
@@ -49,6 +49,7 @@ Note that passing props as spread attribute without `alt` explicitly defined wil
 <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"` -->
 ```
 
 ### Fail

src/rules/img-uses-alt.js

@@ -24,22 +24,36 @@ module.exports = context => ({
 
     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.`
       });
       return;
     }
 
-    const altProp = hasAltProp ? getAttributeValue(hasAltProp) : undefined;
-    const isInvalid = hasAltProp === false || Boolean(altProp) === false;
+    // Check if alt prop is undefined.
+    const altProp = getAttributeValue(hasAltProp);
 
-    if (isInvalid) {
+    // 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);
+
+    // 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`
+        message: `${nodeType} alt prop must have a value. You can set alt="" if role="presentation" is applied.`
       });
+      return;
     }
   }
 });

tests/src/rules/img-uses-alt.js

@@ -26,12 +26,12 @@ const parserOptions = {
 const ruleTester = new RuleTester();
 
 const customMissingPropError = type => ({
-  message: `${type} elements must have an alt prop`,
+  message: `${type} elements must have an alt prop.`,
   type: 'JSXOpeningElement'
 });
 
 const customAltValueError = type => ({
-  message: `${type} alt prop must have a value`,
+  message: `${type} alt prop must have a value. You can set alt="" if role="presentation" is applied.`,
   type: 'JSXOpeningElement'
 });
 
@@ -65,6 +65,10 @@ ruleTester.run('img-uses-alt', rule, {
     { code: '<img alt={foo.bar || ""} />', parserOptions },
     { code: '<img alt={bar() || ""} />', parserOptions },
     { code: '<img alt={foo.bar() || ""} />', parserOptions },
+    { code: '<img alt="" role="presentation" />', parserOptions }, // Allow alt to be undefined if role="presentation"
+    { code: '<img alt="" role={`presentation`} />', parserOptions },
+    { code: '<img alt="" role={"presentation"} />', parserOptions },
+    { code: '<img alt="this is lit..." role="presentation" />', parserOptions },
     { code: '<img alt=" " />', parserOptions }, // For decorative images.
 
     // CUSTOM ELEMENT TESTS FOR STRING OPTION
@@ -120,6 +124,9 @@ ruleTester.run('img-uses-alt', rule, {
     { code: '<img alt={undefined} />;', errors: [ expectedAltValueError ], parserOptions },
     { code: '<img alt={`${undefined}`} />;', errors: [ expectedAltValueError ], parserOptions },
     { code: '<img alt="" />;', errors: [ expectedAltValueError ], parserOptions },
+    { code: '<img role="presentation" />;', errors: [ expectedMissingPropError ], parserOptions },
+    { code: '<img alt={undefined} role="presentation" />;', errors: [ expectedAltValueError ], parserOptions },
+    { code: '<img alt role="presentation" />;', errors: [ expectedAltValueError ], parserOptions },
     { code: '<img src="xyz" />', errors: [ expectedMissingPropError ], parserOptions },
     { code: '<img {...this.props} />', errors: [ expectedMissingPropError ], parserOptions },
     { code: '<img alt={false || false} />', errors: [ expectedAltValueError ], parserOptions },