eslint-plugin-smarthr 6.0.0 → 6.0.2

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.0.2](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.0.1...eslint-plugin-smarthr-v6.0.2) (2026-01-29)
+
+
+### Bug Fixes
+
+* **best-practice-for-interactive-element:** 属性にインタラクティブなコンポーネントを設定している場合、onXxxが誤検知されてしまうバグを修正 ([#1023](https://github.com/kufu/tamatebako/issues/1023)) ([81563cd](https://github.com/kufu/tamatebako/commit/81563cd2fa13ae9f53306d592b2f86e17e1f790c))
+
+## [6.0.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.0.0...eslint-plugin-smarthr-v6.0.1) (2026-01-28)
+
+
+### Bug Fixes
+
+* **best-practice-for-interactive-element:** as属性でインタラクティブなコンポーネントに変更した場合、onXxxのチェックが誤検知する問題を修正 ([#1019](https://github.com/kufu/tamatebako/issues/1019)) ([8ba4343](https://github.com/kufu/tamatebako/commit/8ba4343b87b8acb8fee374946dd18c848839e6a9))
+
 ## [6.0.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v5.0.0...eslint-plugin-smarthr-v6.0.0) (2026-01-28)
 
 

package/package.json

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

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

@@ -30,6 +30,9 @@ const INTERACTIVE_COMPONENT_NAMES = `(${[
 ].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 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)$/]'
+
 const SCHEMA = [
   {
     type: 'object',
@@ -51,22 +54,27 @@ module.exports = {
   create(context) {
     const options = context.options[0]
     const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
-
-    const interactiveAction = (node) => {
-      context.report({
-        node,
-        message: `${node.name.name}にrole属性は指定しないでください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element`,
-      });
-    }
+    const targetNameProp = `[name.name=${interactiveComponentRegex}]`
 
     return {
-      [`JSXOpeningElement[name.name=${interactiveComponentRegex}]:has(JSXAttribute[name.name="role"])`]: interactiveAction,
-      'JSXOpeningElement:has(JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value=/^f(orm|ieldset)$/]):has(JSXAttribute[name.name="role"])': interactiveAction,
-      [`JSXOpeningElement:not([name.name=${interactiveComponentRegex}]):has(JSXAttribute[name.name=${INTERACTIVE_ON_REGEX}])`]: (node) => {
+      [`${ELEMENT_HAS_ROLE_ATTRIBUTE}${targetNameProp}`]: (node) => {
         context.report({
           node,
-          message: `${node.name.name}にデフォルトで用意されているonXxx形式の属性は設定しないでください
+          message: `${node.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属性は指定しないでください。
+ - 詳細: 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) => {
+        context.report({
+          node: node.parent,
+          message: `${node.parent.name.name}にデフォルトで用意されているonXxx形式の属性は設定しないでください
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element
  - 対応方法1: 対象の属性がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
    - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください

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

@@ -59,13 +59,17 @@ ruleTester.run('best-practice-for-interactive-element', rule, {
     { code: `<button>...</button>` },
     { code: `<InteractiveComponent>...</InteractiveComponent>`, options: [{ additionalInteractiveComponentRegex: ['^InteractiveComponent%'] }] },
     { code: `<CrewDetail onChangeName={onChange} />` },
+    { code: `<Stack as="form" onSubmit={onSubmit} />` },
+    { code: `<Stack any={<Button onClick={onClick} />} />` },
   ],
   invalid: [
     { code: `<button role="presentation">...</button>`, errors: [{ message: interactiveError('button') }] },
-    { code: `<Hoge as="form" role="menu" />`, errors: [{ message: interactiveError('Hoge') }] },
+    { code: `<Hoge as="form" role="menu" />`, errors: [{ message: `<Hoge as="form">にrole属性は指定しないでください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element` }] },
     { code: `<FormControl role="menu" />`, errors: [{ message: interactiveError('FormControl') }] },
     { 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') }] },
   ]
 })