eslint-plugin-smarthr 5.0.0 → 6.0.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.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)
+
+
+### ⚠ BREAKING CHANGES
+
+* **a11y-delegate-element-has-role-presentation:** ルールを削除します ([#1015](https://github.com/kufu/tamatebako/issues/1015))
+
+### Features
+
+* **a11y-delegate-element-has-role-presentation:** ルールを削除します ([#1015](https://github.com/kufu/tamatebako/issues/1015)) ([4c5c7ab](https://github.com/kufu/tamatebako/commit/4c5c7ab43ab7a52f749963aa7b7cb359e6f623d5))
+* best-practice-for-interactive-elementを追加 ([#1014](https://github.com/kufu/tamatebako/issues/1014)) ([e0a171b](https://github.com/kufu/tamatebako/commit/e0a171b056d8dbe775e3697633136e60c84afe5d))
+
 ## [5.0.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v4.0.2...eslint-plugin-smarthr-v5.0.0) (2026-01-08)
 
 

package/README.md

@@ -2,7 +2,6 @@
 
 - [a11y-anchor-has-href-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-anchor-has-href-attribute)
 - [a11y-clickable-element-has-text](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-clickable-element-has-text)
-- [a11y-delegate-element-has-role-presentation](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation)
 - [a11y-form-control-in-form](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-form-control-in-form)
 - [a11y-heading-in-sectioning-content](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content)
 - [a11y-help-link-with-support-href](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-help-link-with-support-href)
@@ -19,6 +18,7 @@
 - [best-practice-for-button-element](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-button-element)
 - [best-practice-for-data-test-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-data-test-attribute)
 - [best-practice-for-date](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-date)
+- [best-practice-for-interactive-element](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element)
 - [best-practice-for-layouts](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts)
 - [best-practice-for-nested-attributes-array-index](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-nested-attributes-array-index)
 - [best-practice-for-optional-chaining](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-optional-chaining)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "5.0.0",
+  "version": "6.0.1",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "67f6c84cfcabac6fd2550133ae18e351a443a16c"
+  "gitHead": "87bf718cd19e5f353c0b93cedcc2ca8ba250ba7c"
 }

package/rules/a11y-anchor-has-href-attribute/README.md

@@ -1,14 +1,56 @@
 # smarthr/a11y-anchor-has-href-attribute
 
-- a, Anchor, Link コンポーネントに href 属性を設定することを促すルールです
-  - href が設定されていないanchor要素は `遷移先が存在しない無効化されたリンク` という扱いになります
-  - URLの変更を行わない場合、責務としても a より button が適切です
-  - URL遷移を行う場合、hrefが設定されていないとキーボード操作やコンテキストメニューからの遷移ができなくなります
-    - これらの操作は href属性を参照します
-  - 無効化されたリンクであることを表したい場合 `href={undefined}` を設定してください
-- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます
-- react-router-dom packageを利用している場合、a要素にto属性が指定されている場合、href属性が指定されているものとして許容します
-- next/link コンポーネント直下のa要素にhref属性が指定されていないことを許容します
+a, Anchor, Link コンポーネントに href 属性を設定することを促すルールです
+
+## なぜa要素にhref属性を設定するべきなのか
+
+href属性が設定されていないa要素は**遷移先が存在しない無効化されたリンク**という扱いになります。  
+これはbutton要素で例えるなら**disalbed属性が設定された状態のbutton要素**と同等です。
+
+またhref属性がないa要素ではtab移動の対象にならない・コンテキストメニュー(右クリックメニュー)から別タブで開く機能が使えない、などのデメリットが発生します。  
+これらの機能は **href属性が存在する == 有効なリンクである** ことから有効になります。
+
+逆説的に**設定したいhref属性が存在しない場合、a要素ではなくbutton要素を利用する**ように心がけてください。  
+a要素はあくまでURL遷移を表現するための要素であるため、それ以外の処理のトリガーとして利用するならばbutton要素のほうが適切です。
+
+また**遷移先が存在しない無効化されたリンク**を表現したい場合、明示的に`href={undefined}`を設定することを推奨しています。
+
+## react-router, next/Linkを利用している場合
+
+react-router, next/Linkを利用している場合、href属性と同等の機能を提供する別属性が存在するため、自動的にチェック方法が切り替わります。  
+利用しているか否かの判定にはpackage.jsonが利用され、dependenciesに `react-router` もしくは `next` が存在するかどうかで判断されます。
+
+### react-routerを利用している場合
+
+a要素にto属性が指定されている場合、href属性が指定されているものとして許容します。
+
+```jsx
+// react-routerを利用している場合、かつto属性を設定しているためOK
+<Link to={hoge}>any</Link>
+```
+
+### next/Linkを利用している場合
+
+
+next/link コンポーネント直下のa要素にhref属性が指定されていないことを許容します。
+
+```jsx
+// next/Linkを利用している場合、子のaにhref属性がなくてもOK
+<Link href={hoge}><a>any</a></Link>
+```
+
+### spread-attributesが設定されているなら許容したい場合
+
+下記の様にspread attributesが設定されていれば、href属性が設定されている扱いにしたい場合、lintのoptionとして `checkType` に `allow-spread-attributes` を設定してください。
+
+```jsx
+// checkType: 'allow-spread-attributes'
+<XxxAnchor {...args} />
+<XxxLink {...args} any="any" />
+```
+
+便利な設定ではありますが、**href属性が実際に設定されているかは判定出来ていないため、チェック漏れが発生する可能性があります。**  
+設定される場合は慎重に検討してください。
 
 ## rules
 
@@ -26,12 +68,15 @@
 ## ❌ Incorrect
 
 ```jsx
+// a要素と思われるコンポーネントにhref属性が設定されていないためNG
 <a>any</a>
 <XxxAnchor>any</XxxAnchor>
 <XxxLink>any</XxxLink>
 <XxxLink href>any</XxxLink>
+```
 
-// checkType: 'always'
+```jsx
+// spread attributesでhref属性が含まれていてもデフォルト設定ではNGになる
 <XxxAnchor {...args} />
 <XxxLink {...args} any="any" />
 ```
@@ -39,17 +84,25 @@
 ## ✅ Correct
 
 ```jsx
+// a要素と思われるコンポーネントにhref属性が設定されているのでOK
 <a href="https://www.google.com/search">any</a>
 <XxxAnchor href={hoge}>any</XxxAnchor>
 <XxxLink href={undefined}>any</XxxLink>
+```
 
-// nextを利用している場合
-<Link href={hoge}><a>any</a></Link>
-
-// react-router-domを利用している場合
+```jsx
+// react-routerを利用している場合、かつto属性を設定しているためOK
 <Link to={hoge}>any</Link>
+```
 
-// checkType: 'allow-spread-attributes'
+```jsx
+// next/Linkを利用している場合、子のaにhref属性がなくてもOK
+<Link href={hoge}><a>any</a></Link>
+```
+
+```jsx
+// checkType: 'allow-spread-attributes' を指定している場合、
+// 仮にspread attributes内にhrefが含まれていなくてもOKになるため注意
 <XxxAnchor {...args} />
 <XxxLink {...args} any="any" />
 ```

package/rules/a11y-clickable-element-has-text/README.md

@@ -1,11 +1,73 @@
 # smarthr/a11y-clickable-element-has-text
 
-- ButtonやAnchor,Link コンポーネントにテキスト要素が設定されていない場合、スクリーンリーダーで押したものが何だったのかわからない等の問題が発生する可能性を防ぐルールです
-- a要素やbutton要素の中身にtextがあることを担保するルール
-- 画像要素の場合は `visuallyHiddenText`や `alt`等代替テキストを設定する
-- SVGの場合はrole="img" と aria-labelを設定する
-- linkとかanchorのchildrenを含まない要素はチェックしない
-  - 例） `<YyyAnchor />`
+ButtonやAnchor,Link コンポーネントなどクリック可能（クリッカブル）な要素にテキストを設定することを促すルールです。
+
+## なぜクリッカブルな要素にテキストが必要なのか
+
+スクリーンリーダーなどの一部のブラウザで**クリックした対象物が何であるか？という情報が欠落することを防ぐ**目的があります。  
+閲覧可能なUI上では十分な情報が存在していても、テキスト読み上げなどでは情報が不足することがあるため、**クリックすることで起きる内容を説明する必要があります。**
+
+## 適切なテキストの設定方法について
+
+基本的にはchildrenにテキストを設定してください。
+
+```jsx
+<button>アクション</button>
+```
+
+変数を設定した場合もテキストを設定したものとして扱われます
+
+```jsx
+<AnyAnchor>{hoge}</AnyAnchor>
+```
+
+### 画像、もしくはそれに類する要素の場合
+
+画像要素の場合は `alt` 等、代替テキストを設定してください。
+
+```jsx
+// 代替テキストを設定した画像を含むためOK
+<AnyLink>
+  <XxxImage alt="fuga" />
+</AnyLink>
+```
+
+svg要素など、画像ではないが画像として扱いたい要素の場合、`role="img"` `aria-label="任意の文字列"` を指定することで**代替テキストが設定された画像**と同等に扱われるようになります。
+
+```jsx
+// svgだが代替テキストを設定した画像として扱うためOK
+<AnyButton>
+  <svg role="img" aria-label="HOGE">...</svg>
+</AnyButton>
+```
+
+### 対象要素がそもそもテキストを内包している場合
+
+a, button要素を拡張したコンポーネントがテキストを適切に内包している場合、childrenを設定しない状態で利用すればこのルールはcorrectとして扱います。
+
+```jsx
+// childrenが存在しないため、コンポーネントがテキストを内包しているものとして扱うのでOK
+<HogeAnchor />
+```
+
+またchildrenにわたすコンポーネントがテキストを内包している場合、chilrenに渡すコンポーネントの名称のsuffixが `Text` になっていれば、correctとして扱われます。
+
+```jsx
+// children内に XxxText 形式のコンポーネントが渡されているのでOK
+<AnyLink>
+  <HogeText />
+</AnyLink>
+```
+
+childrenにわたすコンポーネントの名称を変更することが難しい場合、lintのoptionとして `componentsWithText` に配列として完全一致するコンポーネント名を設定すれば、そのコンポーネントはテキストを含むものとして扱われます。
+
+```jsx
+// componentsWithText: ['Hoge'] を設定している場合
+// Hogeコンポーネントはテキストを含むものとして扱われるのでOK
+<XxxButton>
+  <Hoge />
+</XxxButton>
+```
 
 ## rules
 
@@ -25,24 +87,16 @@
 ## ❌ Incorrect
 
 ```jsx
+// テキストとみなされるものがchildrenに存在しないためNG
 <XxxAnchor>
   <Xxx />
 </XxxAnchor>
-```
-
-```jsx
 <XxxLink>
   <Yyy />
 </XxxLink>
-```
-
-```jsx
 <XxxButton>
   <Zzz />
 </XxxButton>
-```
-
-```jsx
 <XxxAnchor>
   <XxxTextYyyy />
 </XxxAnchor>
@@ -51,49 +105,40 @@
 ## ✅ Correct
 
 ```jsx
+// テキストがchildrenに含まれるためOK
 <XxxAnchor>
   Hoge
 </XxxAnchor>
 ```
 ```jsx
+// テキスト以外が同時に含まれている場合もOK
 <XxxLink>
   <YyyIcon />
   Fuga
 </XxxLink>
 ```
 ```jsx
-<XxxAnchor>
-  <YyyIcon visuallyHiddenText="hoge" />
-</XxxAnchor>
-```
-```jsx
+// 画像・Iconの場合、代替テキストが指定されていればテキストを含むものとして扱われるためOK
 <XxxButton>
   <YyyImage alt="fuga" />
 </XxxButton>
 ```
 
 ```jsx
+// childrenが存在しないコンポーネントの場合、テキストを内包するものとして扱われるためOK
 <YyyAnchor />
 ```
 
 ```jsx
+// childrenに含むコンポーネント名が、TextがsuffixになっているためOK
 <XxxAnchor>
   <XxxText />
 </XxxAnchor>
 ```
 
 ```jsx
-/*
-rules: {
-  'smarthr/a11y-clickable-element-has-text': [
-    'error',
-    {
-      componentsWithText: ['Hoge'],
-    },
-  ]
-},
-*/
-
+// componentsWithText: ['Hoge'] を設定している場合
+// Hogeコンポーネントはテキストを含むものとして扱われるのでOK
 <XxxButton>
   <Hoge />
 </XxxButton>

package/rules/a11y-form-control-in-form/README.md

@@ -1,12 +1,117 @@
 # smarthr/a11y-form-control-in-form
 
-- fieldset, Fieldset, FormControl を利用する場合、form要素で囲むことを促すルールです
-- form要素で囲むことで以下のようなメリットがあります
-  - 適切にマークアップできるようになり、フォームの範囲などがスクリーンリーダーに正しく伝わる
-  - 入力要素にfocusした状態でEnterを押せばフォームをsubmitできる
-  - inputのrequired属性、pattern属性を利用した入力チェックをブラウザの機能として実行できる
-- smarthr/a11y-input-in-form-control と組み合わせることでより厳密なフォームのマークアップを行えます
+fieldset, Fieldset, FormControl を利用する場合、form要素で囲むことを促すルールです。  
+このルールは[smarthr/a11y-input-in-form-control](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-input-in-form-control) と組み合わせることでより厳密なチェックを行えます。
 
+## なぜform要素で囲むことを推奨するのか
+
+form要素で対象コンポーネントを囲むことで `formの範囲が明確になる` 以外に以下のメリットが存在します。
+
+### 入力要素にfocusした状態でEnterキーなどでフォームを送信(submit)できる
+
+ブラウザの標準機能として入力要素にfocusした状態でEnterキー、またはそれに準ずるキーボード操作などをした場合、formを送信(submit)することができるようになります。  
+この機能は**ブラウザの標準機能として存在するため、submitできることを期待する利用者は多い**ため、form要素を利用したマークアップをすることを推奨しています。
+
+状況によっては**ユーザーの誤操作を防止するためEnterなどでsubmitさせたくない**場合もありえますが、この挙動は**ブラウザの標準機能のため、無効にする場合は慎重に判断してください。**
+
+### input要素のrequired属性、pattern属性を利用した入力チェックが有効になる
+
+input要素のrequired属性、pattern属性はform要素で囲んでいない場合でも設定自体は出来ますが、submit時のチェック自体は発火しません。  
+これらの属性はform要素で囲まれる事により、はじめて有効になります。
+
+ブラウザの機能として入力チェックを行うため、jsなどで同等の機能を実装した場合と比較して非常に高速なチェックが可能です。  
+ぜひ導入を検討してください。
+
+## FormControl、Fieldsetを内包するコンポーネントの名称について
+
+FormControl・Fieldsetを内包するコンポーネントを命名する場合、名称のsuffixにFormControl、Fieldset、もしくはFormControls, Fieldsetsのいずれかを設定してください。
+
+```jsx
+// FormControl、Fieldsetが内包されるコンポーネントの場合、名称のsuffixを
+// FormControl、Fieldset、もしくはFormControls, Fieldsetsのいずれかにする
+const SampleFormControls = () => (
+  <>
+    <StyledFormControl name="field1" />
+    <StyledFormControl name="field2" />
+    <StyledFormControl name="field3" />
+  </>
+)
+const SampleFieldset = (props) => (
+  <Fieldset {...props}>
+    <Any />
+  </>
+)
+```
+
+上記ルールは **条件によってはFormControl, Fieldsetが表示されない場合がある** 際にも適用してください。
+
+```jsx
+// AnyFieldsetは条件次第で表示されない場合があるが、それとは無関係にコンポーネント名は `XxxFieldset` とすること
+const SampleFieldset = () => (
+  <>
+    <Hoge />
+    {condition && (
+      <AnyFieldset  />
+    )}
+    <Fuga name="field3" />
+  </>
+)
+```
+
+このような名称にすることで、対象のコンポーネントがFormの入力要素関連のコンポーネントであることが明示され、lintによるチェックが正常に動作するようになります。  
+名称を決定するルールは以下の通りです。
+
+### Fieldsetを含まず、FormControlを単一で含む場合 -> `XxxFormControl`
+
+```jsx
+const SampleFormControl = (props) => (
+  <FormControl {...props} title="Sample" />
+)
+```
+
+### FormControlを含まず、Fieldsetを単一で含む場合 -> `XxxFieldset`
+
+```jsx
+const SampleFieldset = (props) => (
+  <Fieldset {...props} title="Sample" />
+)
+```
+
+### Fieldsetを含まず、FormControlを複数含む可能性がある場合 -> `XxxFormControls`
+
+```jsx
+const SampleFormControls = () => (
+  <>
+    <AnyFormControl name="field1" />
+    <AnyFormControl name="field2" />
+    <AnyFormControl name="field3" />
+  </>
+)
+```
+
+### FormControlを含まず、Fieldsetを複数含む可能性がある場合 -> `XxxFieldsets`
+
+```jsx
+const SampleFieldsets = () => (
+  <>
+    <AnyFieldset name="field1" />
+    <AnyFieldset name="field2" />
+    <AnyFieldset name="field3" />
+  </>
+)
+```
+
+### FormControl, Fieldsetが複数混ざって存在する場合 -> `XxxFieldsets`
+
+```jsx
+const SampleFieldsets = () => (
+  <>
+    <AnyFormControl name="field1" />
+    <AnyFieldset name="field2" />
+    <AnyFormControl name="field3" />
+  </>
+)
+```
 
 ## rules
 
@@ -22,46 +127,84 @@
 
 ```jsx
 // formで囲まれていないためNG
-const AnyComponent = <>
-  <FormControl />
-  <HogeFieldset />
-  <fieldset />
-</>
+const Sample = () => (
+  <>
+    <FormControl />
+    <HogeFieldset />
+    <fieldset />
+  </>
+)
+```
+
+```jsx
+// FormControl、Fieldsetを内包するコンポーネントの場合、名称のsuffixが
+// FormControl、Fieldset、もしくはFormControls, Fieldsetsのいずれかである必要があるためNG
+const Sample1 = () => (
+  <>
+    <StyledFormControl name="field1" />
+    <StyledFormControl name="field2" />
+    <StyledFormControl name="field3" />
+  </>
+)
+const Sample2 = (props) => (
+  <Fieldset {...props}>
+    <Any />
+  </>
+)
 ```
 
 ## ✅ Correct
 
 ```jsx
-// formで囲まれているためOK
-const AnyComponent = <StyledForm>
-  <FormControl />
-  <HogeFieldset />
-  <fieldset />
-</StyledForm>
-const AnyComponent = <Hoge as="form">
-  <FormControl />
-  <HogeFieldset />
-  <fieldset />
-</Hoge>
-const AnyComponent = <Hoge forwardedAs="form">
-  <FormControl />
-  <HogeFieldset />
-  <fieldset />
-</Hoge>
+// form要素で囲まれているならOK
+const Sample1 = () => (
+  // form要素と推測されるコンポーネントならOK
+  <StyledForm>
+    <FormControl />
+    <HogeFieldset />
+    <fieldset />
+  </StyledForm>
+)
+const Sample2 = () => (
+  // as, forwardedAsでform要素にされているコンポーネントの場合もOK
+  <Hoge as="form">
+    <FormControl />
+    <HogeFieldset />
+    <fieldset />
+  </Hoge>
+)
+```
 
+```jsx
 // Dialogの場合、FormDialog・RemoteTriggerFormDialogで囲めばOK
-const AnyComponent = <FormDialog>
-  <FugaFormControl />
-</FormDialog>
-const AnyComponent = <RemoteTriggerAnyFormDialog>
-  <FugaFormControl />
-</RemoteTriggerAnyFormDialog>
-
-// 対象のFormControl、Fieldsetがコンポーネントの一要素であり、その親コンポーネント名がFormControl、もしくはFieldsetの場合OK
-const AnyFormControl = <>
-  <StyledFormControl />
-</>
-const AnyFieldset = <>
-  <StyledFieldset />
-</>
+const SampleFormDialog = () => (
+  <FormDialog>
+    <FugaFormControl />
+  </FormDialog>
+)
+const SampleRemoteTriggerFormDialog = () => (
+  <RemoteTriggerAnyFormDialog>
+    <FugaFormControl />
+  </RemoteTriggerAnyFormDialog>
+)
+```
+
+```jsx
+// FormControl、Fieldsetを内包するコンポーネントの場合、名称のsuffixが
+// FormControl、Fieldset、もしくはFormControls, Fieldsetsのいずれかの場合OK
+const SampleFormControls = () => (
+  <>
+    <StyledFormControl name="field1" />
+    <StyledFormControl name="field2" />
+    <StyledFormControl name="field3" />
+  </>
+)
+const SampleFieldset = (props) => (
+  <Fieldset {...props}>
+    <Any />
+  </>
+)
+
+// コンポーネント名を上記の様に調整することで
+// これらのコンポーネントを利用する別コンポーネントでも正しくチェックが行えます
 ```

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

@@ -0,0 +1,178 @@
+# smarthr/best-practice-for-interactive-element
+
+インタラクティブな要素・コンポーネントの利用方法のベストプラクティスを定義するルールです。<br />
+以下の内容をチェックします
+
+- インタラクティブな要素にrole属性が設定されている場合エラーとします
+- インタラクティブではないコンポーネントに対して、デフォルトで用意されているonXxx形式の属性を設定しようとするとエラーにします
+  - 例: `CrewDetail` コンポーネントに `onChange` を設定するとエラー、 `onChangeName` ならOK
+
+## インタラクティブな要素・コンポーネントとは何か
+
+ユーザーが操作・やり取りが可能な要素を指します。<br />
+このルールに置いてはHTMLとしての要素以外にsmarthr-uiにおけるコンポーネントも含めます。
+
+### 具体的な要素・コンポーネントの一覧
+
+下記要素・コンポーネント名と一致、もしくはsuffixがコンポーネント名として指定されている場合、その要素はインタラクティブな要素として扱われます。<br />
+また複数形(末尾にsを設定するなど)の場合も同様に扱われます。
+
+#### HTMLの対象要素
+
+- a
+- button
+- details
+- dialog
+- fieldset
+- form
+- input
+- legend
+- select(option)
+- summary
+- textarea
+
+#### smarthr-uiの対象要素
+
+- AccordionPanel
+- Anchor
+- Checkbox
+- Date
+- DatetimeLocal
+- Dialog
+- DropZone
+- FormControl
+- InputFile
+- Link
+- MonthPicker
+- RadioButton
+- RadioButtonPanel
+- RemoteDialogTrigger
+- SegmentedControl
+- SideNav
+- Switch
+- TabItem
+- TimePicker
+- WarekiPicker
+
+## チェックする内容について
+
+### なぜrole属性を設定するべきではないのか
+
+role属性はhtmlの要素の意味(role)を変更するための属性です。<br />
+すべてのhtmlの要素はデフォルトの属性を持っており、**基本的にrole属性を利用することは推奨されません**。<br />
+不用意に利用した場合、ブラウザが適切な解釈を行うことが出来ず、必要な機能が有効にならない、などの問題が発生する可能性があります。<br />
+特に`role="presentation"`は **設定した要素は見た目やJSで利用するためのもので意味づけはない** という設定になるため大変強力な設定になります。
+
+以上の理由からこのルールは **特に問題が起きやすい、インタラクティブな要素に対して`role`属性を使っていたら忠告する**ことを目的としたものになっています。
+
+```jsx
+// button要素にrole="presentation"で意味付けを消してしまっていて大変危険なのでNG
+<button role="presentation">...</button>
+```
+
+additionalInteractiveComponentRegexオプションに独自コンポーネントの名称を正規表現で設定することで、インタラクティブな要素として判定することも可能です。
+
+```jsx
+// additionalInteractiveComponentRegex: ['^InteractiveComponent%']
+// インタラクティブなコンポーネントとして扱われるものに対してrole="presentation"を指定しており危険なのでNG
+<InteractiveComponent role="presentation">...</InteractiveComponent>
+```
+
+### なぜインタラクティブではないコンポーネントに対してデフォルトのonXxx形式の属性を設定するべきではないのか
+
+例として前述の `CrewDetail` を使って説明します。
+
+```jsx
+<CrewDetail onChange={onChange} />
+```
+
+上記例の場合、**CrewDetailの何が変更された場合利用される属性なのか？** がわかりません。<br />
+`CrewDetail` という名称から **従業員詳細の何かが変わった場合** に利用されることは予測出来ますが、不明瞭です。<br />
+おそらく入力要素ではないか？ということは予想できるかもしれませんが、例えばURLやDBに保存されている値の変更などの可能性もありえます。<br />
+そのため**どんな用途で利用されるものか**を明確にした名称にすることを推奨しています。
+
+```jsx
+<CrewDetail onChangeName={onChange} />
+```
+
+逆にインタラクティブな要素・コンポーネントはそれ自体にイベントハンドラを設定する場合が多いため問題なくonXxx形式の属性を設定出来ます。
+
+```jsx
+<XxxInput onChange={onChange} />
+```
+
+このチェックはインタラクティブではないコンポーネントのみが対象のため、以下は対象外です。
+
+- インタラクティブ・非インタラクティブを問わずすべての要素(a, divなどすべての要素)
+- インタラクティブなコンポーネント(InputやXxxFormControlなどのコンポーネント)
+
+対象となる属性は以下になります。
+
+- onChange
+- onInput
+- onFocus
+- onBlur
+- onClick
+- onDoubleClick
+- onKeyDown
+- onKeyUp
+- onKeyPress
+- onMouseEnter
+- onMouseOver
+- onMouseDown
+- onMouseUp
+- onMouseLeave
+- onSelect
+- onSubmit
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-interactive-element': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// button要素にrole="presentation"で意味付けを消してしまっていて大変危険なのでNG
+<button role="presentation">...</button>
+```
+
+```jsx
+// additionalInteractiveComponentRegex: ['^InteractiveComponent%']
+// インタラクティブなコンポーネントとして扱われるものに対してrole="presentation"を指定しており危険なのでNG
+<InteractiveComponent role="presentation">...</InteractiveComponent>
+```
+
+```jsx
+// 非インタラクティブなコンポーネントと推測されるものにonXxxx形式のデフォルトに存在する属性を設定しているためNG
+<CrewDetail onChange={onChange} />
+```
+
+## ✅ Correct
+
+```jsx
+// role属性を設定していないのでOK
+<button>...</button>
+```
+
+```jsx
+// additionalInteractiveComponentRegex: ['^InteractiveComponent%']
+// インタラクティブなコンポーネントとして扱われるものに対してroleを指定していないのでOK
+<InteractiveComponent any={hoge}>...</InteractiveComponent>
+```
+
+```jsx
+// 非インタラクティブなコンポーネントと推測されるものにonXxxx形式のデフォルト属性ではない名前のイベントハンドラを設定しているのでOK
+<CrewDetail onChangeName={onChange} />
+```
+
+```jsx
+// インタラクティブな要素なのでonXxx形式のデフォルト属性を設定してもOK
+<XxxInput onChange={onChange} />
+```

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

@@ -0,0 +1,90 @@
+const INTERACTIVE_COMPONENT_NAMES = `(${[
+  '(ActionDialogWith|RemoteDialog)Trigger(s)?',
+  '(B|b)utton(s)?',
+  '(Check|Combo)(B|b)ox(es|s)?',
+  '(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?',
+  '(F|f)orm(Control|Group|Dialog)?(s)?',
+  '(I|i)nput(File)?(s)?',
+  '(L|l)egend(s)$',
+  '(S|s)elect(s)?',
+  '(T|t)extarea(s)?',
+  'AccordionPanel(s)?',
+  'Anchor',
+  'DropZone(s)?',
+  'Field(S|s)et(s)?',
+  'FilterDropdown(s)?',
+  'Link(s)?',
+  'Pagination(s)?',
+  'RadioButton(Panel)?(s)?',
+  'RemoteTrigger(.+)Dialog(s)?',
+  'RightFixedNote(s)?',
+  'SegmentedControl(s)?',
+  'SideNav(s)?',
+  'Switch(s)?',
+  'TabItem(s)?',
+  '^a',
+  '^details',
+  '^dialog',
+  '^option',
+  '^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 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',
+    properties: {
+      additionalInteractiveComponentRegex: { type: 'array', items: { type: 'string' } },
+    },
+    additionalProperties: false,
+  }
+]
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const options = context.options[0]
+    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
+    const targetNameProp = `[name.name=${interactiveComponentRegex}]`
+
+    return {
+      [`${ELEMENT_HAS_ROLE_ATTRIBUTE}${targetNameProp}`]: (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`,
+        });
+      },
+      [`${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})):has(JSXAttribute[name.name=${INTERACTIVE_ON_REGEX}])`]: (node) => {
+        context.report({
+          node,
+          message: `${node.name.name}にデフォルトで用意されているonXxx形式の属性は設定しないでください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element
+ - 対応方法1: 対象の属性がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
+   - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
+   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
+ - 対応方法2: 対象の属性が設定されているコンポーネントがインタラクティブなコンポーネントの場合、名称を調整してください
+   - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに変更、もしくは名称を調整してください
+ - 対応方法3: インタラクティブな親要素、もしくは子要素が存在する場合、onXxx属性を移動して設定することを検討してください`,
+        });
+      }
+    };
+  },
+};
+module.exports.schema = SCHEMA;

package/rules/best-practice-for-spread-syntax/README.md

@@ -7,7 +7,7 @@
 
 # spread syntax を通常の属性より後に記述した場合に発生する問題
 
-spread syntaxより先に通常の属性を記述した場合、** spread syntaxで値が上書きされる ** 可能性があります。
+spread syntaxより先に通常の属性を記述した場合、**spread syntaxで値が上書きされる** 可能性があります。
 
 ```jsx
 const AnyComponent = (props: Props) => {
@@ -16,10 +16,10 @@ const AnyComponent = (props: Props) => {
 }
 ```
 
-上記例の場合、** Props型がidを含むか? 含む場合必須か？などの確認 ** が必要になります。
-(idが必須の場合、Fugaにベタ書きしているidがそもそも不要になるため)
-また`idのデフォルト値が"ABC", propsでidが指定された場合そちらを優先` というロジックが必要かどうかを該当コードの部分だけで判断出来ず、広範囲の確認が必要になりがちです。
-特にidなど多用され、HTMLの要素が持つ属性と名前が被っている場合、意図せず上書きされてしまう問題が発生する可能性が高く危険です。
+上記例の場合、**Props型がidを含むか? 含む場合必須か？などの確認** が必要になります。  
+(idが必須の場合、Fugaにベタ書きしているidがそもそも不要になるため)  
+また`idのデフォルト値が"ABC", propsでidが指定された場合そちらを優先` というロジックが必要かどうかを該当コードの部分だけで判断出来ず、広範囲の確認が必要になりがちです。  
+特にidなど多用され、HTMLの要素が持つ属性と名前が被っている場合、意図せず上書きされてしまう問題が発生する可能性が高く危険です。  
 そのため下記の様に記述することを推奨します。
 
 ```jsx

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

@@ -0,0 +1,74 @@
+const rule = require('../rules/best-practice-for-interactive-element')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const INTERACTIVE_COMPONENT_NAMES = `(${[
+  '(ActionDialogWith|RemoteDialog)Trigger(s)?',
+  '(B|b)utton(s)?',
+  '(Check|Combo)(B|b)ox(es|s)?',
+  '(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?',
+  '(F|f)orm(Control|Group|Dialog)?(s)?',
+  '(I|i)nput(File)?(s)?',
+  '(L|l)egend(s)$',
+  '(S|s)elect(s)?',
+  '(T|t)extarea(s)?',
+  'AccordionPanel(s)?',
+  'Anchor',
+  'DropZone(s)?',
+  'Field(S|s)et(s)?',
+  'FilterDropdown(s)?',
+  'Link(s)?',
+  'Pagination(s)?',
+  'RadioButton(Panel)?(s)?',
+  'RemoteTrigger(.+)Dialog(s)?',
+  'RightFixedNote(s)?',
+  'SegmentedControl(s)?',
+  'SideNav(s)?',
+  'Switch(s)?',
+  'TabItem(s)?',
+  '^a',
+  '^details',
+  '^dialog',
+  '^option',
+  '^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 interactiveError = (name) => `${name}にrole属性は指定しないでください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element`
+const uninteractiveError = (name) => `${name}にデフォルトで用意されているonXxx形式の属性は設定しないでください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element
+ - 対応方法1: 対象の属性がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
+   - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
+   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
+ - 対応方法2: 対象の属性が設定されているコンポーネントがインタラクティブなコンポーネントの場合、名称を調整してください
+   - "${new RegExp(`(${INTERACTIVE_COMPONENT_NAMES})`)}" の正規表現にmatchするコンポーネントに変更、もしくは名称を調整してください
+ - 対応方法3: インタラクティブな親要素、もしくは子要素が存在する場合、onXxx属性を移動して設定することを検討してください`
+
+ruleTester.run('best-practice-for-interactive-element', rule, {
+  valid: [
+    { code: `<button>...</button>` },
+    { code: `<InteractiveComponent>...</InteractiveComponent>`, options: [{ additionalInteractiveComponentRegex: ['^InteractiveComponent%'] }] },
+    { code: `<CrewDetail onChangeName={onChange} />` },
+    { code: `<Stack as="form" onSubmit={onSubmit} />` },
+  ],
+  invalid: [
+    { code: `<button role="presentation">...</button>`, errors: [{ message: interactiveError('button') }] },
+    { 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') }] },
+  ]
+})
+

package/rules/a11y-delegate-element-has-role-presentation/README.md

@@ -1,55 +0,0 @@
-# smarthr/a11y-delegate-element-has-role-presentation
-
-- 'role="presentation"'を適切に設定することを促すルールです
-- インタラクティブな要素に対して'role="presentation"'が設定されている場合、エラーになります
-  - インタラクティブな要素とは form, inputなどの入力要素、button, a などのクリッカブルな要素を指します
-- インタラクティブな要素から発生するイベントを親要素でキャッチする場合、親要素に 'role="presentation"' を設定することを促します
-  - インタラクティブではない要素でイベントをキャッチしており、かつ'role="presentation"'を設定しているにも関わらず、子要素にインタラクティブな要素がない場合はエラーになります
-- additionalInteractiveComponentRegexオプションに独自コンポーネントの名称を正規表現で設定することで、インタラクティブな要素として判定することが可能です
-
-## rules
-
-```js
-{
-  rules: {
-    'smarthr/a11y-delegate-element-has-role-presentation': [
-      'error', // 'warn', 'off'
-      // { additionalInteractiveComponentRegex: ['^InteractiveComponent%'] }
-    ]
-  },
-}
-```
-
-## ❌ Incorrect
-
-```jsx
-// インタラクティブな要素に対して role="presentation" は設定できない
-<Button role="presentation">text.</Button>
-<input type="text" role="presentation" />
-
-// インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
-// role="presentation" を設定する必要がある
-<div onClick={hoge}>
-  <Button>text.</Button>
-</div>
-
-// 非インタラクティブな要素でイベントをキャッチする場合、
-// 子要素にインタラクティブな要素がない場合はエラー
-<div onClick={hoge} role="presentation">
-  <Text>hoge.</Text>
-</div>
-```
-
-## ✅ Correct
-
-```jsx
-// インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
-// role="presentation" を設定する
-<div onClick={hoge} role="presentation">
-  <Button>text.</Button>
-</div>
-
-<div onClick={hoge} role="presentation">
-  <AnyForm />
-</div>
-```

package/rules/a11y-delegate-element-has-role-presentation/index.js

@@ -1,225 +0,0 @@
-const INTERACTIVE_COMPONENT_NAMES = `(${[
-  '(B|b)utton(s)?',
-  '(Check|Combo)(B|b)ox(es|s)?',
-  '(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?',
-  '(I|i)nput(File)?(s)?',
-  '(S|s)elect(s)?',
-  '(T|t)extarea(s)?',
-  '(ActionDialogWith|RemoteDialog)Trigger(s)?',
-  'AccordionPanel(s)?',
-  '^a',
-  'Anchor',
-  'Link(s)?',
-  'DropZone(s)?',
-  'Field(S|s)et(s)?',
-  'FilterDropdown(s)?',
-  '(F|f)orm(Control|Group|Dialog)?(s)?',
-  'Pagination(s)?',
-  'RadioButton(Panel)?(s)?',
-  'RemoteTrigger(.+)Dialog(s)?',
-  'RightFixedNote(s)?',
-  'SegmentedControl(s)?',
-  'SideNav(s)?',
-  'Switch(s)?',
-  'TabItem(s)?',
-].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 MEANED_ROLE_REGEX = /^(combobox|group|slider|toolbar)$/
-const INTERACTIVE_NODE_TYPE_REGEX = /^(JSXElement|JSXExpressionContainer|ConditionalExpression)$/
-const AS_REGEX = /^(as|forwardedAs)$/
-const AS_VALUE_REGEX = /^(form|fieldset)$/
-
-const messageNonInteractiveEventHandler = (nodeName, interactiveComponentRegex, onAttrs) => {
-  const onAttrsText = onAttrs.join(', ')
-
-  return `${nodeName} に${onAttrsText}を設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation
- - 方法1:  ${nodeName}がinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
- - 方法2: ${onAttrsText} がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
-   - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
-   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
- - 方法3: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
- - 方法4: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
- - 方法5: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
-   - 'role="presentation"' を設定した要素はマークアップとしての意味がなくなるため、div・span などマークアップとしての意味を持たない要素に設定してください
-   - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`
-}
-const messageRolePresentationNotHasInteractive = (nodeName, interactiveComponentRegex, onAttrs, roleMean) => `${nodeName}に 'role="${roleMean}"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation
- - 方法1: 子要素にインタラクティブな要素が存在するにも関わらずこのエラーが表示されている場合、子要素の名称を変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchするよう、インタラクティブな子要素全てを差し替える、もしくは名称を変更してください
- - 方法2: ${nodeName}自体がインタラクティブな要素の場合、'role="presentation"'を削除した上で名称を変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchするよう、${nodeName}の名称を変更してください
- - 方法3: 子要素にインタラクティブな要素が存在し、${onAttrs.join(', ')}全属性をそれらの要素に移動させられる場合、'role="presentation"'を消した上で実施してください`
-const messageInteractiveHasRolePresentation = (nodeName, interactiveComponentRegex) => `${nodeName}はinput、buttonやaなどのインタラクティブな要素にもかかわらず 'role="presentation"' が設定されているため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
- - 方法1: 'role="presentation"' を削除してください
- - 方法2: ${nodeName}の名称を "${interactiveComponentRegex}" とマッチしない名称に変更してください`
-
-const SCHEMA = [
-  {
-    type: 'object',
-    properties: {
-      additionalInteractiveComponentRegex: { type: 'array', items: { type: 'string' } },
-    },
-    additionalProperties: false,
-  }
-]
-
-/**
- * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
- */
-module.exports = {
-  meta: {
-    type: 'problem',
-    schema: SCHEMA,
-  },
-  create(context) {
-    const options = context.options[0]
-    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
-    const findInteractiveNode = (ec) => ec && INTERACTIVE_NODE_TYPE_REGEX.test(ec.type) && isHasInteractive(ec)
-    const isHasInteractive = (c) => {
-      switch (c.type) {
-        case 'JSXElement': {
-          const name = c.openingElement.name.name
-
-          if (name && interactiveComponentRegex.test(name)) {
-            return true
-          } else if (c.children.length > 0) {
-            return !!c.children.find(isHasInteractive)
-          }
-        }
-        case 'JSXExpressionContainer':
-        case 'ConditionalExpression': {
-          let e = c
-
-          if (c.expression) {
-            e = c.expression
-          }
-
-          return !![e.right, e.consequent, e.alternate].find(findInteractiveNode)
-        }
-      }
-
-      return false
-    }
-
-    return {
-      JSXOpeningElement: (node) => {
-        const nodeName = node.name.name || '';
-
-        let onAttrs = []
-        let roleMean = undefined
-        let isRolePresentation = false
-        let isAsInteractive = false
-
-        node.attributes.forEach((a) => {
-          const aName = a.name?.name || ''
-
-          if (INTERACTIVE_ON_REGEX.test(aName)) {
-            onAttrs.push(aName)
-          } else if (AS_REGEX.test(aName) && AS_VALUE_REGEX.test(a.value?.value || '')) {
-            isAsInteractive = true
-          } else if (aName === 'role') {
-            const v = a.value?.value || ''
-
-            if (v === 'presentation') {
-              isRolePresentation = true
-              roleMean = v
-            } else if (MEANED_ROLE_REGEX.test(v)) {
-              roleMean = v
-            }
-          }
-        })
-
-        if (isAsInteractive || interactiveComponentRegex.test(nodeName)) {
-          if (isRolePresentation) {
-            context.report({
-              node,
-              message: messageInteractiveHasRolePresentation(nodeName, interactiveComponentRegex)
-            })
-          }
-        } else if (onAttrs.length > 0) {
-          // HINT: role="presentation"以外で意味があるroleが設定されている場合はエラーにしない
-          // 基本的にsmarthr-uiでroleの設定などは巻き取る &&　そもそもroleを設定するよりタグを適切にマークアップすることが優先されるため
-          // エラーなどには表示しない
-          if (!roleMean) {
-            context.report({
-              node,
-              message: messageNonInteractiveEventHandler(nodeName, interactiveComponentRegex, onAttrs),
-            });
-          // HINT: role='slider' はインタラクティブな要素扱いとするため除外する
-          } else if (roleMean !== 'slider') {
-            const searchChildren = (n) => {
-              switch (n.type) {
-                case 'BinaryExpression':
-                case 'Identifier':
-                case 'JSXEmptyExpression':
-                case 'JSXText':
-                case 'Literal':
-                case 'VariableDeclaration':
-                  // これ以上childrenが存在しないため終了
-                  return false
-                case 'JSXAttribute':
-                  return n.value ? searchChildren(n.value) : false
-                case 'LogicalExpression':
-                  return searchChildren(n.right)
-                case 'ArrowFunctionExpression':
-                  return searchChildren(n.body)
-                case 'MemberExpression':
-                  return searchChildren(n.property)
-                case 'ReturnStatement':
-                case 'UnaryExpression':
-                  return searchChildren(n.argument)
-                case 'ChainExpression':
-                case 'JSXExpressionContainer':
-                  return searchChildren(n.expression)
-                case 'BlockStatement':
-                  return forInSearchChildren(n.body)
-                case 'ConditionalExpression':
-                  return searchChildren(n.consequent) || searchChildren(n.alternate)
-                case 'CallExpression': {
-                  return forInSearchChildren(n.arguments)
-                }
-                case 'JSXFragment':
-                  break
-                case 'JSXElement': {
-                  const name = n.openingElement.name.name || ''
-
-                  if (
-                    interactiveComponentRegex.test(name) ||
-                    forInSearchChildren(n.openingElement.attributes)
-                  ) {
-                    return true
-                  }
-
-                  break
-                }
-              }
-
-              return n.children ? forInSearchChildren(n.children) : false
-            }
-
-            const forInSearchChildren = (ary) => {
-              for (const i in ary) {
-                if (searchChildren(ary[i])) {
-                  return true
-                }
-              }
-
-              return false
-            }
-
-            if (!forInSearchChildren(node.parent.children)) {
-              context.report({
-                node,
-                message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs, roleMean)
-              })
-            }
-          }
-        }
-      },
-    };
-  },
-};
-module.exports.schema = SCHEMA;

package/test/a11y-delegate-element-has-role-presentation.js

@@ -1,76 +0,0 @@
-const rule = require('../rules/a11y-delegate-element-has-role-presentation');
-const RuleTester = require('eslint').RuleTester;
-
-const ruleTester = new RuleTester({
-  languageOptions: {
-    parserOptions: {
-      ecmaFeatures: {
-        jsx: true,
-      },
-    },
-  },
-})
-
-const defaultInteractiveMessage = '((B|b)utton(s)?|(Check|Combo)(B|b)ox(es|s)?|(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?|(I|i)nput(File)?(s)?|(S|s)elect(s)?|(T|t)extarea(s)?|(ActionDialogWith|RemoteDialog)Trigger(s)?|AccordionPanel(s)?|^a|Anchor|Link(s)?|DropZone(s)?|Field(S|s)et(s)?|FilterDropdown(s)?|(F|f)orm(Control|Group|Dialog)?(s)?|Pagination(s)?|RadioButton(Panel)?(s)?|RemoteTrigger(.+)Dialog(s)?|RightFixedNote(s)?|SegmentedControl(s)?|SideNav(s)?|Switch(s)?|TabItem(s)?)$'
-const defaultInteractiveRegex = `/(${defaultInteractiveMessage})/`
-const messageNonInteractiveEventHandler = (nodeName, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => {
-  const onAttrsText = onAttrs.join(', ')
-
-  return `${nodeName} に${onAttrsText}を設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation
- - 方法1:  ${nodeName}がinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
- - 方法2: ${onAttrsText} がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
-   - 属性名を"/^on(Change|Input|Focus|Blur|(Double)?Click|Key(Down|Up|Press)|Mouse(Enter|Over|Down|Up|Leave)|Select|Submit)$/"に一致しないものに変更してください
-   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
- - 方法3: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
- - 方法4: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
- - 方法5: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
-   - 'role="presentation"' を設定した要素はマークアップとしての意味がなくなるため、div・span などマークアップとしての意味を持たない要素に設定してください
-   - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`
-}
-const messageRolePresentationNotHasInteractive = (nodeName, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => `${nodeName}に 'role="presentation"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation
- - 方法1: 子要素にインタラクティブな要素が存在するにも関わらずこのエラーが表示されている場合、子要素の名称を変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchするよう、インタラクティブな子要素全てを差し替える、もしくは名称を変更してください
- - 方法2: ${nodeName}自体がインタラクティブな要素の場合、'role="presentation"'を削除した上で名称を変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchするよう、${nodeName}の名称を変更してください
- - 方法3: 子要素にインタラクティブな要素が存在し、${onAttrs.join(', ')}全属性をそれらの要素に移動させられる場合、'role="presentation"'を消した上で実施してください`
-const messageInteractiveHasRolePresentation = (nodeName, interactiveComponentRegex = defaultInteractiveRegex) => `${nodeName}はinput、buttonやaなどのインタラクティブな要素にもかかわらず 'role="presentation"' が設定されているため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
- - 方法1: 'role="presentation"' を削除してください
- - 方法2: ${nodeName}の名称を "${interactiveComponentRegex}" とマッチしない名称に変更してください`
-
-ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
-  valid: [
-    { code: '<Input />' },
-    { code: '<HogeForm>any</HogeForm>' },
-    { code: '<FugaButton>any</FugaButton>' },
-    { code: '<Link />' },
-    { code: '<div onClick={any} role="presentation"><Link /></div>' },
-    { code: '<div onClick={any} role="presentation"><button /></div>' },
-    { code: '<Wrapper onClick={any} role="presentation"><Link /></Wrapper>' },
-    { code: '<Wrapper onClick={any} role="presentation"><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }] },
-    { code: '<Wrapper onClick={any} role="presentation"><any><Link /></any></Wrapper>' },
-    { code: '<Wrapper onClick={any} role="presentation">{any && <AnyButton />}</Wrapper>' },
-    { code: '<Wrapper onClick={any} role="presentation">{any || <AnyButtons />}</Wrapper>' },
-    { code: '<Wrapper onClick={any} role="presentation">{any1 && (any2 || any3) && <AnyButton />}</Wrapper>' },
-    { code: '<Wrapper onClick={any} role="presentation">{any ? <AnyButton /> : null}</Wrapper>' },
-    { code: '<Wrapper onClick={any} role="presentation">{any1 ? (any2 ? <HogeLink /> : null) : null}</Wrapper>' },
-    { code: '<Wrapper onClick={any} role="presentation">{any ? null : (hoge ? <AnyLink /> : null)}</Wrapper>' },
-    { code: '<Wrapper onClick={any} role="slider">Hoge</Wrapper>' },
-    { code: '<Wrapper onSubmit={any} as="form" />' },
-    { code: '<Wrapper onSubmit={any} forwardedAs="fieldset">any</Wrapper>' },
-  ],
-  invalid: [
-    { code: '<Input role="presentation" />', errors: [ { message: messageInteractiveHasRolePresentation('Input') } ] },
-    { code: '<HogeForm role="presentation">any</HogeForm>', errors: [ { message: messageInteractiveHasRolePresentation('HogeForm') } ] },
-    { code: '<FugaButton role="presentation">any</FugaButton>', errors: [ { message: messageInteractiveHasRolePresentation('FugaButton') } ] },
-    { code: '<Link role="presentation" />', errors: [ { message: messageInteractiveHasRolePresentation('Link') } ] },
-    { code: '<div onClick={any} onSubmit={any2} role="presentation"><Hoge /></div>', errors: [ { message: messageRolePresentationNotHasInteractive('div', ['onClick', 'onSubmit']) } ] },
-    { code: '<div onClick={any}><Link /></div>', errors: [ { message: messageNonInteractiveEventHandler('div', ['onClick']) } ] },
-    { code: '<Wrapper onClick={any}><Link /></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
-    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onSubmit'], `/(${defaultInteractiveMessage}|^Hoge$)/`) } ] },
-    { code: '<Wrapper onClick={any} onChange={anyany}><any><Link /></any></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick', 'onChange']) } ] },
-    { code: '<Wrapper onClick={any}>{any ? null : (hoge ? <AnyLink /> : null)}</Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
-  ],
-});