Merge branch 'master' into greenkeeper/jscodeshift-0.6.0

Author: jessebeach

__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),
 });

package.json

@@ -46,7 +46,7 @@
     "eslint-plugin-import": "^2.13.0",
     "estraverse": "^4.2.0",
     "expect": "^21.2.1",
-    "flow-bin": "^0.87.0",
+    "flow-bin": "^0.88.0",
     "in-publish": "^2.0.0",
     "jest": "^21.2.1",
     "jscodeshift": "^0.6.0",
@@ -66,7 +66,7 @@
     "ast-types-flow": "^0.0.7",
     "axobject-query": "^2.0.2",
     "damerau-levenshtein": "^1.0.4",
-    "emoji-regex": "^6.5.1",
+    "emoji-regex": "^7.0.2",
     "has": "^1.0.3",
     "jsx-ast-utils": "^2.0.1"
   },

src/index.js

@@ -76,7 +76,7 @@ module.exports = {
             ],
           },
         ],
-        'jsx-a11y/label-has-for': 'error',
+        'jsx-a11y/label-has-for': 'off',
         'jsx-a11y/label-has-associated-control': 'error',
         'jsx-a11y/media-has-caption': 'error',
         'jsx-a11y/mouse-events-have-key-events': 'error',

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');