Add aria-labelledby as possible way to add description to emoji.

Author: Ethan Cohen

__tests__/src/rules/accessible-emoji-test.js

@@ -24,7 +24,7 @@ const parserOptions = {
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'Emojis should be wrapped in <span>, have role="img", and have aria-label="Description of emoji".',
+  message: 'Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby.',
   type: 'JSXOpeningElement',
 };
 
@@ -35,13 +35,17 @@ ruleTester.run('accessible-emoji', rule, {
     { code: '<span>No emoji here!</span>', parserOptions },
     { code: '<span role="img" aria-label="Panda face">🐼</span>', parserOptions },
     { code: '<span role="img" aria-label="Snowman">&#9731;</span>', parserOptions },
+    { code: '<span role="img" aria-labelledby="id1">🐼</span>', parserOptions },
+    { code: '<span role="img" aria-labelledby="id1">&#9731;</span>', parserOptions },
+    { code: '<span role="img" aria-labelledby="id1" aria-label="Snowman">&#9731;</span>', parserOptions },
     { code: '<span>{props.emoji}</span>', parserOptions },
   ],
   invalid: [
     { code: '<span>🐼</span>', errors: [expectedError], parserOptions },
     { code: '<span>foo🐼bar</span>', errors: [expectedError], parserOptions },
     { code: '<span>foo 🐼 bar</span>', errors: [expectedError], parserOptions },
     { code: '<i role="img" aria-label="Panda face">🐼</i>', errors: [expectedError], parserOptions },
+    { code: '<i role="img" aria-labelledby="id1">🐼</i>', errors: [expectedError], parserOptions },
     { code: '<Foo>🐼</Foo>', errors: [expectedError], parserOptions },
   ],
 });

docs/rules/accessible-emoji.md

@@ -13,6 +13,7 @@ This rule takes no arguments.
 ```jsx
 <span role="img" aria-label="Snowman">&#9731;</span>
 <span role="img" aria-label="Panda">🐼</span>
+<span role="img" aria-labelledby="panda1">🐼</span> 
 ```
 
 ### Fail

src/rules/accessible-emoji.js

@@ -12,7 +12,7 @@ import { getProp, getLiteralPropValue, elementType } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
 
 const errorMessage =
-  'Emojis should be wrapped in <span>, have role="img", and have aria-label="Description of emoji".';
+  'Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby.';
 
 const schema = generateObjSchema();
 
@@ -34,9 +34,11 @@ module.exports = {
       if (literalChildValue && emojiRegex().test(literalChildValue.value)) {
         const rolePropValue = getLiteralPropValue(getProp(node.attributes, 'role'));
         const ariaLabelProp = getProp(node.attributes, 'aria-label');
+        const arialLabelledByProp = getProp(node.attributes, 'aria-labelledby');
+        const hasLabel = ariaLabelProp !== undefined || arialLabelledByProp !== undefined;
         const isSpan = elementType(node) === 'span';
 
-        if (ariaLabelProp === 'undefined' || rolePropValue !== 'img' || isSpan === false) {
+        if (hasLabel === false || rolePropValue !== 'img' || isSpan === false) {
           context.report({
             node,
             message: errorMessage,