[fix] - Purely decorative emojis do not need descriptions.

Author: beefancohen

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

@@ -34,6 +34,10 @@ ruleTester.run('accessible-emoji', rule, {
     { code: '<span role="img" aria-labelledby="id1">&#9731;</span>' },
     { code: '<span role="img" aria-labelledby="id1" aria-label="Snowman">&#9731;</span>' },
     { code: '<span>{props.emoji}</span>' },
+    { code: '<span aria-hidden>{props.emoji}</span>' },
+    { code: '<span aria-hidden="true">🐼</span>' },
+    { code: '<span aria-hidden>🐼</span>' },
+    { code: '<div aria-hidden="true">🐼</div>' },
   ].map(parserOptionsMapper),
   invalid: [
     { code: '<span>🐼</span>', errors: [expectedError] },
@@ -42,5 +46,6 @@ ruleTester.run('accessible-emoji', rule, {
     { code: '<i role="img" aria-label="Panda face">🐼</i>', errors: [expectedError] },
     { code: '<i role="img" aria-labelledby="id1">🐼</i>', errors: [expectedError] },
     { code: '<Foo>🐼</Foo>', errors: [expectedError] },
+    { code: '<span aria-hidden="false">🐼</span>', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });

src/rules/accessible-emoji.js

@@ -10,6 +10,7 @@
 import emojiRegex from 'emoji-regex';
 import { getProp, getLiteralPropValue, elementType } from 'jsx-ast-utils';
 import { generateObjSchema } from '../util/schemas';
+import isHiddenFromScreenReader from '../util/isHiddenFromScreenReader';
 
 const errorMessage = 'Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby.';
 
@@ -28,6 +29,11 @@ module.exports = {
       const literalChildValue = node.parent.children.find(child => child.type === 'Literal' || child.type === 'JSXText');
 
       if (literalChildValue && emojiRegex().test(literalChildValue.value)) {
+        const elementIsHidden = isHiddenFromScreenReader(elementType(node), node.attributes);
+        if (elementIsHidden) {
+          return; // emoji is decorative
+        }
+
         const rolePropValue = getLiteralPropValue(getProp(node.attributes, 'role'));
         const ariaLabelProp = getProp(node.attributes, 'aria-label');
         const arialLabelledByProp = getProp(node.attributes, 'aria-labelledby');