fix: jsx-a11y/label-has-associated-control. Fixed #228

Alos update react example to use functional component

browser.js

@@ -80,6 +80,14 @@ module.exports = {
     camelcase: 'off',
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.tsx'] }],
     'react/require-default-props': 0,
+    'jsx-a11y/label-has-associated-control': [
+      2,
+      {
+        required: {
+          some: ['nesting', 'id'],
+        },
+      },
+    ],
     'react-hooks/rules-of-hooks': 'warn',
     'react-hooks/exhaustive-deps': 'warn',
     'react/jsx-props-no-spreading': 0,

tests/react.js

@@ -1,29 +1,20 @@
 module.exports = () => `
-import React, { Component } from 'react';
+import React from 'react';
 import { Link } from '@reach/router';
 
-class Patient extends Component {
-  render({ a }) {
-    return (
-      <>
+export default function Patient({ a }) {
+  return (
+    <>
         <div>Hello {a}!</div>
         <nav>
           <Link to="/">Home</Link>
         </nav>
+        <label htmlFor="a">A</label>
+        <input id="a"/>
       </>
-    );
-  }
-  displayName : 'Hello'
+  )
 }
 
-const loopy = () => {
-  const arr = [];
-  for (let index = 0; index < arr.length; index++) {
-	  const element = arr[index];
-  }
-}
-
-// react/require-default-props
 Patient.propTypes = {
   a: PropTypes.string,
   b: PropTypes.array,

tests/test.js

@@ -60,6 +60,7 @@ describe('rules', () => {
     expect(find(errors, { ruleId: 'react/require-default-props' })).toBeUndefined();
     expect(find(errors, { ruleId: 'jsx-a11y/anchor-is-valid' })).toBeUndefined();
     expect(find(errors, { ruleId: 'unicorn/no-for-loop' })).toBeUndefined();
+    expect(find(errors, { ruleId: 'jsx-a11y/label-has-associated-control' })).toBeUndefined();
   });
 
   test('typescript', () => {
@@ -72,7 +73,6 @@ describe('rules', () => {
 
   test('workflow', () => {
     const errors = runEslint(workflowString(), workflowConf, 'example.tsx');
-
     expect(find(errors, { ruleId: 'import/no-unresolved' })).toBeUndefined();
   });
 });