fix(rule): img-has-alt - img must have an alt attribute (#102)

Author: sarbbottam

__tests__/src/rules/img-has-alt-test.js

@@ -24,13 +24,18 @@ const parserOptions = {
 const ruleTester = new RuleTester();
 
 const missingPropError = type => ({
-  message: `${type} elements must have an alt prop or use role="presentation".`,
+  message: `${type} elements must have an alt prop, either with meaningful text, or an empty string for decorative images.`,
   type: 'JSXOpeningElement',
 });
 
 const altValueError = type => ({
   message: `Invalid alt value for ${type}. \
-Use alt="" or role="presentation" for presentational images.`,
+Use alt="" for presentational images.`,
+  type: 'JSXOpeningElement',
+});
+
+const preferAltError = () => ({
+  message: 'Prefer alt="" over role="presentation". First rule of aria is to not use aria if it can be achieved via native HTML.',
   type: 'JSXOpeningElement',
 });
 
@@ -68,9 +73,6 @@ ruleTester.run('img-has-alt', rule, {
     { code: '<img alt="" role="presentation" />', parserOptions },
     { code: '<img alt="" role={`presentation`} />', parserOptions },
     { code: '<img alt="" role={"presentation"} />', parserOptions },
-    { code: '<img role="presentation" />;', parserOptions },
-    { code: '<img alt={undefined} role="presentation" />;', parserOptions },
-    { code: '<img alt role="presentation" />;', parserOptions },
     { code: '<img alt="this is lit..." role="presentation" />', parserOptions },
     { code: '<img alt={error ? "not working": "working"} />', parserOptions },
     { code: '<img alt={undefined ? "working": "not working"} />', parserOptions },
@@ -115,6 +117,9 @@ ruleTester.run('img-has-alt', rule, {
     { code: '<img role />', errors: [missingPropError('img')], parserOptions },
     { code: '<img {...this.props} />', errors: [missingPropError('img')], parserOptions },
     { code: '<img alt={false || false} />', errors: [altValueError('img')], parserOptions },
+    { code: '<img alt={undefined} role="presentation" />;', errors: [altValueError('img')], parserOptions },
+    { code: '<img alt role="presentation" />;', errors: [altValueError('img')], parserOptions },
+    { code: '<img role="presentation" />;', errors: [preferAltError()], parserOptions },
 
     // CUSTOM ELEMENT TESTS FOR ARRAY OPTION TESTS
     {

docs/rules/img-has-alt.md

@@ -76,7 +76,6 @@ function Foo(props) {
 <img src="foo" alt={altText} />
 <img src="foo" alt={`${person} smiling`} />
 <img src="foo" alt="" />
-<img src="foo" role="presentation" />
 ```
 
 ### Fail

src/rules/img-has-alt.js

@@ -35,17 +35,20 @@ module.exports = {
       const isPresentation = roleProp && typeof roleValue === 'string'
         && roleValue.toLowerCase() === 'presentation';
 
-      if (isPresentation) {
-        return;
-      }
-
       const altProp = getProp(node.attributes, 'alt');
 
       // Missing alt prop error.
       if (altProp === undefined) {
+        if (isPresentation) {
+          context.report({
+            node,
+            message: 'Prefer alt="" over role="presentation". First rule of aria is to not use aria if it can be achieved via native HTML.',
+          });
+          return;
+        }
         context.report({
           node,
-          message: `${nodeType} elements must have an alt prop or use role="presentation".`,
+          message: `${nodeType} elements must have an alt prop, either with meaningful text, or an empty string for decorative images.`,
         });
         return;
       }
@@ -63,7 +66,7 @@ module.exports = {
         node,
         message:
           `Invalid alt value for ${nodeType}. \
-Use alt="" or role="presentation" for presentational images.`,
+Use alt="" for presentational images.`,
       });
     },
   }),