Add mouseEvents require associated keyEvents rule.

Author: Ethan Cohen

index.js

@@ -3,7 +3,8 @@
 module.exports = {
   rules: {
     'img-uses-alt': require('./lib/rules/img-uses-alt'),
-    'onClick-uses-role': require('./lib/rules/onClick-uses-role')
+    'onClick-uses-role': require('./lib/rules/onClick-uses-role'),
+    'mouseEvents-require-keyEvents': require('./lib/rules/mouseEvents-require-keyEvents')
   },
   configs: {
     recommended: {

lib/rules/img-uses-alt.js

@@ -14,6 +14,11 @@ module.exports = function(context) {
 
   return {
     JSXOpeningElement: function(node) {
+      var type = node.name.name;
+      if (type.toUpperCase() !== 'IMG') {
+        return;
+      }
+
       var hasAltProp = hasAttribute(node.attributes, 'alt');
 
       if (hasAltProp === false) {

lib/rules/mouseEvents-require-keyEvents.js

@@ -0,0 +1,48 @@
+/**
+ * @fileoverview Enforce onmouseover/onmouseout are accompanied by onfocus/onblur.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+var hasAttribute = require('../hasAttribute');
+
+module.exports = function(context) {
+
+  return {
+    JSXOpeningElement: function(node) {
+      var attributes = node.attributes;
+
+      // Check onmouseover / onfocus pairing.
+      var hasOnMouseOver = hasAttribute(attributes, 'onMouseOver');
+      if (Boolean(hasOnMouseOver) === true) {
+        var hasOnFocus = hasAttribute(attributes, 'onFocus');
+        if (hasOnFocus === false) {
+          context.report({
+            node: node,
+            message: 'onMouseOver must be accompanied by onFocus for accessibility.'
+          });
+        }
+      }
+
+      // Checkout onmouseout / onblur pairing
+      var hasOnMouseOut = hasAttribute(attributes, 'onMouseOut');
+      if (Boolean(hasOnMouseOut) === true) {
+        var hasOnBlur = hasAttribute(attributes, 'onBlur');
+        if (hasOnBlur === false) {
+          context.report({
+            node: node,
+            message: 'onMouseOut must be accompanied by onBlur for accessibility.'
+          });
+        }
+      }
+    }
+  };
+};
+
+module.exports.schema = [{
+  type: 'object'
+}];

tests/lib/rules/img-uses-alt.js

@@ -36,7 +36,8 @@ ruleTester.run('img-uses-alt', rule, {
     {code: '<img ALT="foo" />;', parserOptions: parserOptions},
     {code: '<img ALt="foo" />;', parserOptions: parserOptions},
     {code: '<img {...this.props} alt="foo" />', parserOptions: parserOptions},
-    {code: '<img {...this.props} />', parserOptions: parserOptions}
+    {code: '<img {...this.props} />', parserOptions: parserOptions},
+    {code: '<a />', parserOptions: parserOptions}
   ],
   invalid: [
     {code: '<img />;', errors: [expectedError], parserOptions: parserOptions},

tests/lib/rules/mouseEvents-require-keyEvents.js

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview Enforce img tags use alt attribute.
+ * @author Ethan Cohen
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/mouseEvents-require-keyEvents');
+var RuleTester = require('eslint').RuleTester;
+
+var parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+
+var mouseOverError = {
+  message: 'onMouseOver must be accompanied by onFocus for accessibility.',
+  type: 'JSXOpeningElement'
+};
+var mouseOutError = {
+  message: 'onMouseOut must be accompanied by onBlur for accessibility.',
+  type: 'JSXOpeningElement'
+};
+
+ruleTester.run('mouseEvents-require-keyEvents', rule, {
+  valid: [
+    {code: '<div onMouseOver={() => void 0} onFocus={() => void 0} />;', parserOptions: parserOptions},
+    {code: '<div />;', parserOptions: parserOptions},
+    {code: '<div onMouseOut={() => void 0} onBlur={() => void 0} />', parserOptions: parserOptions}
+  ],
+  invalid: [
+    {code: '<div onMouseOver={() => void 0} />;', errors: [mouseOverError], parserOptions: parserOptions},
+    {code: '<div onMouseOut={() => void 0} />', errors: [mouseOutError], parserOptions: parserOptions}
+  ]
+});