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

jsx-eslint · Dec 30, 2018 · 33a1f94 · 33a1f94
1 parent 4186f91
commit 33a1f94
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/__tests__/src/rules/accessible-emoji-test.js b/__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),
 });
diff --git a/src/rules/accessible-emoji.js b/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');