eslint-plugin-smarthr 6.9.1 → 6.10.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.10.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.9.1...eslint-plugin-smarthr-v6.10.0) (2026-04-08)
+
+
+### Features
+
+* **a11y-heading-in-sectioning-content:** Scrollerコンポーネントを許可リストに追加 ([#1204](https://github.com/kufu/tamatebako/issues/1204)) ([7131d5c](https://github.com/kufu/tamatebako/commit/7131d5c2b6feb55ac44f952250f58db962153399))
+
+
+### Bug Fixes
+
+* **best-practice-for-text-component:** key属性対応とコードの最適化 ([#1205](https://github.com/kufu/tamatebako/issues/1205)) ([1c9821c](https://github.com/kufu/tamatebako/commit/1c9821c1d2c4f5d8b09f2a1a1f7e18310aecc31e))
+
 ## [6.9.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v6.9.0...eslint-plugin-smarthr-v6.9.1) (2026-04-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "6.9.1",
+  "version": "6.10.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "5f958652e81f7a69a347489108ff88cb1b3e56dd"
+  "gitHead": "9f682d10a15702c061e23d7c0922e0d3f69149d5"
 }

package/rules/a11y-heading-in-sectioning-content/README.md

@@ -14,7 +14,7 @@ HeadingコンポーネントをSectioningContent(Article, Aside, Nav, Section)
 
 ## SectioningContentとして扱うコンポーネントについて
 
-このルールではsmarthr-ui/Layout系コンポーネント(Center, Reel, Sidebar, Stack)にas属性・forwardedAs属性で`section` `article` `aside` `nav` のいずれかの要素が指定されている場合、SectioningContentとして扱います。<br />
+このルールではsmarthr-ui/Layout系コンポーネント(Center, Cluster, Reel, Scroller, Sidebar, Stack)にas属性・forwardedAs属性で`section` `article` `aside` `nav` のいずれかの要素が指定されている場合、SectioningContentとして扱います。<br />
 Layout系コンポーネントがSectioningContentとして扱われている場合、smarthr-uiの内部実装レベルでもSectioningContentとして扱われるため、前述のHeadingのレベルの自動計算が有効になります。
 
 ## section要素などbuildinのSectiongContentに属する要素の利用について

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

@@ -4,7 +4,7 @@ const declaratorHeadingRegex = /Heading$/
 const sectioningRegex = /((A(rticle|side))|Nav|Section|^SectioningFragment)$/
 const bareTagRegex = /^(article|aside|nav|section)$/
 const modelessDialogRegex = /ModelessDialog$/
-const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
+const layoutComponentRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Scroller|Base(Column)?)$/
 const asRegex = /^(as|forwardedAs)$/
 const ignoreCheckParentTypeRegex = /^(Program|ExportNamedDeclaration)$/
 const noHeadingTagNamesRegex = /^(span|legend)$/

package/rules/best-practice-for-text-component/index.js

@@ -1,6 +1,8 @@
 const SCHEMA = []
 
+// ============================================================
 // smarthr-ui/Textコンポーネントのクラス名とプロパティのマッピング
+// ============================================================
 const CLASS_TO_PROP_MAP = {
   // size
   'shr-text-2xs': { prop: 'size', value: 'XXS' },
@@ -32,35 +34,49 @@ const CLASS_TO_PROP_MAP = {
 
 const REGEX_CLASSNAME_SPLIT = /\s+/
 
-// ESLintセレクタの基本要素
-const ATTR_AS = 'JSXAttribute[name.name="as"]'
+// ============================================================
+// ESLintセレクタ構築用の定数
+// ============================================================
+const CONVERTIBLE_SHR_CLASSES = Object.keys(CLASS_TO_PROP_MAP).join('|')
+const CONVERTIBLE_SHR_PATTERN = `(^|\\s)(${CONVERTIBLE_SHR_CLASSES})(\\s|$)`
+
 const ATTR_CLASSNAME = 'JSXAttribute[name.name="className"]'
-const ATTR_TEXT_PROPS = 'JSXAttribute[name.name=/^(size|weight|color|leading|italic|whiteSpace|maxLines|styleType|icon|prefixIcon|suffixIcon|iconGap)$/]'
 const LITERAL_TYPE = '[value.type="Literal"]'
-const HAS_SHR_CLASS = '[value.value=/shr-/]'
 
-// ESLintセレクタの共通部分
 const TEXT_OPENING = 'JSXOpeningElement[name.name="Text"]'
-const NOT_HAS_AS = `:not(:has(${ATTR_AS}))`
-const HAS_TEXT_PROPS = `:has(${ATTR_TEXT_PROPS})`
-const NOT_HAS_TEXT_PROPS = `:not(${HAS_TEXT_PROPS})`
+const HAS_ANY_ATTR = ':has(JSXAttribute)'
+const HAS_TEXT_PROPS = ':has(JSXAttribute[name.name=/^(size|weight|color|leading|italic|whiteSpace|maxLines|styleType|icon|prefixIcon|suffixIcon|iconGap)$/])'
 const CHILD_CLASSNAME_LITERAL = `> ${ATTR_CLASSNAME}${LITERAL_TYPE}`
-const NOT_HAS_SHR_CLASS = `:not(${HAS_SHR_CLASS})`
-const CHILD_AS_LITERAL = `> ${ATTR_AS}${LITERAL_TYPE}`
-
-// 完全なESLintセレクタ（事前計算）
-const SELECTOR_UNNECESSARY_TEXT_NO_ATTRS = `${TEXT_OPENING}:not(:has(JSXAttribute))`
-const SELECTOR_UNNECESSARY_TEXT_ONLY_AS = `${TEXT_OPENING}[attributes.length=1] ${CHILD_AS_LITERAL}`
-const SELECTOR_CONVERTIBLE_SHR_TO_PROPS = `${TEXT_OPENING}${NOT_HAS_AS}${NOT_HAS_TEXT_PROPS} ${CHILD_CLASSNAME_LITERAL}${HAS_SHR_CLASS}`
-const SELECTOR_UNNECESSARY_TEXT_CLASSNAME = `${TEXT_OPENING}${NOT_HAS_AS}${NOT_HAS_TEXT_PROPS} ${CHILD_CLASSNAME_LITERAL}${NOT_HAS_SHR_CLASS}`
-const SELECTOR_CONVERTIBLE_SHR_TO_PROPS_WITH_AS = `${TEXT_OPENING}:has(${ATTR_AS}${LITERAL_TYPE})${NOT_HAS_TEXT_PROPS} ${CHILD_CLASSNAME_LITERAL}${HAS_SHR_CLASS}`
-const SELECTOR_UNNECESSARY_TEXT_AS_CLASSNAME = `${TEXT_OPENING}:has(${ATTR_CLASSNAME}${LITERAL_TYPE}${NOT_HAS_SHR_CLASS})${NOT_HAS_TEXT_PROPS} ${CHILD_AS_LITERAL}`
-const SELECTOR_CONFLICTING_PROPS_SHR = `${TEXT_OPENING}${HAS_TEXT_PROPS} ${CHILD_CLASSNAME_LITERAL}`
+const HAS_CONVERTIBLE_SHR_CLASS = `[value.value=/${CONVERTIBLE_SHR_PATTERN}/]`
+const HAS_SPREAD = ':has(JSXSpreadAttribute)'
+const NOT_HAS_SPREAD = `:not(${HAS_SPREAD})`
+const NOT_HAS_AS_VARIABLE = ':not(:has(JSXAttribute[name.name="as"]:not([value.type="Literal"])))'
+
+// セレクタ構築用の共通パターン
+const TEXT_WITHOUT_TEXT_PROPS = `${TEXT_OPENING}:not(${HAS_TEXT_PROPS})`
+const CLASSNAME_WITH_CONVERTIBLE_SHR = `${CHILD_CLASSNAME_LITERAL}${HAS_CONVERTIBLE_SHR_CLASS}`
+
+// ============================================================
+// ESLintセレクタ
+// ============================================================
+// Stage 1: shr-クラス → Text属性変換
+const SELECTOR_CONVERTIBLE_SHR_TO_PROPS = `${TEXT_WITHOUT_TEXT_PROPS}${NOT_HAS_SPREAD} ${CLASSNAME_WITH_CONVERTIBLE_SHR}`
+const SELECTOR_CONVERTIBLE_SHR_TO_PROPS_WITH_SPREAD = `${TEXT_WITHOUT_TEXT_PROPS}${HAS_SPREAD} ${CLASSNAME_WITH_CONVERTIBLE_SHR}`
+
+// Stage 2: Text専用属性なし → HTML要素変換
+const SELECTOR_UNNECESSARY_TEXT_NO_ATTRS = `${TEXT_OPENING}:not(${HAS_ANY_ATTR})${NOT_HAS_SPREAD}`
+const SELECTOR_UNNECESSARY_TEXT_NO_CLASSNAME = `${TEXT_WITHOUT_TEXT_PROPS}:not(:has(${ATTR_CLASSNAME}))${HAS_ANY_ATTR}${NOT_HAS_SPREAD}${NOT_HAS_AS_VARIABLE}`
+const SELECTOR_UNNECESSARY_TEXT_WITH_CLASSNAME = `${TEXT_WITHOUT_TEXT_PROPS}:has(${ATTR_CLASSNAME}${LITERAL_TYPE}:not(${HAS_CONVERTIBLE_SHR_CLASS}))${NOT_HAS_SPREAD}${NOT_HAS_AS_VARIABLE}`
+
+// 矛盾検出
+const SELECTOR_CONFLICTING_PROPS_SHR = `${TEXT_OPENING}${HAS_TEXT_PROPS}${NOT_HAS_SPREAD} ${CHILD_CLASSNAME_LITERAL}`
+
+// ============================================================
+// ヘルパー関数
+// ============================================================
 
 /**
- * className属性の変換可能なクラス名のみを取得（パターン3専用: 矛盾チェック）
- * セレクタで [value.type="Literal"] を保証しているため、必ず文字列リテラル
- * trim-props ルールで先頭・末尾の空白は禁止されているため、trim() は不要
+ * className属性から変換可能なクラス名のみを抽出（矛盾検出用）
  */
 function getConvertible(classNameAttrNode) {
   const classNames = classNameAttrNode.value.value.split(REGEX_CLASSNAME_SPLIT)
@@ -76,9 +92,7 @@ function getConvertible(classNameAttrNode) {
 }
 
 /**
- * className属性のクラス名を解析し、1回のループで全ての情報を生成（パターン2-1, 2-2, 2-3専用）
- * セレクタで [value.type="Literal"] を保証しているため、必ず文字列リテラル
- * trim-props ルールで先頭・末尾の空白は禁止されているため、trim() は不要
+ * className属性を変換可能/不可能に分類し、Text属性ペアを生成
  */
 function categorizeClassNames(classNameAttrNode) {
   const classNames = classNameAttrNode.value.value.split(REGEX_CLASSNAME_SPLIT)
@@ -104,8 +118,7 @@ function categorizeClassNames(classNameAttrNode) {
 }
 
 /**
- * 指定した属性の値を取得（文字列リテラルのみ）
- * セレクタで [value.type="Literal"] を保証しているため、型チェックは不要
+ * 属性の文字列リテラル値を取得
  */
 function getAttributeLiteralValue(openingElement, attrName) {
   const attr = openingElement.attributes.find(
@@ -115,7 +128,7 @@ function getAttributeLiteralValue(openingElement, attrName) {
 }
 
 /**
- * 指定した属性名の属性ノードを取得
+ * 属性ノードを取得
  */
 function getAttributeNode(openingElement, attrName) {
   return openingElement.attributes.find(
@@ -134,72 +147,12 @@ module.exports = {
   },
   create(context) {
     return {
-      // パターン1-1: 属性なし
-      [SELECTOR_UNNECESSARY_TEXT_NO_ATTRS]: (node) => {
-        context.report({
-          node,
-          message: `属性を持たないTextコンポーネントは、<span>に置き換えるか、要素を削除してテキストのみにすることを検討してください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - Textコンポーネントに属性がない場合、直接HTML要素を使用するか、不要な要素を削除することでシンプルになります
- - weight、size、color等の属性がある場合は、Textコンポーネントのまま利用してください`,
-        })
-      },
-
-      // パターン1-2: as属性のみ（文字列リテラル）
-      [SELECTOR_UNNECESSARY_TEXT_ONLY_AS]: (asAttrNode) => {
-        const tagName = asAttrNode.value.value
-
-        context.report({
-          node: asAttrNode.parent,
-          message: `as属性のみを持つTextコンポーネントは、ネイティブHTML要素（<${tagName}>）に置き換えてください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - Textコンポーネントにas以外の属性がない場合、直接HTML要素を使用することでシンプルになります
- - weight、size、color等の属性がある場合は、Textコンポーネントのまま利用してください`,
-          fix(fixer) {
-            const openingElement = asAttrNode.parent
-            const jsxElement = openingElement.parent
-            const sourceCode = context.sourceCode || context.getSourceCode()
-
-            // 属性とその前のスペースを含めて削除
-            const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
-            const rangeStart = tokenBefore.range[1]
-            const rangeEnd = asAttrNode.range[1]
-
-            return [
-              fixer.removeRange([rangeStart, rangeEnd]),
-              fixer.replaceText(openingElement.name, tagName),
-              fixer.replaceText(jsxElement.closingElement.name, tagName)
-            ]
-          },
-        })
-      },
-
-      // パターン2-1: classNameのみ（asなし）、Text属性なし、shr-クラスあり
+      // Stage 1: shr-クラス → Text属性変換（spread attributesなし）
       [SELECTOR_CONVERTIBLE_SHR_TO_PROPS]: (classNameAttrNode) => {
         const { nonConvertible, propSuggestions, convertible } = categorizeClassNames(classNameAttrNode)
         const openingElement = classNameAttrNode.parent
-        const jsxElement = openingElement.parent
-
-        // 変換可能なクラスが0個の場合、spanに変換（パターン1-3と同じ動作）
-        if (!propSuggestions) {
-          const classNameText = `className="${classNameAttrNode.value.value}"`
-          context.report({
-            node: openingElement,
-            message: `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <span ${classNameText}>
- - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
-            fix(fixer) {
-              return [
-                fixer.replaceText(openingElement.name, 'span'),
-                fixer.replaceText(jsxElement.closingElement.name, 'span')
-              ]
-            },
-          })
-          return
-        }
+        const sourceCode = context.sourceCode || context.getSourceCode()
 
-        // 変換可能なクラスがある場合、属性に変換
         context.report({
           node: openingElement,
           message: `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
@@ -208,157 +161,123 @@ module.exports = {
  - 変換可能なクラス: ${convertible}
  - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`,
           fix(fixer) {
-            const sourceCode = context.sourceCode || context.getSourceCode()
             const fixes = []
-
             if (nonConvertible) {
-              // classNameの値を更新（属性自体は残す）
               fixes.push(fixer.replaceText(classNameAttrNode.value, `"${nonConvertible}"`))
             } else {
-              // className属性全体を削除（shr-クラスのみの場合）
               const tokenBefore = sourceCode.getTokenBefore(classNameAttrNode)
-              const rangeStart = tokenBefore.range[1]
-              const rangeEnd = classNameAttrNode.range[1]
-              fixes.push(fixer.removeRange([rangeStart, rangeEnd]))
+              fixes.push(fixer.removeRange([tokenBefore.range[1], classNameAttrNode.range[1]]))
+            }
+            const asAttrNode = getAttributeNode(openingElement, 'as')
+            if (asAttrNode) {
+              fixes.push(fixer.insertTextAfter(asAttrNode, ` ${propSuggestions}`))
+            } else {
+              fixes.push(fixer.insertTextAfter(openingElement.name, ` ${propSuggestions}`))
             }
-
-            // 新しいpropsを追加
-            fixes.push(fixer.insertTextAfter(openingElement.name, ` ${propSuggestions}`))
-
             return fixes
           },
         })
       },
 
-      // パターン1-3: classNameのみ（asなし）、Text属性なし、shr-クラスなし
-      [SELECTOR_UNNECESSARY_TEXT_CLASSNAME]: (classNameAttrNode) => {
-        const classNameText = `className="${classNameAttrNode.value.value}"`
+      // Stage 1: shr-クラス → Text属性変換（spread attributesあり、fixなし）
+      [SELECTOR_CONVERTIBLE_SHR_TO_PROPS_WITH_SPREAD]: (classNameAttrNode) => {
+        const { convertible } = categorizeClassNames(classNameAttrNode)
+        const openingElement = classNameAttrNode.parent
 
         context.report({
-          node: classNameAttrNode.parent,
-          message: `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
+          node: openingElement,
+          message: `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <span ${classNameText}>
- - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
-          fix(fixer) {
-            const openingElement = classNameAttrNode.parent
-            const jsxElement = openingElement.parent
-
-            return [
-              fixer.replaceText(openingElement.name, 'span'),
-              fixer.replaceText(jsxElement.closingElement.name, 'span')
-            ]
-          },
+ - 変換可能なクラス: ${convertible}
+ - spread attributes ({...props}) があるため自動修正できません。手動で修正してください
+ - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`,
         })
       },
 
-      // パターン2-2, 2-3: className + as（文字列リテラル）、Text属性なし、shr-クラスあり
-      [SELECTOR_CONVERTIBLE_SHR_TO_PROPS_WITH_AS]: (classNameAttrNode) => {
-        const { nonConvertible, propSuggestions, convertible } = categorizeClassNames(classNameAttrNode)
-        const openingElement = classNameAttrNode.parent
-        const jsxElement = openingElement.parent
-        const asValue = getAttributeLiteralValue(openingElement, 'as')
-
-        // 変換可能なクラスが0個の場合、as属性で指定されたタグに変換（パターン1-4と同じ動作）
-        if (!propSuggestions) {
-          const classNameValue = getAttributeLiteralValue(openingElement, 'className')
-          const classNameText = `className="${classNameValue}"`
-          context.report({
-            node: openingElement,
-            message: `Textコンポーネントの機能を使用していないため、ネイティブHTML要素に置き換えてください。
+      // Stage 2: 属性なし
+      [SELECTOR_UNNECESSARY_TEXT_NO_ATTRS]: (node) => {
+        context.report({
+          node,
+          message: `属性を持たないTextコンポーネントは、<span>に置き換えるか、要素を削除してテキストのみにすることを検討してください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - <${asValue}>要素にclassNameを移動してください
- - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
-            fix(fixer) {
-              const sourceCode = context.sourceCode || context.getSourceCode()
-              const asAttrNode = getAttributeNode(openingElement, 'as')
+ - Textコンポーネントに属性がない場合、直接HTML要素を使用するか、不要な要素を削除することでシンプルになります
+ - weight、size、color等の属性がある場合は、Textコンポーネントのまま利用してください`,
+        })
+      },
 
-              // 属性とその前のスペースを含めて削除
-              const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
-              const rangeStart = tokenBefore.range[1]
-              const rangeEnd = asAttrNode.range[1]
-
-              return [
-                fixer.removeRange([rangeStart, rangeEnd]),
-                fixer.replaceText(openingElement.name, asValue),
-                fixer.replaceText(jsxElement.closingElement.name, asValue)
-              ]
-            },
-          })
-          return
-        }
+      // Stage 2: classNameなし
+      [SELECTOR_UNNECESSARY_TEXT_NO_CLASSNAME]: (node) => {
+        const asValue = getAttributeLiteralValue(node, 'as')
+        const tagName = asValue || 'span'
+        const sourceCode = context.sourceCode || context.getSourceCode()
 
-        // 変換可能なクラスがある場合、属性に変換
         context.report({
-          node: openingElement,
-          message: `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
+          node,
+          message: asValue
+            ? `as属性のみを持つTextコンポーネントは、ネイティブHTML要素（<${tagName}>）に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <Text${asValue ? ` as="${asValue}"` : ''} ${propSuggestions}${nonConvertible ? ` className="${nonConvertible}"` : ''}>
- - 変換可能なクラス: ${convertible}
- - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`,
+ - Textコンポーネントにas以外の属性がない場合、直接HTML要素を使用することでシンプルになります
+ - weight、size、color等の属性がある場合は、Textコンポーネントのまま利用してください`
+            : `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
+ - 推奨: <span>
+ - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
           fix(fixer) {
-            const sourceCode = context.sourceCode || context.getSourceCode()
+            const jsxElement = node.parent
             const fixes = []
-
-            if (nonConvertible) {
-              // classNameの値を更新（属性自体は残す）
-              fixes.push(fixer.replaceText(classNameAttrNode.value, `"${nonConvertible}"`))
-            } else {
-              // className属性全体を削除（shr-クラスのみの場合）
-              const tokenBefore = sourceCode.getTokenBefore(classNameAttrNode)
-              const rangeStart = tokenBefore.range[1]
-              const rangeEnd = classNameAttrNode.range[1]
-              fixes.push(fixer.removeRange([rangeStart, rangeEnd]))
-            }
-
-            // 新しいpropsを追加（as属性がある場合はその後ろに挿入）
-            const asAttrNode = getAttributeNode(openingElement, 'as')
-            if (asAttrNode) {
-              fixes.push(fixer.insertTextAfter(asAttrNode, ` ${propSuggestions}`))
-            } else {
-              fixes.push(fixer.insertTextAfter(openingElement.name, ` ${propSuggestions}`))
+            // as属性があれば削除
+            if (asValue) {
+              const asAttrNode = getAttributeNode(node, 'as')
+              const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
+              fixes.push(fixer.removeRange([tokenBefore.range[1], asAttrNode.range[1]]))
             }
-
+            fixes.push(fixer.replaceText(node.name, tagName))
+            fixes.push(fixer.replaceText(jsxElement.closingElement.name, tagName))
             return fixes
           },
         })
       },
 
-      // パターン1-4: className + as（文字列リテラル）、Text属性なし、shr-クラスなし
-      [SELECTOR_UNNECESSARY_TEXT_AS_CLASSNAME]: (asAttrNode) => {
-        const tagName = asAttrNode.value.value
-        const openingElement = asAttrNode.parent
-        const classNameValue = getAttributeLiteralValue(openingElement, 'className')
-        const classNameText = `className="${classNameValue}"`
+      // Stage 2: classNameあり
+      [SELECTOR_UNNECESSARY_TEXT_WITH_CLASSNAME]: (node) => {
+        const asValue = getAttributeLiteralValue(node, 'as')
+        const classNameValue = getAttributeLiteralValue(node, 'className')
+        const tagName = asValue || 'span'
+        const sourceCode = context.sourceCode || context.getSourceCode()
+
+        // classNameは常に表示（fixerが自動で保持するため）
+        const classNameText = classNameValue ? ` className="${classNameValue}"` : ''
 
         context.report({
-          node: openingElement,
-          message: `Textコンポーネントの機能を使用していないため、ネイティブHTML要素に置き換えてください。
+          node,
+          message: asValue
+            ? `Textコンポーネントの機能を使用していないため、ネイティブHTML要素に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
  - <${tagName}>要素にclassNameを移動してください
+ - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`
+            : `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
+ - 推奨: <span${classNameText}>
  - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`,
           fix(fixer) {
-            const jsxElement = openingElement.parent
-            const sourceCode = context.sourceCode || context.getSourceCode()
-
-            // 属性とその前のスペースを含めて削除
-            const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
-            const rangeStart = tokenBefore.range[1]
-            const rangeEnd = asAttrNode.range[1]
-
-            return [
-              fixer.removeRange([rangeStart, rangeEnd]),
-              fixer.replaceText(openingElement.name, tagName),
-              fixer.replaceText(jsxElement.closingElement.name, tagName)
-            ]
+            const jsxElement = node.parent
+            const fixes = []
+            // as属性があれば削除
+            if (asValue) {
+              const asAttrNode = getAttributeNode(node, 'as')
+              const tokenBefore = sourceCode.getTokenBefore(asAttrNode)
+              fixes.push(fixer.removeRange([tokenBefore.range[1], asAttrNode.range[1]]))
+            }
+            fixes.push(fixer.replaceText(node.name, tagName))
+            fixes.push(fixer.replaceText(jsxElement.closingElement.name, tagName))
+            return fixes
           },
         })
       },
 
-      // パターン3: Text属性あり、classNameにshr-クラスあり（矛盾）
+      // 矛盾検出
       [SELECTOR_CONFLICTING_PROPS_SHR]: (classNameAttrNode) => {
         const convertible = getConvertible(classNameAttrNode)
-
         if (convertible) {
           context.report({
             node: classNameAttrNode.parent,

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

@@ -47,11 +47,13 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
     { code: '<Reel as="aside"><div><Heading>hoge</Heading></div></Reel>' },
     { code: '<Sidebar as="nav"><div><Heading>hoge</Heading></div></Sidebar>' },
     { code: '<Stack as="section"><div><Heading>hoge</Heading></div></Stack>' },
+    { code: '<Scroller as="section"><div><Heading>hoge</Heading></div></Scroller>' },
     { code: '<HogeCenter forwardedAs="section"><div><Heading>hoge</Heading></div></HogeCenter>' },
     { code: '<HogeCluster forwardedAs="section"><div><Heading>hoge</Heading></div></HogeCluster>' },
     { code: '<HogeReel forwardedAs="aside"><div><Heading>hoge</Heading></div></HogeReel>' },
     { code: '<HogeSidebar forwardedAs="nav"><div><Heading>hoge</Heading></div></HogeSidebar>' },
     { code: '<HogeStack forwardedAs="section"><div><Heading>hoge</Heading></div></HogeStack>' },
+    { code: '<HogeScroller forwardedAs="section"><div><Heading>hoge</Heading></div></HogeScroller>' },
     { code: '<HogeBase as="aside"><Heading>hoge</Heading></HogeBase>' },
     { code: '<HogeBaseColumn forwardedAs="nav"><Heading>hoge</Heading></HogeBaseColumn>' },
     { code: '<HogeNav aria-label="any"><Any /></HogeNav>' },

package/test/best-practice-for-text-component.js

@@ -23,7 +23,7 @@ const errorAsOnly = (tag) => `as属性のみを持つTextコンポーネント
 
 const errorUnnecessaryClassName = (className) => `Textコンポーネントの機能を使用していないため、ネイティブHTML要素（<span>）に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <span className="${className}">
+ - 推奨: <span${className ? ` className="${className}"` : ''}>
  - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`
 
 const errorUnnecessaryAsClassName = (tag) => `Textコンポーネントの機能を使用していないため、ネイティブHTML要素に置き換えてください。
@@ -31,12 +31,18 @@ const errorUnnecessaryAsClassName = (tag) => `Textコンポーネントの機能
  - <${tag}>要素にclassNameを移動してください
  - Textコンポーネントの機能（weight、size、color等）を使用しない場合は、直接HTML要素を使用することでシンプルになります`
 
-const errorConvertibleShr = (suggestion, convertible, as = null) => `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
+const errorConvertibleShr = (suggestion, convertible) => `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
- - 推奨: <Text${as ? ` as="${as}"` : ''} ${suggestion}>
+ - 推奨: <Text ${suggestion}>
  - 変換可能なクラス: ${convertible}
  - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`
 
+const errorConvertibleShrWithSpread = (convertible) => `classNameで指定されたshr-プレフィックスのクラスは、Textコンポーネントの属性に置き換えてください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
+ - 変換可能なクラス: ${convertible}
+ - spread attributes ({...props}) があるため自動修正できません。手動で修正してください
+ - shr-プレフィックスのクラスをTextの属性に置き換えることで、型安全性が向上し、意図がより明確になります`
+
 const errorConflictingProps = (convertible) => `Textコンポーネントの属性とclassNameで矛盾する指定があります。
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-text-component
  - 変換可能なクラス: ${convertible}
@@ -52,12 +58,6 @@ ruleTester.run('best-practice-for-text-component', rule, {
     { code: `<Text weight="bold">content</Text>` },
     { code: `<Text size="M">text</Text>` },
     { code: `<Text color="TEXT_GREY">text</Text>` },
-    { code: `<Text leading="TIGHT">text</Text>` },
-    { code: `<Text italic>text</Text>` },
-    { code: `<Text whiteSpace="nowrap">text</Text>` },
-    { code: `<Text maxLines={2}>text</Text>` },
-    { code: `<Text styleType="blockTitle">text</Text>` },
-    { code: `<Text icon={<Icon />}>text</Text>` },
     // as + スタイリング属性
     { code: `<Text as="p" weight="bold">content</Text>` },
     // Textのスタイリング属性 + className（変換不可能なクラスのみ）
@@ -65,28 +65,33 @@ ruleTester.run('best-practice-for-text-component', rule, {
     // className が変数や式の場合は静的解析できないのでスキップ
     { code: `<Text className={customClass}>text</Text>` },
     { code: `<Text className={\`custom-\${type}\`}>text</Text>` },
-    { code: `<Text as="p" className={customClass}>text</Text>` },
-    { code: `<Text size="M" className={customClass}>text</Text>` },
     // as が変数の場合
     { code: `<Text as={component}>text</Text>` },
+    // spread attributes は静的解析できないのでスキップ（変換不可能なclassNameの場合）
+    { code: `<Text {...props}>content</Text>` },
+    { code: `<Text {...props} className="custom">content</Text>` },
+    // key + Text専用属性（size等）→ valid
+    { code: `<Text key="item-1" size="M">text</Text>` },
+    { code: `<Text key={itemId} weight="bold">text</Text>` },
   ],
   invalid: [
     // パターン1-1: 属性なし
     { code: `<Text>content</Text>`, errors: [{ message: ERROR_NO_ATTRS }] },
 
+    // パターン1-1b: key属性のみ（key属性は無視してspanに変換）
+    { code: `<Text key="item-1">content</Text>`, output: `<span key="item-1">content</span>`, errors: [{ message: errorUnnecessaryClassName('') }] },
+
     // パターン1-2: as属性のみ
     { code: `<Text as="p">content</Text>`, output: `<p>content</p>`, errors: [{ message: errorAsOnly('p') }] },
-    { code: `<Text as="div">content</Text>`, output: `<div>content</div>`, errors: [{ message: errorAsOnly('div') }] },
-    { code: `<Text as="p">
-      nested content
-    </Text>`, output: `<p>
-      nested content
-    </p>`, errors: [{ message: errorAsOnly('p') }] },
+
+    // パターン1-2b: as + key属性のみ（key属性は無視してasタグに変換）
+    { code: `<Text as="p" key="item-1">content</Text>`, output: `<p key="item-1">content</p>`, errors: [{ message: errorAsOnly('p') }] },
 
     // パターン1-3: classNameのみ（変換不可能なクラスのみ）
     { code: `<Text className="custom">content</Text>`, output: `<span className="custom">content</span>`, errors: [{ message: errorUnnecessaryClassName('custom') }] },
-    { code: `<Text className="custom-class another-class">text</Text>`, output: `<span className="custom-class another-class">text</span>`, errors: [{ message: errorUnnecessaryClassName('custom-class another-class') }] },
-    { code: `<Text className="custom"><span>nested</span></Text>`, output: `<span className="custom"><span>nested</span></span>`, errors: [{ message: errorUnnecessaryClassName('custom') }] },
+
+    // パターン1-3b: className + key属性（key属性は保持される）
+    { code: `<Text className="custom" key="item-1">content</Text>`, output: `<span className="custom" key="item-1">content</span>`, errors: [{ message: errorUnnecessaryClassName('custom') }] },
 
     // パターン1-4: className + as（変換不可能なクラスのみ）
     { code: `<Text as="p" className="custom">content</Text>`, output: `<p className="custom">content</p>`, errors: [{ message: errorUnnecessaryAsClassName('p') }] },
@@ -97,12 +102,12 @@ ruleTester.run('best-practice-for-text-component', rule, {
     { code: `<Text className="shr-text-lg shr-font-bold shr-text-grey">text</Text>`, output: `<Text size="L" weight="bold" color="TEXT_GREY">text</Text>`, errors: [{ message: errorConvertibleShr('size="L" weight="bold" color="TEXT_GREY"', 'shr-text-lg, shr-font-bold, shr-text-grey') }] },
 
     // パターン2-2: className + as（すべて変換可能）
-    { code: `<Text as="p" className="shr-text-sm">text</Text>`, output: `<Text as="p" size="S">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm', 'p') }] },
-    { code: `<Text as="p" className="shr-text-sm shr-font-bold">text</Text>`, output: `<Text as="p" size="S" weight="bold">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" weight="bold"', 'shr-text-sm, shr-font-bold', 'p') }] },
+    { code: `<Text as="p" className="shr-text-sm">text</Text>`, output: `<Text as="p" size="S">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm') }] },
+    { code: `<Text as="p" className="shr-text-sm shr-font-bold">text</Text>`, output: `<Text as="p" size="S" weight="bold">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" weight="bold"', 'shr-text-sm, shr-font-bold') }] },
 
     // パターン2-3: 一部のみ変換可能
     { code: `<Text className="shr-text-sm custom-class">text</Text>`, output: `<Text size="S" className="custom-class">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom-class"', 'shr-text-sm') }] },
-    { code: `<Text as="p" className="shr-text-sm custom-class">text</Text>`, output: `<Text as="p" size="S" className="custom-class">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom-class"', 'shr-text-sm', 'p') }] },
+    { code: `<Text as="p" className="shr-text-sm custom-class">text</Text>`, output: `<Text as="p" size="S" className="custom-class">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom-class"', 'shr-text-sm') }] },
     { code: `<Text className="shr-text-lg shr-font-bold custom-one custom-two">text</Text>`, output: `<Text size="L" weight="bold" className="custom-one custom-two">text</Text>`, errors: [{ message: errorConvertibleShr('size="L" weight="bold" className="custom-one custom-two"', 'shr-text-lg, shr-font-bold') }] },
 
     // パターン2-4: shr-プレフィックスがあるが変換不可能なクラスのみ（spanに変換）
@@ -116,19 +121,15 @@ ruleTester.run('best-practice-for-text-component', rule, {
     { code: `<Text size="L" className="shr-text-sm shr-font-bold">text</Text>`, errors: [{ message: errorConflictingProps('shr-text-sm, shr-font-bold') }] },
     { code: `<Text size="M" className="shr-text-sm custom-class">text</Text>`, errors: [{ message: errorConflictingProps('shr-text-sm') }] },
 
-    // 追加テスト: 各クラスの網羅性確認
-    { code: `<Text className="shr-text-2xs">text</Text>`, output: `<Text size="XXS">text</Text>`, errors: [{ message: errorConvertibleShr('size="XXS"', 'shr-text-2xs') }] },
-    { code: `<Text className="shr-text-2xl">text</Text>`, output: `<Text size="XXL">text</Text>`, errors: [{ message: errorConvertibleShr('size="XXL"', 'shr-text-2xl') }] },
-    { code: `<Text className="shr-leading-none">text</Text>`, output: `<Text leading="NONE">text</Text>`, errors: [{ message: errorConvertibleShr('leading="NONE"', 'shr-leading-none') }] },
-    { code: `<Text className="shr-text-white">text</Text>`, output: `<Text color="TEXT_WHITE">text</Text>`, errors: [{ message: errorConvertibleShr('color="TEXT_WHITE"', 'shr-text-white') }] },
-    { code: `<Text className="shr-text-color-inherit">text</Text>`, output: `<Text color="inherit">text</Text>`, errors: [{ message: errorConvertibleShr('color="inherit"', 'shr-text-color-inherit') }] },
-
     // 追加テスト: 未知の属性が保持されることを確認
     { code: `<Text className="custom" id="foo">text</Text>`, output: `<span className="custom" id="foo">text</span>`, errors: [{ message: errorUnnecessaryClassName('custom') }] },
-    { code: `<Text as="p" className="custom" id="foo">text</Text>`, output: `<p className="custom" id="foo">text</p>`, errors: [{ message: errorUnnecessaryAsClassName('p') }] },
-    { code: `<Text id="foo" className="shr-text-sm">text</Text>`, output: `<Text size="S" id="foo">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm') }] },
-    { code: `<Text id="foo" className="shr-text-sm custom">text</Text>`, output: `<Text size="S" id="foo" className="custom">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom"', 'shr-text-sm') }] },
-    { code: `<Text as="p" id="foo" className="shr-text-sm">text</Text>`, output: `<Text as="p" size="S" id="foo">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm', 'p') }] },
-    { code: `<Text as="p" id="foo" onClick={handler} className="shr-text-sm custom">text</Text>`, output: `<Text as="p" size="S" id="foo" onClick={handler} className="custom">text</Text>`, errors: [{ message: errorConvertibleShr('size="S" className="custom"', 'shr-text-sm', 'p') }] },
+    { code: `<Text as="p" id="foo" className="shr-text-sm">text</Text>`, output: `<Text as="p" size="S" id="foo">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm') }] },
+
+    // key属性対応テスト（追加のエッジケース）
+    { code: `<Text key="item-1" className="shr-text-sm">text</Text>`, output: `<Text size="S" key="item-1">text</Text>`, errors: [{ message: errorConvertibleShr('size="S"', 'shr-text-sm') }] },
+
+    // spread attributes + 変換可能なclassName（fixなし、警告のみ）
+    { code: `<Text {...props} className="shr-text-sm">text</Text>`, errors: [{ message: errorConvertibleShrWithSpread('shr-text-sm') }] },
+    { code: `<Text {...props} className="shr-text-sm shr-font-bold">text</Text>`, errors: [{ message: errorConvertibleShrWithSpread('shr-text-sm, shr-font-bold') }] },
   ]
 })