fix: allow labels to satisfy htmlFor a11y requirement instead of both…

… nesting and htmlFor (#8)

.eslintrc.js

@@ -28,6 +28,13 @@ module.exports = {
       }
     ],
     'arrow-parens': 'off',
+    'jsx-a11y/label-has-associated-control': ['error', {
+      labelComponents: [],
+      labelAttributes: [],
+      controlComponents: [],
+      assert: 'htmlFor',
+      depth: 25
+    }],
     'react/jsx-props-no-spreading': 'off',
     'react/jsx-one-expression-per-line': 'off',
     'react/destructuring-assignment': 'off',

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "lint": "./node_modules/.bin/eslint .",
-    "test": "./node_modules/.bin/eslint test.js"
+    "test": "./node_modules/.bin/eslint test.jsx"
   },
   "publishConfig": {
     "access": "public"

test.js → test.jsx

@@ -1,3 +1,4 @@
+import React from 'react'; // eslint-disable-line import/no-unresolved
 /* eslint-disable no-unused-vars */
 
 // Tests for custom rules in .eslintrc.js
@@ -10,6 +11,15 @@ class MethodDoesNotUseThis {
   foo() {
     const bar = 'hah';
   }
+
+  render() {
+    return (
+      <>
+        <label htmlFor="the-input">The input</label>
+        <input id="the-input" type="text" value="hi" />
+      </>
+    );
+  }
 }
 
 // disable no-plusplus