Added tests, and switched rule from erroring to warning

Author: Courtney Nguyen

__tests__/src/rules/no-disabled-test.js

@@ -0,0 +1,51 @@
+/* eslint-env jest */
+/**
+ * @fileoverview Enforce autoFocus prop is not used.
+ * @author Courtney Nguyen <@courtyenn>
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import rule from '../../../src/rules/no-disabled';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedWarning = {
+  message: 'The disabled prop removes the element from being detected by screen readers.',
+  type: 'JSXAttribute',
+};
+
+ruleTester.run('no-disabled', rule, {
+  valid: [
+    { code: '<div />' },
+    { code: '<div disabled />' },
+    { code: '<input />' },
+    { code: '<button />' },
+    { code: '<select />' },
+    { code: '<textarea />' },
+    { code: '<option />' },
+    { code: '<command />' },
+    { code: '<fieldset />' },
+    { code: '<keygen />' },
+    { code: '<optgroup />' },
+  ].map(parserOptionsMapper),
+  invalid: [
+    { code: '<input disabled />', errors: [expectedWarning] },
+    { code: '<button disabled />', errors: [expectedWarning] },
+    { code: '<select disabled />', errors: [expectedWarning] },
+    { code: '<textarea disabled />', errors: [expectedWarning] },
+    { code: '<option disabled />', errors: [expectedWarning] },
+    { code: '<command disabled />', errors: [expectedWarning] },
+    { code: '<fieldset disabled />', errors: [expectedWarning] },
+    { code: '<keygen disabled />', errors: [expectedWarning] },
+    { code: '<optgroup disabled />', errors: [expectedWarning] },
+  ].map(parserOptionsMapper),
+});

src/index.js

@@ -26,6 +26,7 @@ module.exports = {
     'mouse-events-have-key-events': require('./rules/mouse-events-have-key-events'),
     'no-access-key': require('./rules/no-access-key'),
     'no-autofocus': require('./rules/no-autofocus'),
+    'no-disabled': require('./rules/no-disabled'),
     'no-distracting-elements': require('./rules/no-distracting-elements'),
     'no-interactive-element-to-noninteractive-role': require('./rules/no-interactive-element-to-noninteractive-role'),
     'no-noninteractive-element-interactions': require('./rules/no-noninteractive-element-interactions'),
@@ -113,6 +114,7 @@ module.exports = {
         'jsx-a11y/mouse-events-have-key-events': 'error',
         'jsx-a11y/no-access-key': 'error',
         'jsx-a11y/no-autofocus': 'error',
+        'jsx-a11y/no-disabled': 'warn',
         'jsx-a11y/no-distracting-elements': 'error',
         'jsx-a11y/no-interactive-element-to-noninteractive-role': [
           'error',
@@ -270,6 +272,7 @@ module.exports = {
         'jsx-a11y/mouse-events-have-key-events': 'error',
         'jsx-a11y/no-access-key': 'error',
         'jsx-a11y/no-autofocus': 'error',
+        'jsx-a11y/no-disabled': 'warn',
         'jsx-a11y/no-distracting-elements': 'error',
         'jsx-a11y/no-interactive-element-to-noninteractive-role': 'error',
         'jsx-a11y/no-noninteractive-element-interactions': [

src/rules/no-disabled.js

@@ -1,56 +1,50 @@
 /**
- * @fileoverview Enforce disabled prop is not used.
- * @author Courtney Nguyen <@courtyen>
+ * @fileoverview Rule to flag 'disabled' prop
+ * @author Courtney Nguyen <@courtyenn>
  */
 
 // ----------------------------------------------------------------------------
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import { propName, elementType } from "jsx-ast-utils";
-import { generateObjSchema } from "../util/schemas";
+import { propName, elementType } from 'jsx-ast-utils';
 
-const errorMessage = "The disabled prop should not be used, as it can reduce usability and accessibility for users.";
+const warningMessage = 'The disabled prop removes the element from being detected by screen readers.';
 
 const DEFAULT_ELEMENTS = [
-  "button",
-  "command",
-  "fieldset",
-  "keygen",
-  "optgroup",
-  "option",
-  "select",
-  "textarea",
-  "input",
+  'button',
+  'command',
+  'fieldset',
+  'keygen',
+  'optgroup',
+  'option',
+  'select',
+  'textarea',
+  'input',
 ];
 
-const schema = generateObjSchema({
-  ignoreNonDOM: {
-    type: "boolean",
-    default: false,
-  },
-});
-
 export default {
   meta: {
+    type: 'suggestion',
     docs: {
-      url: "https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-disabled.md",
+      recommended: false,
+      url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/no-disabled.md',
     },
-    schema: [schema],
+    schema: [],
   },
 
   create: (context) => ({
     JSXAttribute: (attribute) => {
-      // Only monitor elements with "disabled".
+      // Only monitor eligible elements for "disabled".
       const type = elementType(attribute.parent);
       if (!DEFAULT_ELEMENTS.includes(type)) {
         return;
       }
 
-      if (propName(attribute) === "disabled") {
+      if (propName(attribute) === 'disabled') {
         context.report({
           node: attribute,
-          message: errorMessage,
+          message: warningMessage,
         });
       }
     },