Merge pull request #651 from evcohen/jwyung-alt-text

[alt-text] allow aria-label or aria-labelledby to provide text alternative for img (#411)

Author: jessebeach

__tests__/src/rules/alt-text-test.js

@@ -29,6 +29,9 @@ Use alt="" for presentational images.`,
   type: 'JSXOpeningElement',
 });
 
+const ariaLabelValueError = 'The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images.';
+const ariaLabelledbyValueError = 'The aria-labelledby attribute must have a value. The alt attribute is preferred over aria-labelledby for images.';
+
 const preferAltError = () => ({
   message: 'Prefer alt="" over a presentational role. First rule of aria is to not use aria if it can be achieved via native HTML.',
   type: 'JSXOpeningElement',
@@ -83,6 +86,8 @@ ruleTester.run('alt-text', rule, {
     { code: '<img alt={error ? "not working": "working"} />' },
     { code: '<img alt={undefined ? "working": "not working"} />' },
     { code: '<img alt={plugin.name + " Logo"} />' },
+    { code: '<img aria-label="foo" />' },
+    { code: '<img aria-labelledby="id1" />' },
 
     // DEFAULT <object> TESTS
     { code: '<object aria-label="foo" />' },
@@ -168,25 +173,41 @@ ruleTester.run('alt-text', rule, {
     { code: '<img alt role="presentation" />;', errors: [altValueError('img')] },
     { code: '<img role="presentation" />;', errors: [preferAltError()] },
     { code: '<img role="none" />;', errors: [preferAltError()] },
+    { code: '<img aria-label={undefined} />', errors: [ariaLabelValueError] },
+    { code: '<img aria-labelledby={undefined} />', errors: [ariaLabelledbyValueError] },
+    { code: '<img aria-label="" />', errors: [ariaLabelValueError] },
+    { code: '<img aria-labelledby="" />', errors: [ariaLabelledbyValueError] },
 
     // DEFAULT ELEMENT 'object' TESTS
     { code: '<object />', errors: [objectError] },
     { code: '<object><div aria-hidden /></object>', errors: [objectError] },
     { code: '<object title={undefined} />', errors: [objectError] },
+    { code: '<object aria-label="" />', errors: [objectError] },
+    { code: '<object aria-labelledby="" />', errors: [objectError] },
+    { code: '<object aria-label={undefined} />', errors: [objectError] },
+    { code: '<object aria-labelledby={undefined} />', errors: [objectError] },
 
     // DEFAULT ELEMENT 'area' TESTS
     { code: '<area />', errors: [areaError] },
     { code: '<area alt />', errors: [areaError] },
     { code: '<area alt={undefined} />', errors: [areaError] },
     { code: '<area src="xyz" />', errors: [areaError] },
     { code: '<area {...this.props} />', errors: [areaError] },
+    { code: '<area aria-label="" />', errors: [areaError] },
+    { code: '<area aria-label={undefined} />', errors: [areaError] },
+    { code: '<area aria-labelledby="" />', errors: [areaError] },
+    { code: '<area aria-labelledby={undefined} />', errors: [areaError] },
 
     // DEFAULT ELEMENT 'input type="image"' TESTS
     { code: '<input type="image" />', errors: [inputImageError] },
     { code: '<input type="image" alt />', errors: [inputImageError] },
     { code: '<input type="image" alt={undefined} />', errors: [inputImageError] },
     { code: '<input type="image">Foo</input>', errors: [inputImageError] },
     { code: '<input type="image" {...this.props} />', errors: [inputImageError] },
+    { code: '<input type="image" aria-label="" />', errors: [inputImageError] },
+    { code: '<input type="image" aria-label={undefined} />', errors: [inputImageError] },
+    { code: '<input type="image" aria-labelledby="" />', errors: [inputImageError] },
+    { code: '<input type="image" aria-labelledby={undefined} />', errors: [inputImageError] },
 
     // CUSTOM ELEMENT TESTS FOR ARRAY OPTION TESTS
     {

src/rules/alt-text.js

@@ -32,10 +32,20 @@ const schema = generateObjSchema({
   'input[type="image"]': arraySchema,
 });
 
+const ariaLabelHasValue = (prop) => {
+  const value = getPropValue(prop);
+  if (value === undefined) {
+    return false;
+  }
+  if (typeof value === 'string' && value.length === 0) {
+    return false;
+  }
+  return true;
+};
+
 const ruleByElement = {
   img(context, node) {
     const nodeType = elementType(node);
-
     const altProp = getProp(node.attributes, 'alt');
 
     // Missing alt prop error.
@@ -47,6 +57,33 @@ const ruleByElement = {
         });
         return;
       }
+      // Check for `aria-label` to provide text alternative
+      // Don't create an error if the attribute is used correctly. But if it
+      // isn't, suggest that the developer use `alt` instead.
+      const ariaLabelProp = getProp(node.attributes, 'aria-label');
+      if (ariaLabelProp !== undefined) {
+        if (!ariaLabelHasValue(ariaLabelProp)) {
+          context.report({
+            node,
+            message: 'The aria-label attribute must have a value. The alt attribute is preferred over aria-label for images.',
+          });
+        }
+        return;
+      }
+      // Check for `aria-labelledby` to provide text alternative
+      // Don't create an error if the attribute is used correctly. But if it
+      // isn't, suggest that the developer use `alt` instead.
+      const ariaLabelledbyProp = getProp(node.attributes, 'aria-labelledby');
+      if (ariaLabelledbyProp !== undefined) {
+        if (!ariaLabelHasValue(ariaLabelledbyProp)) {
+          context.report({
+            node,
+            message: 'The aria-labelledby attribute must have a value. The alt attribute is preferred over aria-labelledby for images.',
+          });
+        }
+        return;
+      }
+
       context.report({
         node,
         message: `${nodeType} elements must have an alt prop, either with meaningful text, or an empty string for decorative images.`,
@@ -72,7 +109,7 @@ const ruleByElement = {
   object(context, node) {
     const ariaLabelProp = getProp(node.attributes, 'aria-label');
     const arialLabelledByProp = getProp(node.attributes, 'aria-labelledby');
-    const hasLabel = ariaLabelProp !== undefined || arialLabelledByProp !== undefined;
+    const hasLabel = ariaLabelHasValue(ariaLabelProp) || ariaLabelHasValue(arialLabelledByProp);
     const titleProp = getLiteralPropValue(getProp(node.attributes, 'title'));
     const hasTitleAttr = !!titleProp;
 
@@ -87,9 +124,9 @@ const ruleByElement = {
   },
 
   area(context, node) {
-    const ariaLabelPropValue = getPropValue(getProp(node.attributes, 'aria-label'));
-    const arialLabelledByPropValue = getPropValue(getProp(node.attributes, 'aria-labelledby'));
-    const hasLabel = ariaLabelPropValue !== undefined || arialLabelledByPropValue !== undefined;
+    const ariaLabelProp = getProp(node.attributes, 'aria-label');
+    const arialLabelledByProp = getProp(node.attributes, 'aria-labelledby');
+    const hasLabel = ariaLabelHasValue(ariaLabelProp) || ariaLabelHasValue(arialLabelledByProp);
 
     if (hasLabel) {
       return;
@@ -124,9 +161,9 @@ const ruleByElement = {
       const typePropValue = getPropValue(getProp(node.attributes, 'type'));
       if (typePropValue !== 'image') { return; }
     }
-    const ariaLabelPropValue = getPropValue(getProp(node.attributes, 'aria-label'));
-    const arialLabelledByPropValue = getPropValue(getProp(node.attributes, 'aria-labelledby'));
-    const hasLabel = ariaLabelPropValue !== undefined || arialLabelledByPropValue !== undefined;
+    const ariaLabelProp = getProp(node.attributes, 'aria-label');
+    const arialLabelledByProp = getProp(node.attributes, 'aria-labelledby');
+    const hasLabel = ariaLabelHasValue(ariaLabelProp) || ariaLabelHasValue(arialLabelledByProp);
 
     if (hasLabel) {
       return;