eslint-plugin-smarthr 6.2.3 → 6.4.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 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.4.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.3.0...eslint-plugin-smarthr-v6.4.0) (2026-02-16)
+
+
+### Features
+
+* **best-practice-for-unnesessary-early-return:** 早期return直後に単独のifが存在する場合、一つのifにまとめるように促すチェックを追加 ([#1082](https://github.com/kufu/tamatebako/issues/1082)) ([e7a6d70](https://github.com/kufu/tamatebako/commit/e7a6d709a5e633c0fbb65f9f0331746cfd752124))
+
+
+### Bug Fixes
+
+* **best-practice-for-layouts:** flatMapメソッドの場合も正しくチェックできるように修正する ([#1079](https://github.com/kufu/tamatebako/issues/1079)) ([838af61](https://github.com/kufu/tamatebako/commit/838af61523370a321fc95272aca742072a04c235))
+
+## [6.3.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.2.3...eslint-plugin-smarthr-v6.3.0) (2026-02-06)
+
+
+### Features
+
+* **a11y-heading-in-sectioning-content:** tag属性がunrecommendedTagにrenameされたためチェック対象を調整 ([#1066](https://github.com/kufu/tamatebako/issues/1066)) ([5b524f3](https://github.com/kufu/tamatebako/commit/5b524f3a712e48953ec6aad18028f3f19d6b86ca))
+
+
+### Bug Fixes
+
+* selectorでhas(>...)をやめ、直接属性で絞り込むように調整 ([#1069](https://github.com/kufu/tamatebako/issues/1069)) ([540426f](https://github.com/kufu/tamatebako/commit/540426f0ea90ba9b8cd67242067dcc8e4c855b5f))
+
 ## [6.2.3](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.2.2...eslint-plugin-smarthr-v6.2.3) (2026-02-05)
 
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "6.2.3",
+  "version": "6.4.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=22.21.1"
+    "node": ">=22.22.0"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.51.0"
+    "typescript-eslint": "^8.54.0"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "4e8f1798eb458a4e9fd9ca57d8b9b349bcee5384"
+  "gitHead": "dbca48a75081a64d1f28acaccc411f0886569ca0"
 }

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

@@ -39,7 +39,7 @@ next/link コンポーネント直下のa要素にhref属性が指定されて
 <Link href={hoge}><a>any</a></Link>
 ```
 
-### spread-attributesが設定されているなら許容したい場合
+## spread-attributesが設定されているなら許容したい場合
 
 下記の様にspread attributesが設定されていれば、href属性が設定されている扱いにしたい場合、lintのoptionとして `checkType` に `allow-spread-attributes` を設定してください。
 
@@ -50,7 +50,7 @@ next/link コンポーネント直下のa要素にhref属性が指定されて
 ```
 
 便利な設定ではありますが、**href属性が実際に設定されているかは判定出来ていないため、チェック漏れが発生する可能性があります。**  
-設定される場合は慎重に検討してください。
+設定する場合は慎重に検討してください。
 
 ## rules
 

package/rules/a11y-anchor-has-href-attribute/index.js

@@ -46,7 +46,7 @@ const OPTION = (() => {
 const ANCHOR_ELEMENT = 'JSXOpeningElement[name.name=/(Anchor|Link|^a)$/]'
 const HREF_ATTRIBUTE = `JSXAttribute[name.name=${OPTION.react_router ? '/^(href|to)$/' : '"href"'}]`
 const NULL_HREF_ATTRIBUTE_VALUES = `${HREF_ATTRIBUTE}:matches(${['#', ''].reduce((prev, v) => {
-  return `${prev},:has( > Literal[value="${v}"]),:has( > JSXExpressionContainer[expression.value="${v}"])`
+  return `${prev},[value.type="Literal"][value.value="${v}"],[value.type="JSXExpressionContainer"][value.expression.value="${v}"]`
 }, '[value=null]')})`
 const NEXT_LINK_REGEX = /Link$/
 // HINT: next/link で `Link > a` という構造がありえるので直上のJSXElementを調べる

package/rules/a11y-heading-in-sectioning-content/index.js

@@ -11,6 +11,7 @@ const noHeadingTagNamesRegex = /^(span|legend)$/
 const ignoreHeadingCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
 const headingAttributeRegex = /^(heading|title)$/
 const ariaLabelRegex = /^aria-label(ledby)?$/
+const tagAttrRegex = /^(tag|unrecommendedTag)$/
 
 const includeSectioningAsAttr = (a) => asRegex.test(a.name?.name) && bareTagRegex.test(a.value.value)
 
@@ -23,9 +24,9 @@ const pageHeadingMessage = `smarthr-ui/PageHeading が同一ファイル内に
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content`
 const pageHeadingInSectionMessage = `smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content`
-const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
+const noTagAttrMessage = `tag属性、unrecommendedTag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性、unrecommendedTag属性を削除してください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content
- - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
+ - tag属性、unrecommendedTag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 
 const VariableDeclaratorBareToSHR = (context, node) => {
   if (!node.init) {
@@ -177,7 +178,7 @@ const forInSearchChildren = (ary) => {
   return r
 }
 
-const findTagAttr = (a) => a.name?.name == 'tag'
+const findTagAttr = (a) => tagAttrRegex.test(a.name?.name)
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}

package/rules/a11y-help-link-with-support-href/README.md

@@ -1,7 +1,37 @@
 # smarthr/a11y-help-link-with-support-href
 
-- [ヘルプページ](https://support.smarthr.jp/) へのリンクはsmarthr-ui/HelpLinkを使うことを促すルールです
-  - ヘルプページへのリンクは、通常のテキストリンクと設定するべき属性が異なるため、専用のコンポーネントが用意されています
+[ヘルプページ](https://support.smarthr.jp/)へのリンクは[smarthr-ui/HelpLink](https://smarthr.design/products/components/text-link/help-link/)を使うことを促すルールです
+
+## なぜ[ヘルプページ](https://support.smarthr.jp/)へのリンクはsmarthr-ui/HelpLinkを使う必要があるのか
+ヘルプページへのリンクは、通常のテキストリンクと設定するべき属性が異なるため、専用のコンポーネントとして[smarthr-ui/HelpLink](https://smarthr.design/products/components/text-link/help-link/)が定義されています。<br />
+例えば `rel="help"` は `現在のページとリンク先の関係を表す` ものであり `ヘルプページへのリンク` であることが明確になります。
+
+## [ヘルプページ](https://support.smarthr.jp/)へのリンクとして扱われる条件
+
+a要素、もしくはa要素と思われるコンポーネントのhref属性に `support` 関連と思われる値が設定さている場合がチェック対象になります。
+
+### a要素、もしくはa要素と思われるコンポーネントの判定方法
+
+a要素として判定されるコンポーネントの条件は以下のいずれかに合致する場合です。
+
+- a要素
+- コンポーネント名の末尾が `Link` `Anchor` `AnchorButton` のいずれかであること
+
+### hrefがsupport関連のものかどうかの判定方法
+
+hrefに設定されたURLがsupport関連であると判定される条件は以下のいずれかに合致する場合です。
+
+- ドメイン部分に `support` という文言を含む場合
+- `path` もしくは `xxxPath` というオブジェクト以下から `support` という値を参照する場合
+  - 例:
+    - path.support
+    - path.support.xxxx.yyyy
+    - path.xxxx.support.yyyy
+- 変数の場合、`support` と `href` もしくは `url` という単語を含む場合
+  - 大文字小文字の組み合わせも許容されています
+    - 例:
+      - supportURL
+      - xxxSupportYyyHref
 
 ## rules
 
@@ -18,17 +48,37 @@
 ## ❌ Incorrect
 
 ```jsx
+// supportという文字列を含むドメインの場合、smarthr-ui/HelpLinkを利用する必要がある
 <TextLink href="https://support.smarthr.jp/xxxxx">any</TextLink>
 <a href={`//support.smarthr.jp/${hoge}`}>any</a>
-<AnchorButton href={supportURL}>any</a>
+```
+
+```jsx
+// path、xxxPath形式のオブジェクト以下で `support` という値を参照する場合もHelpLinkの利用が必要
 <AnyAnchor href={path.support.xxxx.yyyy} />
+<AnyAnchor href={path.xxxx.support.yyyy} />
+```
+
+```jsx
+// supportという単語が含まれる変数名が設定されている場合も同様にHelpLinkを利用する必要がある
+<AnchorButton href={supportURL}>any</AnchorButton>
+<AnchorButton href={xxxSupportYyyHref}>any</AnchorButton>
 ```
 
+
 ## ✅ Correct
 
 ```jsx
 <HelpLink href="https://support.smarthr.jp/xxxxx">any</HelpLink>
 <HelpLink href={`//support.smarthr.jp/${hoge}`}>any</HelpLink>
-<HelpLink href={supportURL}>any</HelpLink>
-<HogeHelpLink href={path.support.xxxx.yyyy} />
+```
+
+```jsx
+<AnyHelpLink href={path.support.xxxx.yyyy} />
+<AnyHelpLink href={path.xxxx.support.yyyy} />
+```
+
+```jsx
+<StyledHelpLink href={supportURL}>any</StyledHelpLink>
+<StyledHelpLink href={xxxSupportYyyHref}>any</StyledHelpLink>
 ```

package/rules/a11y-image-has-alt-attribute/README.md

@@ -1,7 +1,49 @@
 # smarthr/a11y-image-has-alt-attribute
 
-- 画像やアイコンにalt属性を設定することを強制するルールです
-- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
+画像にalt属性(代替テキスト)を設定することを強制するルールです
+
+## なぜ画像に代替テキストが必要なのか
+
+スクリーンリーダーなどの一部のブラウザで**対象画像が何を表しているのか？という情報が欠落することを防ぐ**目的があります。<br />
+閲覧可能なUI上では十分な情報が存在していても、テキスト読み上げなどでは情報が不足することがあるため、**画像が何を表しているのかを説明する必要があります。**
+
+[詳細: 画像に代替テキストが付与されている](https://smarthr.design/accessibility/check-list/alternative-text/)
+
+
+### 画像に代替テキストが不要な場合について
+
+例外的に**装飾目的の画像はaltに空文字を指定する**ことが許容されます。(例: `<XxxImage alt="" />`)<br />
+**ただしこのルールでは上記のようなalt指定もエラーになります。**<br />
+理由は**SmartHRのプロダクトにおいて装飾目的の画像はほぼ全てアイコンとなる**ためです。<br />
+smarthr-uiが提供するIconではないアイコンのコンポーネントを定義する場合、コンポーネント名の末尾を `Icon` にすることでこのチェックを回避出来ます。<br />
+SmartHRのプロダクトにおいて、アイコンを単一で使う可能性は低く、利用する場合でも[a11y-clickable-element-has-text](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-clickable-element-has-text)で別途チェックされます。
+
+[詳細: 装飾目的の画像が無視できるようになっている](https://smarthr.design/accessibility/check-list/decorative-image/)
+
+## alt以外の代替テキストの設定方法について
+
+**前提として可能な限りalt属性を利用してください。** 迷うような条件の場合、alt属性を利用すれば大きな問題は発生しないでしょう。<br />
+例外として以下の場合 `aria-describedby` 属性を利用して代替テキストを設定することが出来ます。
+
+1. 設定するべき代替テキストが、すでに他要素でテキスト、もしくは代替テキストとして存在している
+2. 1であり、かつその要素と直接関係性がある場合
+
+わかり易い例として以下の様なパターンが考えられます。
+
+- Tableに値が一覧されており、それをグラフ画像として表示する場合
+- 別アイコンにチェックアイコンを重ねる場合
+
+## spread-attributesが設定されているなら許容したい場合
+
+下記の様にspread attributesが設定されていれば、代替テキストが設定されている扱いにしたい場合、lintのoptionとして `checkType` に `allow-spread-attributes` を設定してください。
+
+```jsx
+// checkType: 'allow-spread-attributes'
+<XxxImage {...args} />
+```
+
+便利な設定ではありますが、**代替テキストが実際に設定されているかは判定出来ていないため、チェック漏れが発生する可能性があります。**  
+設定する場合は慎重に検討してください。
 
 ## rules
 
@@ -19,27 +61,24 @@
 ## ❌ Incorrect
 
 ```jsx
+// 画像に代替テキストが設定されていないためNG
 <Img />
 ```
+
 ```jsx
+// 子要素が存在する場合でも同様にNG
+// この場合、Imageは画像要素ではない場合がありますが
+// その場合は画像と勘違いしない名称に変更してください
 <Image>
   <Any />
 </Image>
 ```
+
 ```jsx
-<Icon />
-```
-```jsx
+// spread attributesにに代替テキスト用の属性が含まれていてもNG
+
 // checkType: 'always'
 <XxxImage {...args} />
-<YyyIcon {...args} any="any" />
-```
-```jsx
-import styled from 'styled-components'
-
-const StyledHoge = styled.img``
-const StyledFuga = styled(Img)``
-const StyledPiyo = styled(Icon)``
 ```
 
 ## ✅ Correct
@@ -47,23 +86,19 @@ const StyledPiyo = styled(Icon)``
 ```jsx
 <Img alt="message" />
 ```
+
 ```jsx
 <Image alt="message">
   <Any />
 </Image>
 ```
+
 ```jsx
-<Icon alt="message" />
+// Iconは画像として扱われますが、例外的に代替テキストを設定しなくてもOK
+<Icon />
 ```
+
 ```jsx
 // checkType: 'allow-spread-attributes'
 <XxxImage {...args} />
-<YyyIcon {...args} any="any" />
-```
-```jsx
-import styled from 'styled-components'
-
-const StyledImage = styled.img``
-const StyledImg = styled(Img)``
-const StyledIcon = styled(Icon)``
 ```

package/rules/a11y-input-has-name-attribute/README.md

@@ -1,10 +1,32 @@
 # smarthr/a11y-input-has-name-attribute
 
-- input, textarea, select など入力要素に name 属性を設定することを強制するルールです。
-  - 入力要素は name を設定することでブラウザの補完機能が有効になる可能性が高まります。
-    - 補完機能はブラウザによって異なるため、補完される可能性が上がるよう、name には半角英数の小文字・大文字と一部記号(`_ , [, ]`)のみ利用可能です。
-  - input[type="radio"] は name を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。
-- checkTypeオプションに 'allow-spread-attributes' を指定することで spread attributeが設定されている場合はcorrectに出来ます。
+input, textarea, select など入力要素に name 属性を設定することを強制するルールです。
+
+## なぜ入力要素にname属性を設定する必要があるのか
+
+入力要素にname属性を適切に設定することで、キーボード操作や補完機能が適切に動作するようになります。<br />
+例えば入力要素の一種である `input[type="radio"]` は同一のname属性が設定されたものは一つのグループとして扱われ、矢印キーでグループ内を適切に移動できるようになります。<br />
+他にはname属性に `address` `zip_code` など住所が連想される単語を含めた場合、ブラウザの補完機能で住所が自動入力される可能性が高まります。
+
+## name属性に設定する文字列のフォーマットについて
+
+なるべく同一のフォーマットをもちいることで自動補完される可能性を上げるためname属性が一定のフォーマットになるようチェックを行っています。<br />
+使える文字は以下のとおりです。
+
+- 半角英数の大文字・小文字
+- 一部記号(`_` `[` `]`)
+
+## spread-attributesが設定されているなら許容したい場合
+
+下記の様にspread attributesが設定されていれば、name属性が設定されている扱いにしたい場合、lintのoptionとして `checkType` に `allow-spread-attributes` を設定してください。
+
+```jsx
+// checkType: 'allow-spread-attributes'
+<AnyInput {...args} />
+```
+
+便利な設定ではありますが、**name属性が実際に設定されているかは判定出来ていないため、チェック漏れが発生する可能性があります。**  
+設定する場合は慎重に検討してください。
 
 ## rules
 
@@ -22,24 +44,18 @@
 ## ❌ Incorrect
 
 ```jsx
+// name属性が存在しないためNG
 <RadioButton />
 <Input type="radio" />
 <input type="text" />
 <Textarea />
 <Select />
-
-// checkType: 'always'
-<AnyInput {...args} />
-<AnyInput {...args} any="any" />
 ```
 
-
 ```jsx
-import styled from 'styled-components';
-
-const StyledHoge = styled.input``;
-const StyledFuga = styled(Input)``;
-const StyledPiyo = styled(RadioButton)``;
+// 仮にargsにname属性が存在していてもNG
+// checkType: 'always'
+<AnyInput {...args} />
 ```
 
 ## ✅ Correct
@@ -50,16 +66,9 @@ const StyledPiyo = styled(RadioButton)``;
 <input type="text" name="any" />
 <Textarea name="some" />
 <Select name="piyo" />
-
-// checkType: 'allow-spread-attributes'
-<AnyInput {...args} />
-<AnyInput {...args} any="any" />
 ```
 
 ```jsx
-import styled from 'styled-components';
-
-const StyledInput = styled.input``;
-const StyledInput = styled(Input)``;
-const StyledRadioButton = styled(RadioButton)``;
+// checkType: 'allow-spread-attributes'
+<AnyInput {...args} />
 ```

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

@@ -1,8 +1,27 @@
 # smarthr/a11y-input-in-form-control
 
-- 入力要素をsmarthr-ui/FormControl、もしくはsmarthr-ui/Fieldsetで囲むことを促すルールです
-  - SectioningContent + Heading でのマークアップではなく、FormControl・Fieldsetを使うように促します
-  - FormControl・Fieldsetを使うことでlabelと入力要素が適切に紐づいたり、RadioButtonなどが適切にグルーピングされるようになり、アクセシビリティ的メリットが得られます
+入力要素をsmarthr-ui/FormControl、もしくはsmarthr-ui/Fieldsetで囲むことを促すルールです
+
+## なぜFormControl、Fieldsetで囲まなければならないのか
+
+FormControl、Fieldsetはそれぞれlabel要素、fieldset要素とlegend要素を含み、それらは適切に入力要素と関連付けされます。<br />
+例えばFormControlでInputをラップした場合、FormControlが出力するlabel要素は適切にInputと紐づくので、label要素をクリックすることで入力要素にfocusされます。<br />
+この動作はブラウザがデフォルトで持つ機能であり、当たり前に期待される動作のため必ず設定する必要性があります。<br />
+
+また入力要素は必ずラベルとなるテキストを何らかの形でもつ必要があります。<br />
+紐づくラベルを持たない入力要素はスクリーンリーダーなど一部のブラウザに置いて **その入力要素がなんであるか？という情報が欠落した状態** になり、ユーザー操作に影響します。<br />
+
+同様にFieldsetは複数の入力要素やFormControlを一つのグループとして扱うことを表します。<br />
+適切に設定することでformの内容をわかりやすく示すことができます。
+
+### SectioningContent ではなく Fieldset の利用を推奨する理由
+
+このルールではform要素以下でSectioninContent(Section,Article,Aside,Nav)を発見した場合、Fieldsetに変更することを促します。<br />
+SectioninContentでもmarkupの観点としては問題ありませんが、一部スクリーンリーダーなどに搭載されている **特定の要素に対するジャンプ機能** などを利用する際にデメリットが生じます。<br />
+
+form要素以下で見出しとして利用される事が多いlabel要素、legend要素以外に**Headingが混ざった場合、ジャンプ機能によって意図せずスキップされてしまう可能性**が高まります。
+
+fielset要素はmarkupとしては必須でinputを持つ必要性はないこと、form内に存在する見出しはformの別の入力要素に対する説明である場合がほとんどであることなどからこのルールではform要素以下では全ての見出しをlabel, legendに統一するためこのチェックを行っています。
 
 ## rules
 
@@ -25,33 +44,42 @@
 ```jsx
 // FormControlで囲まれていないためNG
 <Input />
+```
 
+```jsx
 // FormControl・FieldsetではなくSectionでマークアップされているためNG
 <Section>
   <Heading />
   <Select />
 </Section>
+```
 
-// RadioButton, CheckboxはFieldsetでグルーピングする必要があるためNG
+```jsx
+// RadioButton, Checkboxは内部にlabel要素を持つためFormControlで囲むことは不適切
+// 見出しを設定したい場合、Fieldsetでグルーピングする
 <FormControl title="any heading">
   <RadioButton>{a.label}</RadioButton>
 </FormControl>
+```
 
+```jsx
 // FormControlが複数の入力要素を持ってしまっているのでNG
 <FormControl title="any heading">
   <Input />
   <Combobox />
 </FormControl>
+```
 
-
+```jsx
 // FormControlがネストしてしまっているのでNG
 <FormControl>
   <SubFormControl>
     <Checkbox />
   </SubFormControl>
 </FormControl>
+```
 
-
+```jsx
 // Fieldsetには role="group" がデフォルトで設定されているのでNG
 <Fieldset  role="group" />
 ```
@@ -62,42 +90,38 @@
 <FormControl title="any heading">
   <Input />
 </FormControl>
+```
+
+```jsx
+// smarthr-ui/Checkbox はlabelを含むため、なんの入力要素かが単独で伝えられるので
+// FormControl・Fieldsetで囲む必要はない (Fieldsetで囲んでも問題はない)
+<Checkbox />
+```
 
+```jsx
 <Fieldset title="any heading">
   {radios.map((a) => (
     <RadioButton>{a.label}</RadioButton>
   ))}
 </Fieldset>
+```
 
-<FormControl title="any heading" role="group">
-  <WarekiPicker />
-  ~
-  <WarekiPicker />
-</FormControl>
-
-<Fieldset title="any heading">
-  <FormControl role="group">
+```jsx
+<Fieldset title="date range">
+  <FormControl label={{ text: "start", unrecommendedHide: true }}>
     <WarekiPicker />
-    ~
+  </FormControl>
+  ~
+  <FormControl label={{ text: "end", unrecommendedHide: true }}>
     <WarekiPicker />
-  </FormControl>>
+  </FormControl>
 </Fieldset>
+```
 
+```jsx
 // childrenを持たないFieldset、FormControlは入力要素として扱うためOK
 <Fieldset title="any heading">
   <HogeFieldset />
   <FugaFormControl />
 </Fieldset>
-
-// Sectionより先にFormControl・Fieldsetで囲んでいるためOK
-<Section>
-  <Heading />
-  <FormControl title="any heading">
-    <Input />
-  </FormControl>
-</Section>
-
-// smarthr-ui/Checkbox はlabelを含むため、なんの入力要素かが単独で伝えられるので
-// FormControl・Fieldsetで囲む必要はない (囲んでも問題はない)
-<Checkbox />
 ```

package/rules/a11y-numbered-text-within-ol/README.md

@@ -1,7 +1,29 @@
 # smarthr/a11y-numbered-text-within-ol
 
-- "1. hoge", "2. fuga" ... のように連番のテキストをもつコンポーネントはol要素でマークアップすることを促すルールです
-  - ol要素でマークアップすることで連番テキストをもつ要素同士の関係、順番に意味があることを適切に示すことが出来ます
+"1. hoge", "2. fuga" ... のように連番のテキストはol要素でマークアップすることを促すルールです
+
+## 連番のテキストをolでマークアップするメリット
+
+ol要素でマークアップすることで連番テキストをもつ要素同士の関係、順番に意味があることを適切に表すことが出来ます。<br />
+連番のテキストをol要素でマークアップすることは必須ではありませんが、このルールを導入することでマークアップの基準を揃えることができ、ユーザーに対する情報提供の方法が統一されます。
+
+## 連番として扱われるテキスト
+
+以下の条件に当てはまった場合、連番が設定されているテキストとして扱われます。
+
+- 数値と数値以外の二文字が先頭にある文字列(Aとします)
+- A以降で、Aに設定された数値+1の値を先頭にあり、かつその直後に数値以外の二文字がある文字列
+
+## olとして扱われる要素・コンポーネント
+
+以下はol要素として扱われます
+
+- ol
+- OrderedListが名称のsuffixにつくコンポーネント
+  - 例: 
+    - OrderedList
+    - XxxOrderedList
+    - XxxOrderedYyyList
 
 ## rules
 
@@ -19,17 +41,23 @@
 // ol要素で囲まれていないためNG
 <Any>1. hoge</Any>
 <Any>2. fuga</Any>
+```
 
+```jsx
 // 属性でも同様にチェックする
 <Any title="1. hoge" />
 <Any title="2. fuga" />
+```
 
+```jsx
 // ol要素内で連番を設定しているとNG
 <OrderedList>
   <li>1. hoge</li>
   <li>2. fuga</li>
 </OrderedList>
+```
 
+```jsx
 // 同一のol要素で囲まれていないためNG
 <OrderedList>
   <li>hoge</li>
@@ -37,7 +65,6 @@
 <OrderedList>
   <li>fuga</li>
 </OrderedList>>
-
 ```
 
 ## ✅ Correct
@@ -47,12 +74,16 @@
   <li>hoge</li>
   <li>fuga</li>
 </ol>
+```
 
+```jsx
 <OrderedList>
   <Any title="hoge" />
   <Any title="fuga" />
 </OrderedList>
+```
 
+```jsx
 // デフォルトの連番からフォーマット、スタイルを変更したい場合
 // counter-reset + counter-increment で表現する
 // 参考: [MDN CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)
@@ -71,7 +102,7 @@
 
 const OrderedList = styled.ol`
   list-style: none; // デフォルトのstyleを消す
-  counter-reset: hoge; // カウンターの名称。わかりやすいものなら何でもOK
+  counter-reset: hoge; // カウンターの名称。同一html内で被らない名称にする
 `
 const NumberedHeading = styled(Heading)`
   &::before {

package/rules/best-practice-for-layouts/index.js

@@ -1,6 +1,7 @@
 const MULTI_CHILDREN_REGEX = /(Cluster|Stack)$/
 const REGEX_NLSP = /^\s*\n+\s*$/
 const FLEX_END_REGEX = /^(flex-)?end$/
+const MAP_METHOD_REGEX = /^(map|flatMap)$/
 
 const LAYOUT_COMPONENT_REGEX_WITHOUT_STACK = /(Center|Cluster|Container|Reel|Sidebar)$/
 const LAYOUT_COMPONENT_REGEX = /(Center|Cluster|Container|Reel|Stack|Sidebar)$/
@@ -44,7 +45,7 @@ const searchChildren = (node) => {
     case 'ChainExpression':
       return searchChildren(node.expression)
     case 'CallExpression':
-      return node.callee.property?.name !== 'map'
+      return !MAP_METHOD_REGEX.test(node.callee.property?.name)
     case 'ConditionalExpression':
       return searchChildren(node.consequent) && searchChildren(node.alternate)
     case 'LogicalExpression':
@@ -185,7 +186,7 @@ module.exports = {
           message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください${DETAIL_LINK_MESSAGE}`,
         })
       },
-      [`JSXElement:has( > JSXOpeningElement[name.name=/RadioButton(Panel)?$/]) ${LAYOUT_ELEMENT_NOT_SPAN}`]: (node) => {
+      [`JSXElement[openingElement.name.name=/RadioButton(Panel)?$/] ${LAYOUT_ELEMENT_NOT_SPAN}`]: (node) => {
         const component = node.name.name.match(LAYOUT_COMPONENT_REGEX)[1]
 
         context.report({
@@ -193,7 +194,7 @@ module.exports = {
           message: `RadioButton, RadioButtonPanelの子孫に${component}を置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}`,
         })
       },
-      [`JSXElement:has( > JSXOpeningElement[name.name=/Checkbox?$/]) ${LAYOUT_ELEMENT_NOT_SPAN}`]: (node) => {
+      [`JSXElement[openingElement.name.name=/Checkbox?$/] ${LAYOUT_ELEMENT_NOT_SPAN}`]: (node) => {
         const component = node.name.name.match(LAYOUT_COMPONENT_REGEX)[1]
 
         context.report({

package/rules/best-practice-for-unnesessary-early-return/README.md

@@ -27,12 +27,97 @@ const anyAction = (a) => {
 ```
 
 - 上記のような条件に修正することで、本質的に実行したい処理の条件がわかりやすくなります
-- このルールは以下の条件すべてに合致する場合、NGにします
+- このルールは基本的に以下の条件すべてに合致する場合、NGにします
   - 早期return以降にifやelse、switch, tryがない
   - 早期returnの条件ブロック以降に変数宣言がない
   - 早期returnの条件ブロック以降にreturnがない
   - 早期returnが値を返していない
 
+## 特殊なパターンのチェックについて
+
+### 早期returnが連続する場合
+
+下記のように早期returnが連続している場合、NGになります。
+
+```jsx
+const anyAction = (a, b) => {
+  if (a) return
+  if (b) { return }
+
+  const hoge = 'any'
+  ...
+}
+```
+
+これらの早期returnは本質的に一つの条件のためまとめてください。
+
+```jsx
+const anyAction = (a, b) => {
+  if (a || b) return
+
+  const hoge = 'any'
+  ...
+}
+```
+
+上記のように一つの条件にまとめることで一連の条件であること、よりよい条件がある場合見つけやすくなることなどのメリットがあります。
+
+
+### 早期return直後にifが単独で存在する場合
+
+下記の様に早期return直後にifが単独で存在する場合、NGになります。
+
+```jsx
+const anyAction = (a, b) => {
+  if (a) return
+
+  if (b) {
+    ...
+  }
+}
+```
+
+これらのifは本質的に一つの条件のためまとめてください。
+
+```jsx
+const anyAction = (a, b) => {
+  if (!a && b) {
+    ...
+  }
+}
+```
+
+上記のように一つの条件にまとめることで一連の条件であること、よりよい条件がある場合見つけやすくなることなどのメリットがあります。
+このチェックは **早期return直後にifが単独で存在する場合** のみNGとするため **早期returnの直後にelseをもつifが存在する場合** や **早期returnの直後に複数のifが存在する場合** はNGになりません。
+
+```jsx
+// 早期returnの直後にelseをもつifが存在する場合はOK
+const anyAction = (a, b) => {
+  if (a) return
+
+  if (b) {
+    ...
+  } else {
+    // else ifの場合もNGにならない
+    ...
+  }
+}
+```
+
+```jsx
+// 早期returnの直後に複数のifが存在する場合はOK
+const anyAction = (a, b, c) => {
+  if (a) return
+
+  if (b) {
+    ...
+  }
+  if (c) {
+    ...
+  }
+}
+```
+
 ## rules
 
 ```js

package/rules/best-practice-for-unnesessary-early-return/index.js

@@ -40,8 +40,9 @@ module.exports = {
     const action = (node) => {
       const fn = searchFunction(node).body.body
       // 0: 最初の早期returnを検索中
-      // 1: 最初の早期returnを発見、その後も連続して早期returnが存在する場合
-      // 2: 1の後、早期returnの連続が途切れた場合
+      // 1: 最初の早期returnを発見直後
+      // 2: 1の直後に早期returnではないifが見つかった場合
+      // 3: 1の後にif以外が見つかった場合
       let flg = 0
 
       for (let i = 0; i < fn.length; i++) {
@@ -62,25 +63,43 @@ module.exports = {
           case 'TryStatement':
             return
           case 'IfStatement':
-            if (flg === 1 && node === getEarlyReturn(b)) {
-              context.report({
-                node,
-                message: `早期returnのifが分割されています${DETAIL_LINK}
+            if (flg === 1) {
+              if (node === getEarlyReturn(b)) {
+                context.report({
+                  node,
+                  message: `早期returnのifが分割されています${DETAIL_LINK}
  - 一つのifにまとめるよう、条件を調整してください`,
-              })
+                })
+                return
+              } else if (!b.alternate) {
+                flg = 2
+                continue
+              }
             }
+
             return
         }
 
-        flg = 2
+        flg = 3
       }
 
-      context.report({
-        node,
-        message: `後続の処理の逆の条件の早期returnのため修正してください。${DETAIL_LINK}
+      switch (flg) {
+        case 2:
+          context.report({
+            node,
+            message: `本質的に一つの条件が複数のifに分割されています${DETAIL_LINK}
+ - 直後のifと一つにまとめるよう、条件を調整してください`,
+          })
+          return
+        case 3:
+          context.report({
+            node,
+            message: `後続の処理の逆の条件の早期returnのため修正してください。${DETAIL_LINK}
  - 本質的に行いたい処理の条件とは逆がifに記述されているため、ロジックを確認する際条件を逆転させて考える余計な手間が発生しています
  - 条件を逆転させたうえで後続の処理をifの内部に移動してください`,
-      })
+          })
+          return
+      }
     }
 
     return {

package/rules/trim-props/index.js

@@ -1,16 +1,5 @@
 const SCHEMA = []
 
-const searchBubbleUp = (node) => {
-  switch (node.type) {
-    case 'Program':
-    case 'JSXAttribute':
-      return null
-    case 'TemplateLiteral':
-      return node
-  }
-
-  return searchBubbleUp(node.parent)
-}
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
@@ -23,20 +12,20 @@ module.exports = {
   },
   create(context) {
     const checker = (node) => {
-      // HINT: TemplateLiteralがネストしている場合、親側だけチェックする
-      if (!searchBubbleUp(node.parent)) {
-        return context.report({
-          node,
-          message: `属性に設定している文字列から先頭、末尾の空白文字を削除してください
+      return context.report({
+        node,
+        message: `属性に設定している文字列から先頭、末尾の空白文字を削除してください
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/trim-props`,
-          fix: (fixer) => fixer.replaceText(node, context.sourceCode.getText(node).replace(/^('|"|`)\s+/, '$1').replace(/\s+('|"|`)$/, '$1')),
-        })
-      }
+        fix: (fixer) => fixer.replaceText(node, context.sourceCode.getText(node).replace(/^('|"|`)\s+/, '$1').replace(/\s+('|"|`)$/, '$1')),
+      })
     }
 
     return {
-      'JSXAttribute Literal[value=/(^ | $)/]': checker,
-      'JSXAttribute TemplateLiteral:has( > TemplateElement:matches(:first-child[value.raw=/^ /],:last-child[value.raw=/ $/]))': checker,
+      'JSXAttribute > Literal[value=/(^ | $)/]': checker,
+      'JSXAttribute > JSXExpressionContainer>Literal[value=/(^ | $)/]': checker,
+      'JSXAttribute > JSXExpressionContainer > TemplateLiteral > TemplateElement:matches(:first-child[value.raw=/^ /],:last-child[value.raw=/ $/])': (node) => {
+        checker(node.parent)
+      },
     }
   },
 }

package/test/a11y-heading-in-sectioning-content.js

@@ -20,9 +20,9 @@ const pageMessage = `smarthr-ui/PageHeading が同一ファイル内に複数存
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content`
 const pageInSectionMessage = `smarthr-ui/PageHeadingはsmarthr-uiのArticle, Aside, Nav, Sectionで囲まないでください。囲んでしまうとページ全体の見出しではなくなってしまいます。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content`
-const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性を削除してください。
+const noTagAttrMessage = `tag属性、unrecommendedTag属性を指定せず、smarthr-uiのArticle, Aside, Nav, Sectionのいずれかの自動レベル計算に任せるよう、tag属性、unrecommendedTag属性を削除してください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content
- - tag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
+ - tag属性、unrecommendedTag属性を指定することで意図しないレベルに固定されてしまう可能性があります。`
 const notHaveHeadingMessage = (elementName, isNav) => `${elementName} はHeading要素を含んでいません。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-heading-in-sectioning-content
  - SectioningContentはHeadingを含むようにマークアップする必要があります
@@ -69,6 +69,7 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<Section><Heading>hoge</Heading><Heading>fuga</Heading></Section>', errors: [ { message: lowerMessage } ] },
     { code: '<Section><PageHeading>hoge</PageHeading></Section>', errors: [ { message: pageInSectionMessage } ] },
     { code: '<Section><Heading tag="h2">hoge</Heading></Section>', errors: [ { message: noTagAttrMessage } ] },
+    { code: '<Section><Heading unrecommendedTag="h2">hoge</Heading></Section>', errors: [ { message: noTagAttrMessage } ] },
     { code: '<Section></Section>', errors: [ { message: notHaveHeadingMessage('Section') } ] },
     { code: '<Aside><HogeSection></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') }, { message: notHaveHeadingMessage('HogeSection') } ] },
     { code: '<Aside any="hoge"><HogeSection><Heading /></HogeSection></Aside>', errors: [ { message: notHaveHeadingMessage('Aside') } ] },

package/test/best-practice-for-layouts.js

@@ -17,7 +17,7 @@ const errorMessage = (type, name) => `${name}には子要素が一つしか無
  - styleを確認し、div・spanなど、別要素でマークアップし直すか、${name}を削除してください
  - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
 
-ruleTester.run('best-practice-for-button-element', rule, {
+ruleTester.run('best-practice-for-layouts', rule, {
   valid: [
     { code: `<Center />` },
     { code: `<Cluster />` },
@@ -30,30 +30,30 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<Stack><Hoge /><Hoge /></Stack>` },
     { code: `<Stack>{a}<Hoge /></Stack>` },
     { code: `<AnyStack>{a.map(action)}</AnyStack>` },
-    { code: `<AnyStack>{a?.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a?.flatMap(action)}</AnyStack>` },
     { code: `<AnyStack>{a.b?.map(action)}</AnyStack>` },
-    { code: `<AnyStack>{a?.b?.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a?.b?.flatMap(action)}</AnyStack>` },
     { code: `<AnyStack>{a && <><Hoge /><Hoge /></>}</AnyStack>` },
     { code: `<AnyStack>{a && a.map(action)}</AnyStack>` },
-    { code: `<AnyStack>{a && a.b.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a && a.b.flatMap(action)}</AnyStack>` },
     { code: `<AnyStack>{a || <><Hoge /><Hoge /></>}</AnyStack>` },
     { code: `<AnyStack>{a || a.map(action)}</AnyStack>` },
-    { code: `<AnyStack>{a || a.b.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a || a.b.flatMap(action)}</AnyStack>` },
     { code: `<AnyStack>{a ? a.b.map(action) : <Hoge />}</AnyStack>` },
-    { code: `<AnyStack>{a ? <Hoge /> : a.b.map(action)}</AnyStack>` },
+    { code: `<AnyStack>{a ? <Hoge /> : a.b.flatMap(action)}</AnyStack>` },
     { code: `<AnyStack>{a ? <Hoge /> : a ? <Hoge /> : a.b.map(action)}</AnyStack>` },
     { code: `<Cluster><Hoge /><Hoge /></Cluster>` },
     { code: `<Cluster>{a}<Hoge /></Cluster>` },
-    { code: `<AnyCluster>{a.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a.flatMap(action)}</AnyCluster>` },
     { code: `<AnyCluster>{a && <><Hoge /><Hoge /></>}</AnyCluster>` },
     { code: `<AnyCluster>{a && a.map(action)}</AnyCluster>` },
-    { code: `<AnyCluster>{a && a.b.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a && a.b.flatMap(action)}</AnyCluster>` },
     { code: `<AnyCluster>{a || <><Hoge /><Hoge /></>}</AnyCluster>` },
-    { code: `<AnyCluster>{a || a.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a || a.flatMap(action)}</AnyCluster>` },
     { code: `<AnyCluster>{a || a.b.map(action)}</AnyCluster>` },
-    { code: `<AnyCluster>{a ? a.b.map(action) : <Hoge />}</AnyCluster>` },
+    { code: `<AnyCluster>{a ? a.b.flatMap(action) : <Hoge />}</AnyCluster>` },
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
-    { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.map(action)}</AnyCluster>` },
+    { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.flatMap(action)}</AnyCluster>` },
     { code: `<Cluster justify="flex-end">{a}</Cluster>` },
     { code: `<HogeCluster justify="end" gap={0}>{a}</HogeCluster>` },
     { code: `<Stack align="flex-end">{a}</Stack>` },

package/test/best-practice-for-unnesessary-early-return.js

@@ -18,6 +18,9 @@ const UNNESESSARY_EARLY_RETURN_ERROR = `後続の処理の逆の条件の早期r
 const SPLIT_EARLY_RETURN_ERROR = `早期returnのifが分割されています
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-unnesessary-early-return
  - 一つのifにまとめるよう、条件を調整してください`
+const SPLIT_CONFIG_ERROR = `本質的に一つの条件が複数のifに分割されています
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-unnesessary-early-return
+ - 直後のifと一つにまとめるよう、条件を調整してください`
 
 ruleTester.run('best-practice-for-unnesessary-early-return', rule, {
   valid: [
@@ -109,6 +112,36 @@ ruleTester.run('best-practice-for-unnesessary-early-return', rule, {
         }
       }
     ` },
+    { code: `
+      const anyAction = (a) => {
+        if (!a) {
+          return
+        }
+
+        if (b) { /* any 1 */ } else { /* any 2 */ }
+      }
+    ` },
+    { code: `
+      const anyAction = (a) => {
+        if (!a) {
+          return
+        }
+
+        if (b) { /* any 1 */ }
+        if (c) { /* any 2 */ }
+      }
+    ` },
+    { code: `
+      const anyAction = (a) => {
+        if (!a) {
+          return
+        }
+
+        if (b) { /* any 1 */ }
+        if (c) { /* any 2 */ }
+        any()
+      }
+    ` },
   ],
   invalid: [
     { code: `
@@ -184,6 +217,15 @@ ruleTester.run('best-practice-for-unnesessary-early-return', rule, {
 
         otherAction()
       }
-    `, errors: [ SPLIT_EARLY_RETURN_ERROR ] },
+    `, errors: [ UNNESESSARY_EARLY_RETURN_ERROR, SPLIT_EARLY_RETURN_ERROR ] },
+    { code: `
+      const anyAction = (a, b) => {
+        if (!a) {
+          return
+        }
+
+        if (b) { /* any 1 */ }
+      }
+    `, errors: [ SPLIT_CONFIG_ERROR ] },
   ]
 })

package/test/trim-props.js

@@ -89,12 +89,12 @@ ruleTester.run('trim-props', rule, {
     {
       code: '<div data-spec={` a${b} c `}>....</div>',
       output: '<div data-spec={`a${b} c`}>....</div>',
-      errors: [{ message: ERROR_MESSAGE }],
+      errors: [{ message: ERROR_MESSAGE }, { message: ERROR_MESSAGE }],
     },
     {
       code: '<div data-spec={` a${b ? ` ${c} ` : "  "} d `}>....</div>',
       output: '<div data-spec={`a${b ? ` ${c} ` : "  "} d`}>....</div>',
-      errors: [{ message: ERROR_MESSAGE }],
+      errors: [{ message: ERROR_MESSAGE }, { message: ERROR_MESSAGE }],
     },
   ],
 })