Use onBlur instead of onChange

Author: Ethan Cohen

index.js

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

lib/rules/use-onblur-not-onchange.js

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Enforce usage of onBlur over onChange for accessibility.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+var hasAttribute = require('../hasAttribute');
+
+module.exports = function(context) {
+
+  return {
+    JSXOpeningElement: function(node) {
+      var hasOnChange = hasAttribute(node.attributes, 'onChange');
+      var hasOnBlur = hasAttribute(node.attributes, 'onBlur');
+
+      if (Boolean(hasOnChange) === true && hasOnBlur === false) {
+        context.report({
+          node: node,
+          message: 'onBlur must be used instead of onchange, unless absolutely necessary and it ' +
+            'causes no negative consequences for keyboard only or screen reader users.'
+        });
+      }
+    }
+  };
+};
+
+module.exports.schema = [{
+  type: 'object'
+}];

tests/lib/rules/use-onblur-not-onchange.js

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Enforce img tags use alt attribute.
+ * @author Ethan Cohen
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/use-onblur-not-onchange');
+var RuleTester = require('eslint').RuleTester;
+
+var parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+
+var expectedError = {
+  message: 'onBlur must be used instead of onchange, unless absolutely necessary and it ' +
+    'causes no negative consequences for keyboard only or screen reader users.',
+  type: 'JSXOpeningElement'
+};
+
+ruleTester.run('use-onblur-not-onchange', rule, {
+  valid: [
+    {code: '<div onBlur={() => {}} />;', parserOptions: parserOptions},
+    {code: '<div />;', parserOptions: parserOptions},
+    {code: '<div onBlur={() => {}} onChange={() => {}} />;', parserOptions: parserOptions}
+  ],
+  invalid: [
+    {code: '<div onChange={() => {}} />;', errors: [expectedError], parserOptions: parserOptions},
+    {code: '<input onChange={() => {}} />', errors: [expectedError], parserOptions: parserOptions}
+  ]
+});