eslint-plugin-smarthr 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.10.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.9.0...eslint-plugin-smarthr-v1.10.0) (2025-10-01)
+
+
+### Features
+
+* セル内のCheckboxおよびRadioButtonを禁止するルールを追加 ([#792](https://github.com/kufu/tamatebako/issues/792)) ([17ab980](https://github.com/kufu/tamatebako/commit/17ab98018c81a81376ac213e3309e60080ed9326))
+
 ## [1.9.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.8.1...eslint-plugin-smarthr-v1.9.0) (2025-09-08)
 
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=22.17.1"
+    "node": ">=22.18.0"
   },
   "scripts": {
     "test": "jest"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "de243698bc64eeb8c3ac0592d96d129eabe1847a"
+  "gitHead": "343b735f1202c536e8bf9c897fdb4d5289455b8e"
 }

package/rules/a11y-prohibit-checkbox-or-radio-in-table-cell/README.md

@@ -0,0 +1,40 @@
+# smarthr/a11y-prohibit-checkbox-or-radio-in-table-cell
+
+- テーブルセル（Th, Td）内に Checkbox, RadioButton を配置することを禁止するルールです
+  - SmartHR UI には、デフォルトでアクセシブルネームを設定する TdCheckbox, ThCheckbox, TdRadioButton といったより適切なコンポーネントが用意されています
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-prohibit-checkbox-or-radio-in-table-cell': [
+      'error', // 'warn', 'off'
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+<Td>
+  <Checkbox name="foo" />
+</Td>
+
+<Th>
+  <Checkbox name="bar" />
+</Th>
+
+<Td>
+  <RadioButton name="baz" />
+</Td>
+```
+
+## ✅ Correct
+
+```jsx
+<TdCheckbox name="foo" />
+<ThCheckbox name="bar" />
+<TdRadioButton name="baz" />
+```

package/rules/a11y-prohibit-checkbox-or-radio-in-table-cell/index.js

@@ -0,0 +1,71 @@
+const findClosestThFromAncestor = (node) => {
+  if (node.type === 'JSXElement' && node.openingElement.name.name === 'Th') {
+    return node
+  }
+  if (node.parent) {
+    return findClosestThFromAncestor(node.parent)
+  }
+}
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    schema: [],
+    messages: {
+      default: '{{cell}} の子孫に {{component}} を置くことはできません。代わりに {{preferred}} を使用してください。',
+    },
+  },
+  create(context) {
+    const sourceCode = context.sourceCode
+
+    return {
+      'JSXElement[openingElement.name.name=/Td$/] JSXElement[openingElement.name.name=/Check(b|B)ox$/]': (node) => {
+        context.report({
+          node,
+          messageId: 'default',
+          data: {
+            cell: 'Td',
+            component: 'Checkbox',
+            preferred: 'TdCheckbox',
+          },
+        })
+      },
+      'JSXElement[openingElement.name.name=/Td$/] JSXElement[openingElement.name.name=/RadioButton$/]': (node) => {
+        context.report({
+          node,
+          messageId: 'default',
+          data: {
+            cell: 'Td',
+            component: 'RadioButton',
+            preferred: 'TdRadioButton',
+          },
+        })
+      },
+      'JSXElement[openingElement.name.name=/Th$/] JSXElement[openingElement.name.name=/Check(b|B)ox$/]': (node) => {
+        context.report({
+          node,
+          messageId: 'default',
+          data: {
+            cell: 'Th',
+            component: 'Checkbox',
+            preferred: 'ThCheckbox',
+          },
+          *fix(fixer) {
+            const th = findClosestThFromAncestor(node)
+            if (th) {
+              const thCheckbox = sourceCode.getText(node).replace(/<Check(b|B)ox/, '<ThCheckbox')
+              yield fixer.insertTextAfter(th, thCheckbox)
+              yield fixer.remove(th)
+            }
+          },
+        })
+      },
+    }
+  },
+}
+
+module.exports.schema = []

package/test/a11y-prohibit-checkbox-or-radio-in-table-cell.js

@@ -0,0 +1,73 @@
+const rule = require('../rules/a11y-prohibit-checkbox-or-radio-in-table-cell')
+
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+ruleTester.run('a11y-prohibit-checkbox-or-radio-in-table-cell', rule, {
+  valid: ['<TdCheckbox />', '<ThCheckbox />', '<TdRadioButton />', '<Td>hello</Td>', '<Th>hello</Th>'],
+  invalid: [
+    {
+      code: `<Td><Checkbox /></Td>`,
+      errors: [{ message: 'Td の子孫に Checkbox を置くことはできません。代わりに TdCheckbox を使用してください。' }],
+    },
+    {
+      code: `<Th><Checkbox /></Th>`,
+      output: `<ThCheckbox />`,
+      errors: [{ message: 'Th の子孫に Checkbox を置くことはできません。代わりに ThCheckbox を使用してください。' }],
+    },
+    {
+      code: `<Th><Checkbox id="my-checkbox" name="agree" error /></Th>`,
+      output: `<ThCheckbox id="my-checkbox" name="agree" error />`,
+      errors: [{ message: 'Th の子孫に Checkbox を置くことはできません。代わりに ThCheckbox を使用してください。' }],
+    },
+    {
+      code: `<Td><RadioButton /></Td>`,
+      errors: [{ message: 'Td の子孫に RadioButton を置くことはできません。代わりに TdRadioButton を使用してください。' }],
+    },
+
+    {
+      code: `<Td><div><div><Checkbox /></div></div></Td>`,
+      errors: [{ message: 'Td の子孫に Checkbox を置くことはできません。代わりに TdCheckbox を使用してください。' }],
+    },
+    {
+      code: `<Td><><><Checkbox /></></></Td>`,
+      errors: [{ message: 'Td の子孫に Checkbox を置くことはできません。代わりに TdCheckbox を使用してください。' }],
+    },
+
+    {
+      code: `<CustomTd><CustomCheckbox /></CustomTd>`,
+      errors: [{ message: 'Td の子孫に Checkbox を置くことはできません。代わりに TdCheckbox を使用してください。' }],
+    },
+    {
+      code: `<CustomTh><CustomCheckbox /></CustomTh>`,
+      output: null,
+      errors: [{ message: 'Th の子孫に Checkbox を置くことはできません。代わりに ThCheckbox を使用してください。' }],
+    },
+    {
+      code: `<CustomTd><CustomRadioButton /></CustomTd>`,
+      errors: [{ message: 'Td の子孫に RadioButton を置くことはできません。代わりに TdRadioButton を使用してください。' }],
+    },
+    {
+      name: "https://smarthr.atlassian.net/browse/A11Y2-23",
+      code: `
+        <CheckTd onClick={() => toggleChecked(crewEvaluation.id)}>
+          <CheckBox
+            name="checkEvaluation"
+            checked={checked}
+            onChange={() => toggleChecked(crewEvaluation.id)}
+          />
+        </CheckTd> 
+      `,
+      errors: [{ message: 'Td の子孫に Checkbox を置くことはできません。代わりに TdCheckbox を使用してください。' }],
+    }
+  ],
+})