Initial commit for table-uses-caption.

Author: beefancohen

docs/rules/table-uses-caption.md

@@ -0,0 +1 @@
+# table-uses-caption

package.json

@@ -1,5 +1,6 @@
 {
   "name": "eslint-plugin-jsx-a11y",
+
   "version": "0.4.2",
   "description": "A static analysis linter of jsx and their accessibility with screen readers.",
   "keywords": [

src/index.js

@@ -9,7 +9,8 @@ module.exports = {
     'use-onblur-not-onchange': require('./rules/use-onblur-not-onchange'),
     'no-access-key': require('./rules/no-access-key'),
     'label-uses-for': require('./rules/label-uses-for'),
-    'no-hash-href': require('./rules/no-hash-href')
+    'no-hash-href': require('./rules/no-hash-href'),
+    'table-uses-caption': require('./rules/table-uses-caption')
   },
   configs: {
     recommended: {
@@ -26,7 +27,8 @@ module.exports = {
         "jsx-a11y/use-onblur-not-onchange": 2,
         "jsx-a11y/no-access-key": 2,
         "jsx-a11y/label-uses-for": 2,
-        "jsx-a11y/no-hash-href": 2
+        "jsx-a11y/no-hash-href": 2,
+        "jsx-a11y/table-uses-caption": 2
       }
     }
   }

src/rules/table-uses-caption.js

@@ -0,0 +1,51 @@
+/**
+ * @fileoverview Enforce table element has child of caption with value.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import hasChild from '../util/hasChild';
+
+const errorMessage = type => `${type} elements must have a caption element as child to ` +
+  `programatically associate captions for data tables.`;
+
+module.exports = context => ({
+  JSXOpeningElement: node => {
+    const typeCheck = [ 'table' ].concat(context.options[0]);
+    const nodeType = node.name.name;
+
+    // Only check 'table' elements and custom types.
+    if (typeCheck.indexOf(nodeType) === -1) {
+      return;
+    }
+
+    const hasCaption = hasChild(node.parent.children, 'caption');
+
+    if (hasCaption === false) {
+      context.report({
+        node,
+        message: errorMessage(nodeType)
+      });
+    }
+  }
+});
+
+module.exports.schema = [
+  {
+    "oneOf": [
+      { "type": "string" },
+      {
+        "type": "array",
+        "items": {
+          "type": "string"
+        },
+        "minItems": 1,
+        "uniqueItems": true
+      }
+    ]
+  }
+];

src/util/hasChild.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * Returns the value of the child element or false, indicating the child element
+ * is not present on the JSX opening element.
+ *
+ * This treats undefined values as missing props, as they will not be used for
+ * rendering on elements that live closest to the DOM (pure html JSX elements).
+ */
+const hasChild = (children, target) => (
+  children.some(child => child.openingElement.name.name === target && child.children.length > 0)
+);
+
+export default hasChild;

tests/src/rules/table-uses-caption.js

@@ -0,0 +1,56 @@
+/**
+ * @fileoverview Enforce table element has child of caption with value.
+ * @author Ethan Cohen
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import rule from '../../../src/rules/table-uses-caption';
+import { RuleTester } from 'eslint';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: `table elements must have a caption element as child to ` +
+  `programatically associate captions for data tables.`,
+  type: 'JSXOpeningElement'
+};
+
+// const string = [ 'Avatar' ];
+// const array = [ [ 'Thumbnail', 'Image' ] ];
+
+// const customError = type => ({
+//   message: `${type} elements must have an alt tag.`,
+//   type: 'JSXOpeningElement'
+// });
+
+ruleTester.run('table-uses-caption', rule, {
+  valid: [
+    // DEFAULT ELEMENT 'table' TESTS
+    { code: '<table><caption>Cool data</caption></table>;', parserOptions },
+    { code: '<table><caption>`data of ${type}`</caption></table>;', parserOptions },
+    { code: '<table><caption><span>FOO</span></caption></table>;', parserOptions },
+    { code: '<table><th></th><tbody></tbody><caption><span>FOO</span></caption></table>;', parserOptions }
+  ],
+  invalid: [
+    { code: '<table><caption></caption></table>;', errors: [ expectedError ], parserOptions },
+    { code: '<table></table>;', errors: [ expectedError ], parserOptions },
+    { code: '<table><Caption>abc</Caption></table>;', errors: [ expectedError ], parserOptions },
+    { code: '<table><th>1</th><tbody></tbody></table>;', errors: [ expectedError ], parserOptions }
+  ]
+});