Merge pull request #136 from evcohen/ethanc/accessible-emoji

[new] - Add accessible-emoji rule.

Author: jessebeach

README.md

@@ -82,6 +82,7 @@ You can also enable all the recommended rules at once. Add `plugin:jsx-a11y/reco
 
 ## Supported Rules
 
+- [accessible-emoji](docs/rules/accessible-emoji): Enforce emojis are wrapped in <span> and provide screenreader access.
 - [anchor-has-content](docs/rules/anchor-has-content.md): Enforce all anchors to contain accessible content.
 - [aria-props](docs/rules/aria-props.md): Enforce all `aria-*` props are valid.
 - [aria-proptypes](docs/rules/aria-proptypes.md): Enforce ARIA state and property values are valid.

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

@@ -0,0 +1,51 @@
+/**
+ * @fileoverview Enforce <marquee> elements are not used.
+ * @author Ethan Cohen
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import rule from '../../../src/rules/accessible-emoji';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby.',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('accessible-emoji', rule, {
+  valid: [
+    { code: '<div />;', parserOptions },
+    { code: '<span />', parserOptions },
+    { 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

@@ -0,0 +1,23 @@
+# accessible-emoji
+
+Emojis have become a common way of communicating content to the end user. To a person using a screenreader, however, he/she may not be aware that this content is there at all. By wrapping the emoji in a `<span>`, giving it the `role="img"`, and providing a useful description in `aria-label`, the screenreader will treat the emoji as an image in the accessibility tree with an accessible name for the end user.
+
+#### Resources
+1. [Lèonie Watson](http://tink.uk/accessible-emoji/)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<span role="img" aria-label="Snowman">&#9731;</span>
+<span role="img" aria-label="Panda">🐼</span>
+<span role="img" aria-labelledby="panda1">🐼</span> 
+```
+
+### Fail
+```jsx
+<span>🐼</span>
+<i role="img" aria-label="Panda">🐼</i>
+```

package.json

@@ -46,6 +46,7 @@
   "license": "MIT",
   "dependencies": {
     "damerau-levenshtein": "^1.0.0",
+    "emoji-regex": "^6.1.0",
     "jsx-ast-utils": "^1.0.0",
     "object-assign": "^4.0.1"
   },

src/index.js

@@ -2,6 +2,7 @@
 
 module.exports = {
   rules: {
+    'accessible-emoji': require('./rules/accessible-emoji'),
     'anchor-has-content': require('./rules/anchor-has-content'),
     'aria-props': require('./rules/aria-props'),
     'aria-proptypes': require('./rules/aria-proptypes'),
@@ -36,6 +37,7 @@ module.exports = {
         },
       },
       rules: {
+        'jsx-a11y/accessible-emoji': 'error',
         'jsx-a11y/anchor-has-content': 'error',
         'jsx-a11y/aria-props': 'error',
         'jsx-a11y/aria-proptypes': 'error',

src/rules/accessible-emoji.js

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview Enforce emojis are wrapped in <span> and provide screenreader access.
+ * @author Ethan Cohen
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import emojiRegex from 'emoji-regex';
+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 an accessible description with aria-label or aria-labelledby.';
+
+const schema = generateObjSchema();
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: context => ({
+    JSXOpeningElement: (node) => {
+      const literalChildValue = node.parent.children.find(
+        child => child.type === 'Literal',
+      );
+
+      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 (hasLabel === false || rolePropValue !== 'img' || isSpan === false) {
+          context.report({
+            node,
+            message: errorMessage,
+          });
+        }
+      }
+    },
+  }),
+};

yarn.lock

@@ -1038,6 +1038,10 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
+emoji-regex@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.0.tgz#d14ef743a7dfa6eaf436882bd1920a4aed84dd94"
+
 "errno@>=0.1.1 <0.2.0-0":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"