Merge pull request #82 from ofk/fix/label-assert

Fix best practices of label assert
ofk · Aug 3, 2024 · 0f4ead7 · 0f4ead7
2 parents bc09a0d + 0317443
commit 0f4ead7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/best-practices.cjs b/best-practices.cjs
@@ -13,6 +13,19 @@ module.exports = {
         'import/no-default-export': 'error',
         'import/prefer-default-export': 'off',
 
+        // Fix airbnb default rule.
+        // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/label-has-associated-control.md
+        'jsx-a11y/label-has-associated-control': [
+          'error',
+          {
+            assert: 'either', // changed
+            controlComponents: [],
+            depth: 25,
+            labelAttributes: [],
+            labelComponents: [],
+          },
+        ],
+
         // Use console.{warn,error} intentionally. So suppress the warning.
         // https://eslint.org/docs/rules/no-console
         'no-console': [

diff --git a/test/javascript/app.jsx b/test/javascript/app.jsx
@@ -16,6 +16,9 @@ const App = ({ name, onButtonClick }) => {
     <div>
       <Text color={text ? 'red' : undefined}>{text || 'Push button'}</Text>
       <Button onClick={onClick}>Hello</Button>
+      <label>
+        <input type="checkbox" /> checkbox
+      </label>
     </div>
   );
 };

diff --git a/test/typescript/app.tsx b/test/typescript/app.tsx
@@ -17,6 +17,9 @@ const App: React.FC<AppProps> = ({ name, onButtonClick }) => {
     <div>
       <Text color={text ? 'red' : undefined}>{text ?? 'Push button'}</Text>
       <Button onClick={onClick}>Hello</Button>
+      <label>
+        <input type="checkbox" /> checkbox
+      </label>
     </div>
   );
 };