eslint-plugin-smarthr 4.0.2 → 6.0.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 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.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)
+
+
+### ⚠ BREAKING CHANGES
+
+* **best-practice-for-spread-syntax:** best-practice-for-spread-syntaxのチェック対象をObject内のスプレッド構文に広げ、autofixするように修正 ([#1009](https://github.com/kufu/tamatebako/issues/1009))
+
+### Features
+
+* **best-practice-for-spread-syntax:** best-practice-for-spread-syntaxのチェック対象をObject内のスプレッド構文に広げ、autofixするように修正 ([#1009](https://github.com/kufu/tamatebako/issues/1009)) ([d334970](https://github.com/kufu/tamatebako/commit/d33497002710301b738f7e16382540a5ba35d36f))
+
 ## [4.0.2](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v4.0.1...eslint-plugin-smarthr-v4.0.2) (2026-01-07)
 
 

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,19 +18,20 @@
 - [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)
 - [best-practice-for-prohibit-import-smarthr-ui-local](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-prohibit-import-smarthr-ui-local)
 - [best-practice-for-remote-trigger-dialog](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-remote-trigger-dialog)
 - [best-practice-for-rest-parameters](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-rest-parameters)
+- [best-practice-for-spread-syntax](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-spread-syntax)
 - [best-practice-for-tailwind-prohibit-root-margin](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-prohibit-root-margin)
 - [best-practice-for-tailwind-variants](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-tailwind-variants)
 - [best-practice-for-unnesessary-early-return](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-unnesessary-early-return)
 - [design-system-guideline-prohibit-double-icons](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/design-system-guideline-prohibit-double-icons)
 - [format-import-path](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-import-path)
 - [format-translate-component](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/format-translate-component)
-- [best-practice-for-spread-syntax](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-spread-syntax)
 - [no-import-other-domain](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/no-import-other-domain)
 - [prohibit-export-array-type](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-export-array-type)
 - [prohibit-file-name](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/prohibit-file-name)

package/package.json

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

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 />
+  </>
+)
+
+// コンポーネント名を上記の様に調整することで
+// これらのコンポーネントを利用する別コンポーネントでも正しくチェックが行えます
 ```