eslint-plugin-smarthr 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.11.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.10.0...eslint-plugin-smarthr-v1.11.0) (2025-10-01)
+
+
+### Features
+
+* a11y-input-in-form-controlのaria-label,aria-labelledbyが設定されている場合、FormControlでラップしなくてもよしとする ([#795](https://github.com/kufu/tamatebako/issues/795)) ([443892f](https://github.com/kufu/tamatebako/commit/443892ffb39732157d77a179484da3f529e43885))
+
+## [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.11.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": "5877e7cf1fee3324112f56f65c5aa2f753dd2aca"
 }

package/rules/a11y-input-in-form-control/index.js

@@ -77,8 +77,11 @@ module.exports = {
             for (const i of node.attributes) {
               if (i.name) {
                 // HINT: idが設定されている場合、htmlForでlabelと紐づく可能性が高いため無視する
+                // aria-label, aria-labelledbyが設定されている場合は疑似ラベルが設定されているため許容する
                 switch (i.name.name) {
                   case 'id':
+                  case 'aria-label':
+                  case 'aria-labelledby':
                     isPseudoLabel = true
                     break
                   case 'type':

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-input-in-form-control.js

@@ -111,6 +111,8 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<Fieldset><HogeCheckBoxs /></Fieldset>' },
     { code: '<Fieldset><HogeCheckBoxes /></Fieldset>' },
     { code: '<HogeFormControl>{ dateInput ? <DateInput /> : <Input /> }</HogeFormControl>'},
+    { code: '<Input aria-label="hoge" />' },
+    { code: '<Select aria-labelledby="hoge" />' },
   ],
   invalid: [
     { code: `<input />`, errors: [ { message: noLabeledInput('input') } ] },

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 を使用してください。' }],
+    }
+  ],
+})