eslint-plugin-smarthr 6.0.2 → 6.2.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.
 
+## [6.2.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.1.0...eslint-plugin-smarthr-v6.2.0) (2026-01-29)
+
+
+### Features
+
+* **best-practice-for-interactive-element:** 特定の要素・コンポーネントに対してrole属性の設定を共用する条件を追加 ([#1031](https://github.com/kufu/tamatebako/issues/1031)) ([1bf4c67](https://github.com/kufu/tamatebako/commit/1bf4c679e767edf169de53c89d7ac69c4873b1e1))
+
+## [6.1.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.0.2...eslint-plugin-smarthr-v6.1.0) (2026-01-29)
+
+
+### Features
+
+* **best-practice-for-interactive-element:** delegateでイベントを受け取ることを明確にするようコード修正を促すように修正 ([#1027](https://github.com/kufu/tamatebako/issues/1027)) ([476c858](https://github.com/kufu/tamatebako/commit/476c858d87a581a33e764ac1aa9aafee29805217))
+
 ## [6.0.2](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.0.1...eslint-plugin-smarthr-v6.0.2) (2026-01-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "6.0.2",
+  "version": "6.2.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "347e704bdd63fa55699762f85752ad791e4f6b3d"
+  "gitHead": "aed30ef2313795136134408db0ab4fb88dd49d02"
 }

package/rules/best-practice-for-interactive-element/README.md

@@ -6,6 +6,7 @@
 - インタラクティブな要素にrole属性が設定されている場合エラーとします
 - インタラクティブではないコンポーネントに対して、デフォルトで用意されているonXxx形式の属性を設定しようとするとエラーにします
   - 例: `CrewDetail` コンポーネントに `onChange` を設定するとエラー、 `onChangeName` ならOK
+  - 子要素で発生したイベントを親要素で処理すること(delegate)が目的の場合、イベントハンドラがdelegateを取り扱っていることがわかるように記述することを促します
 
 ## インタラクティブな要素・コンポーネントとは何か
 
@@ -39,6 +40,7 @@
 - Date
 - DatetimeLocal
 - Dialog
+- DisclosureTrigger
 - DropZone
 - FormControl
 - InputFile
@@ -125,6 +127,42 @@ additionalInteractiveComponentRegexオプションに独自コンポーネント
 - onSelect
 - onSubmit
 
+#### 子要素で発生したイベントを親要素で処理する場合(delegateしたい場合)
+
+非インタラクティブな要素に対して、デフォルトのonXxx形式の属性を設定するパターンとして、delegateが存在します。
+
+```jsx
+// 子要素のbuttonから発生したclickイベントを親で受け取り処理する
+<div onClick={onClick}>
+  <ButtonA />
+  <ButtonB />
+  <ButtonC />
+</div>
+```
+
+上記例の場合、このルールはエラーになりますが、**delegateを目的としたイベントハンドラであること** を分かる状態にすることで回避出来ます。
+
+```jsx
+// 設定するハンドラの名称に delegate, もしくはDelegateを含める
+<div onClick={onDelegateClick}>
+  <ButtonA />
+  <ButtonB />
+  <ButtonC />
+</div>
+```
+
+無名関数を直接渡している場合、ハンドラの引数の名称にdelegate, もしくはDelegateを含めることで同様に回避出来ます。
+
+```jsx
+<div onClick={(delegateEv) => onClick(delegateEv)}>
+  <ButtonA />
+  <ButtonB />
+  <ButtonC />
+</div>
+```
+
+上記のように修正することで **delegateを目的としたイベントハンドラであることが明確** になり、コードの可読性が向上します
+
 
 ## rules
 
@@ -154,6 +192,22 @@ additionalInteractiveComponentRegexオプションに独自コンポーネント
 <CrewDetail onChange={onChange} />
 ```
 
+```jsx
+// 子要素のbuttonから発生したclickイベントを親で受け取り処理する場合
+// イベントハンドラがdelegateを目的とするものであることが分かる必要がある
+<div onClick={onClick}>
+  <ButtonA />
+  <ButtonB />
+  <ButtonC />
+</div>
+
+<div onClick={(e) => onClick(e)}>
+  <ButtonA />
+  <ButtonB />
+  <ButtonC />
+</div>
+```
+
 ## ✅ Correct
 
 ```jsx
@@ -162,7 +216,7 @@ additionalInteractiveComponentRegexオプションに独自コンポーネント
 ```
 
 ```jsx
-// additionalInteractiveComponentRegex: ['^InteractiveComponent%']
+// additionalInteractiveComponentRegex: ['^InteractiveComponent$']
 // インタラクティブなコンポーネントとして扱われるものに対してroleを指定していないのでOK
 <InteractiveComponent any={hoge}>...</InteractiveComponent>
 ```
@@ -176,3 +230,18 @@ additionalInteractiveComponentRegexオプションに独自コンポーネント
 // インタラクティブな要素なのでonXxx形式のデフォルト属性を設定してもOK
 <XxxInput onChange={onChange} />
 ```
+
+```jsx
+// イベントハンドラがdelegateを目的とするものであることが明確なのでOK
+<div onClick={onDelegateClick}>
+  <ButtonA />
+  <ButtonB />
+  <ButtonC />
+</div>
+
+<div onClick={(delegateEv) => onClick(delegateEv)}>
+  <ButtonA />
+  <ButtonB />
+  <ButtonC />
+</div>
+```

package/rules/best-practice-for-interactive-element/index.js

@@ -10,6 +10,7 @@ const INTERACTIVE_COMPONENT_NAMES = `(${[
   '(T|t)extarea(s)?',
   'AccordionPanel(s)?',
   'Anchor',
+  'DisclosureTrigger?',
   'DropZone(s)?',
   'Field(S|s)et(s)?',
   'FilterDropdown(s)?',
@@ -29,6 +30,14 @@ const INTERACTIVE_COMPONENT_NAMES = `(${[
   '^summary',
 ].join('|')})$`
 const INTERACTIVE_ON_REGEX = /^on(Change|Input|Focus|Blur|(Double)?Click|Key(Down|Up|Press)|Mouse(Enter|Over|Down|Up|Leave)|Select|Submit)$/
+const DELEGATE_REGEX = /(d|D)elegate/
+
+const ARROW_ROLES = {
+  '((^i|I)nput|(^c|C)heck(b|B)ox)$': 'switch',
+  '(^i|I)nput$': 'combobox',
+  '(^b|B)utton$': 'option',
+}
+const NOT_ARROW_ROLE_ATTRIBUTES = Object.entries(ARROW_ROLES).reduce((prev, [key, value]) => `${prev}:not([parent.name.name=/${key}/][value.value="${value}"])`, '')
 
 const ELEMENT_HAS_ROLE_ATTRIBUTE = 'JSXOpeningElement:has(JSXAttribute[name.name="role"])'
 const AS_FORM_PART_ATTRIBUTE = 'JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value=/^f(orm|ieldset)$/]'
@@ -57,21 +66,37 @@ module.exports = {
     const targetNameProp = `[name.name=${interactiveComponentRegex}]`
 
     return {
-      [`${ELEMENT_HAS_ROLE_ATTRIBUTE}${targetNameProp}`]: (node) => {
+      [`JSXOpeningElement${targetNameProp}>JSXAttribute[name.name="role"]${NOT_ARROW_ROLE_ATTRIBUTES}`]: (node) => {
         context.report({
-          node,
-          message: `${node.name.name}にrole属性は指定しないでください。
+          node: node.parent,
+          message: `${node.parent.name.name}にrole属性は指定しないでください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element`,
         });
       },
-      [`${ELEMENT_HAS_ROLE_ATTRIBUTE} ${AS_FORM_PART_ATTRIBUTE}`]: (node) => {
-        context.report({
-          node: node.parent,
-          message: `<${node.parent.name.name} ${context.sourceCode.getText(node)}>にrole属性は指定しないでください。
+      [`JSXOpeningElement>${AS_FORM_PART_ATTRIBUTE}`]: (node) => {
+        if (node.parent.attributes.some((a) => a.type === 'JSXAttribute' && a.name?.name === 'role')) {
+          context.report({
+            node: node.parent,
+            message: `<${node.parent.name.name} ${context.sourceCode.getText(node)}>にrole属性は指定しないでください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element`,
-        });
+          });
+        }
       },
-      [`JSXOpeningElement:not(${targetNameProp}):not(:has(${AS_FORM_PART_ATTRIBUTE}))>JSXAttribute[name.name=${INTERACTIVE_ON_REGEX}]`]: (node) => {
+      [`JSXOpeningElement:not(${targetNameProp}):not(:has(${AS_FORM_PART_ATTRIBUTE}))>JSXAttribute[name.name=${INTERACTIVE_ON_REGEX}]:not([value.expression.name=${DELEGATE_REGEX}])`]: (node) => {
+        switch (node.value.expression.type) {
+          case 'MemberExpression':
+            if (DELEGATE_REGEX.test(context.sourceCode.getText(node.expression))) {
+              return
+            }
+            break
+          case 'ArrowFunctionExpression':
+            if (node.value.expression.params.some((p) => DELEGATE_REGEX.test(p.name))) {
+              return
+            }
+
+            break
+        }
+
         context.report({
           node: node.parent,
           message: `${node.parent.name.name}にデフォルトで用意されているonXxx形式の属性は設定しないでください
@@ -79,9 +104,12 @@ module.exports = {
  - 対応方法1: 対象の属性がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
    - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
    - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
- - 対応方法2: 対象の属性が設定されているコンポーネントがインタラクティブなコンポーネントの場合、名称を調整してください
+ - 対応方法2: 子要素で発生したイベントを受け取ること(delegate)が目的でonXxx属性を設定している場合、イベントハンドラがdelegateを目的としている事がわかるように修正してください
+   - 修正例1: "onClick={onClick}" を設定している場合、 "onClick={onDelegateClick}" のようにDelegate, もしくはdelegateを含む名称に変更する
+   - 修正例2: "onClick={(e) => { ... }}" を設定している場合、 "onClick={(delegateEvent) => { ... }}" のように引数をdelegate, もしくはDelegateを含む名称に変更する
+ - 対応方法3: 対象の属性が設定されているコンポーネントがインタラクティブなコンポーネントの場合、名称を調整してください
    - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに変更、もしくは名称を調整してください
- - 対応方法3: インタラクティブな親要素、もしくは子要素が存在する場合、onXxx属性を移動して設定することを検討してください`,
+ - 対応方法4: インタラクティブな親要素、もしくは子要素が存在する場合、onXxx属性を移動して設定することを検討してください`,
         });
       }
     };

package/test/best-practice-for-interactive-element.js

@@ -23,6 +23,7 @@ const INTERACTIVE_COMPONENT_NAMES = `(${[
   '(T|t)extarea(s)?',
   'AccordionPanel(s)?',
   'Anchor',
+  'DisclosureTrigger?',
   'DropZone(s)?',
   'Field(S|s)et(s)?',
   'FilterDropdown(s)?',
@@ -50,9 +51,12 @@ const uninteractiveError = (name) => `${name}にデフォルトで用意され
  - 対応方法1: 対象の属性がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
    - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
    - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
- - 対応方法2: 対象の属性が設定されているコンポーネントがインタラクティブなコンポーネントの場合、名称を調整してください
+ - 対応方法2: 子要素で発生したイベントを受け取ること(delegate)が目的でonXxx属性を設定している場合、イベントハンドラがdelegateを目的としている事がわかるように修正してください
+   - 修正例1: "onClick={onClick}" を設定している場合、 "onClick={onDelegateClick}" のようにDelegate, もしくはdelegateを含む名称に変更する
+   - 修正例2: "onClick={(e) => { ... }}" を設定している場合、 "onClick={(delegateEvent) => { ... }}" のように引数をdelegate, もしくはDelegateを含む名称に変更する
+ - 対応方法3: 対象の属性が設定されているコンポーネントがインタラクティブなコンポーネントの場合、名称を調整してください
    - "${new RegExp(`(${INTERACTIVE_COMPONENT_NAMES})`)}" の正規表現にmatchするコンポーネントに変更、もしくは名称を調整してください
- - 対応方法3: インタラクティブな親要素、もしくは子要素が存在する場合、onXxx属性を移動して設定することを検討してください`
+ - 対応方法4: インタラクティブな親要素、もしくは子要素が存在する場合、onXxx属性を移動して設定することを検討してください`
 
 ruleTester.run('best-practice-for-interactive-element', rule, {
   valid: [
@@ -61,6 +65,13 @@ ruleTester.run('best-practice-for-interactive-element', rule, {
     { code: `<CrewDetail onChangeName={onChange} />` },
     { code: `<Stack as="form" onSubmit={onSubmit} />` },
     { code: `<Stack any={<Button onClick={onClick} />} />` },
+    { code: `<Stack onSubmit={onDelegateSubmit} />` },
+    { code: `<Stack onSubmit={hoge.fuga.delegateAny.piyo} />` },
+    { code: `<Stack onSubmit={(a, delegateEvent, b) => {}} />` },
+    { code: `<HogeCheckbox role="switch" />` },
+    { code: `<HogeInput role="switch" />` },
+    { code: `<input role="combobox" />` },
+    { code: `<FugaButton role="option" />` },
   ],
   invalid: [
     { code: `<button role="presentation">...</button>`, errors: [{ message: interactiveError('button') }] },
@@ -70,6 +81,10 @@ ruleTester.run('best-practice-for-interactive-element', rule, {
     { code: `<InteractiveComponent role="group">...</InteractiveComponent>`, options: [{ additionalInteractiveComponentRegex: ['^Interactive'] }], errors: [{ message: interactiveError('InteractiveComponent') }] },
     { code: `<CrewDetail onChange={onChange} />`, errors: [{ message: uninteractiveError('CrewDetail') }] },
     { code: `<Stack onSubmit={onSubmit} />`, errors: [{ message: uninteractiveError('Stack') }] },
+    { code: `<HogeCheckbox role="any" />`, errors: [{ message: interactiveError('HogeCheckbox') }] },
+    { code: `<HogeInput role="any" />`, errors: [{ message: interactiveError('HogeInput') }] },
+    { code: `<input role="any" />`, errors: [{ message: interactiveError('input') }] },
+    { code: `<FugaButton role="any" />`, errors: [{ message: interactiveError('FugaButton') }] },
   ]
 })