eslint-plugin-smarthr 2.5.0 → 3.1.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.
 
+## [3.1.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v3.0.0...eslint-plugin-smarthr-v3.1.0) (2025-12-10)
+
+
+### Features
+
+* best-practice-for-layoutsにradio, checkに対するチェックを追加 ([#937](https://github.com/kufu/tamatebako/issues/937)) ([97a393a](https://github.com/kufu/tamatebako/commit/97a393a9ae2a4cdfbfe8b82aba8cf15f22991e45))
+
+## [3.0.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.5.0...eslint-plugin-smarthr-v3.0.0) (2025-12-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* a11y-required-layout-as-attributeを削除する ([#919](https://github.com/kufu/tamatebako/issues/919))
+
+### Features
+
+* a11y-required-layout-as-attributeを削除する ([#919](https://github.com/kufu/tamatebako/issues/919)) ([fbf6897](https://github.com/kufu/tamatebako/commit/fbf68978c6b2590cf031cdea6badb9edf7faab96))
+
+
+### Bug Fixes
+
+* require-i18n-textで特定の文字列の場合、修正対象にしないように調整 ([#924](https://github.com/kufu/tamatebako/issues/924)) ([ddfb24b](https://github.com/kufu/tamatebako/commit/ddfb24b82a784312eb4750e87fbcd7c1374d6fcf))
+
 ## [2.5.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.4.0...eslint-plugin-smarthr-v2.5.0) (2025-12-04)
 
 

package/README.md

@@ -14,7 +14,6 @@
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-prohibit-input-placeholder)
 - [a11y-prohibit-sectioning-content-in-form](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-prohibit-sectioning-content-in-form)
 - [a11y-prohibit-useless-sectioning-fragment](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-prohibit-useless-sectioning-fragment)
-- [a11y-required-layout-as-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-required-layout-as-attribute)
 - [a11y-trigger-has-button](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-trigger-has-button)
 - [best-practice-for-async-current-target](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-async-current-target)
 - [best-practice-for-button-element](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-button-element)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "2.5.0",
+  "version": "3.1.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.46.3"
+    "typescript-eslint": "^8.48.1"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "f066316ebb46360a61effed8bec040ba0dedd11a"
+  "gitHead": "beddf6927401452bb9ac84ab7de9bb3fe0d85461"
 }

package/rules/a11y-input-has-name-attribute/index.js

@@ -6,8 +6,10 @@ const OPTION = (() => {
   const file = `${process.cwd()}/package.json`
 
   if (fs.existsSync(file)) {
+    const packageConfig = JSON5.parse(fs.readFileSync(file)).dependencies
+
     return {
-      react_hook_form: Object.keys(JSON5.parse(fs.readFileSync(file)).dependencies).includes('react-hook-form'),
+      react_hook_form: packageConfig ? Object.keys(packageConfig).includes('react-hook-form') : false,
     }
   }
 

package/rules/best-practice-for-layouts/README.md

@@ -37,6 +37,11 @@
     <SubText />
   </Stack>
 } />
+
+// Checkbox, RadioButtonのchildrenにLayout系コンポーネントを設置する場合、as・forwardedAs属性にspanを指定していないければエラー
+<AnyRadioButton><Cluster><A /><B /></Cluster></AnyRadioButton>
+<RadioButtonPanel><AnyStack><A /><B /></AnyStack></RadioButtonPanel>
+<AnyCheckbox><Sidebar><A /><B /></Sidebar></AnyCheckbox>
 ```
 
 ## ✅ Correct
@@ -94,4 +99,9 @@
   statusLabels={<RequiredLabel />}
   subActionArea={<HelpLink />}
 />
+
+// Checkbox, RadioButtonのchildrenにLayout系コンポーネントを設置する場合、as・forwardedAs属性にspanを指定する
+<AnyRadioButton><Cluster as="span"><A /><B /></Cluster></AnyRadioButton>
+<RadioButtonPanel><AnyStack forwardedAs="span"><A /><B /></AnyStack></RadioButtonPanel>
+<AnyCheckbox><Sidebar as="span"><A /><B /></Sidebar></AnyCheckbox>
 ```

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

@@ -2,14 +2,17 @@ const MULTI_CHILDREN_REGEX = /(Cluster|Stack)$/
 const REGEX_NLSP = /^\s*\n+\s*$/
 const FLEX_END_REGEX = /^(flex-)?end$/
 
-const TARGET_INVALID_COMPONENT_REGEX = /(Center|Cluster|Container|Reel|Sidebar)$/
-const INVALID_ELEMENT = `JSXOpeningElement[name.name=${TARGET_INVALID_COMPONENT_REGEX}]`
+const LAYOUT_COMPONENT_REGEX_WITHOUT_STACK = /(Center|Cluster|Container|Reel|Sidebar)$/
+const LAYOUT_COMPONENT_REGEX = /(Center|Cluster|Container|Reel|Stack|Sidebar)$/
+const LAYOUT_COMPONENT_ELEMENT_WITHOUT_STACK = `JSXOpeningElement[name.name=${LAYOUT_COMPONENT_REGEX_WITHOUT_STACK}]`
 const HEADING_ELEMENT = 'JSXElement[openingElement.name.name=/Heading$/]'
-const STACK_ELEMENT_NOT_SPAN = 'JSXOpeningElement[name.name=/Stack$/]:not(:has(JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value="span"]))'
+const NOT_HAS_AS_SPAN_ATTRIBUTE = ':not(:has(JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value="span"]))'
+const STACK_ELEMENT_NOT_SPAN = `JSXOpeningElement[name.name=/Stack$/]${NOT_HAS_AS_SPAN_ATTRIBUTE}`
+const LAYOUT_ELEMENT_NOT_SPAN = `JSXOpeningElement[name.name=${LAYOUT_COMPONENT_REGEX}]${NOT_HAS_AS_SPAN_ATTRIBUTE}`
 const FORM_CONTROL_LABEL_ATTRIBUTE = 'JSXOpeningElement[name.name=/FormControl$/] JSXAttribute[name.name="label"]'
 const FIELDSET_LEGEND_ATTRIBUTE = 'JSXOpeningElement[name.name=/Fieldset$/] JSXAttribute[name.name="legend"]'
 const ICON_ELEMENT_WITH_TEXT = `JSXOpeningElement[name.name=/Icon$/]:has(JSXAttribute[name.name="text"])`
-const TEXT_ELEMENT_WITH_PREFIX = 'JSXOpeningElement[name.name=/Text$/]:has(JSXAttribute[name.name="prefixIcon"])'
+const TEXT_ELEMENT_WITH_PREFIX = 'JSXOpeningElement[name.name=/Text$/]:has(JSXAttribute[name.name=/^(prefixIcon|icon)$/])'
 
 const filterFalsyJSXText = (cs) => cs.filter(checkFalsyJSXText)
 const checkFalsyJSXText = (c) => (
@@ -51,6 +54,9 @@ const searchChildren = (node) => {
   return true
 }
 
+const DETAIL_LINK_MESSAGE = `
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`
+
 const SCHEMA = []
 
 /**
@@ -91,8 +97,7 @@ module.exports = {
           } else if (gapAttr?.value.type === 'JSXExpressionContainer' && gapAttr.value.expression.value === 0) {
             context.report({
               node,
-              message: `${nodeName} に "gap={0}" が指定されており、smarthr-ui/${layoutType} の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts
+              message: `${nodeName} に "gap={0}" が指定されており、smarthr-ui/${layoutType} の利用方法として誤っている可能性があります。以下の修正方法を検討してください。${DETAIL_LINK_MESSAGE}
  - 方法1: 子要素を一つにまとめられないか検討してください
    - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど
  - 方法2: 子要素のstyleを確認しgap属性を0以外にできないか検討してください
@@ -116,79 +121,84 @@ module.exports = {
               node,
               message:
                 (justifyAttr?.value.value === 'center' || alignAttr?.value.value === 'center')
-                  ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`
-                  : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts
+                  ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください${DETAIL_LINK_MESSAGE}`
+                  : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。${DETAIL_LINK_MESSAGE}
  - styleを確認し、div・spanなど、別要素でマークアップし直すか、${nodeName}を削除してください
  - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
             })
           }
         }
       },
-      [`${HEADING_ELEMENT} ${INVALID_ELEMENT}`]: (node) => {
-        const component = node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]
+      [`${HEADING_ELEMENT} ${LAYOUT_COMPONENT_ELEMENT_WITHOUT_STACK}`]: (node) => {
+        const component = node.name.name.match(LAYOUT_COMPONENT_REGEX_WITHOUT_STACK)[1]
 
         context.report({
           node,
-          message: `Headingの子孫に${component}を置くことはできません。Headingの外で${component}を使用するようにマークアップを修正してください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`
+          message: `Headingの子孫に${component}を置くことはできません。Headingの外で${component}を使用するようにマークアップを修正してください。${DETAIL_LINK_MESSAGE}`
         })
       },
       [`${HEADING_ELEMENT} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
         context.report({
           node,
-          message: `Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
+          message: `Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}`,
         })
       },
       [`${HEADING_ELEMENT} :matches(${ICON_ELEMENT_WITH_TEXT},${TEXT_ELEMENT_WITH_PREFIX})`]: (node) => {
         context.report({
           node,
-          message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
+          message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください${DETAIL_LINK_MESSAGE}`,
         })
       },
-      [`${FORM_CONTROL_LABEL_ATTRIBUTE} ${INVALID_ELEMENT}`]: (node) => {
+      [`${FORM_CONTROL_LABEL_ATTRIBUTE} ${LAYOUT_COMPONENT_ELEMENT_WITHOUT_STACK}`]: (node) => {
         context.report({
           node,
-          message: `FormControlのlabel属性に${node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
+          message: `FormControlのlabel属性に${node.name.name.match(LAYOUT_COMPONENT_REGEX_WITHOUT_STACK)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。${DETAIL_LINK_MESSAGE}`,
         })
       },
       [`${FORM_CONTROL_LABEL_ATTRIBUTE} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
         context.report({
           node,
-          message: `FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
+          message: `FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}`,
         })
       },
       [`${FORM_CONTROL_LABEL_ATTRIBUTE} :matches(${ICON_ELEMENT_WITH_TEXT},${TEXT_ELEMENT_WITH_PREFIX})`]: (node) => {
         context.report({
           node,
-          message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
+          message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください${DETAIL_LINK_MESSAGE}`,
         })
       },
-      [`${FIELDSET_LEGEND_ATTRIBUTE} ${INVALID_ELEMENT}`]: (node) => {
+      [`${FIELDSET_LEGEND_ATTRIBUTE} ${LAYOUT_COMPONENT_ELEMENT_WITHOUT_STACK}`]: (node) => {
         context.report({
           node,
-          message: `Fieldsetのlegend属性に${node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
+          message: `Fieldsetのlegend属性に${node.name.name.match(LAYOUT_COMPONENT_REGEX_WITHOUT_STACK)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。${DETAIL_LINK_MESSAGE}`,
         })
       },
       [`${FIELDSET_LEGEND_ATTRIBUTE} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
         context.report({
           node,
-          message: `Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
+          message: `Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}`,
         })
       },
       [`${FIELDSET_LEGEND_ATTRIBUTE} :matches(${ICON_ELEMENT_WITH_TEXT},${TEXT_ELEMENT_WITH_PREFIX})`]: (node) => {
         context.report({
           node,
-          message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`,
+          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) => {
+        const component = node.name.name.match(LAYOUT_COMPONENT_REGEX)[1]
+
+        context.report({
+          node,
+          message: `RadioButton, RadioButtonPanelの子孫に${component}を置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}`,
+        })
+      },
+      [`JSXElement:has(>JSXOpeningElement[name.name=/Checkbox?$/]) ${LAYOUT_ELEMENT_NOT_SPAN}`]: (node) => {
+        const component = node.name.name.match(LAYOUT_COMPONENT_REGEX)[1]
+
+        context.report({
+          node,
+          message: `Checkboxの子孫に${component}を置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}`,
         })
       },
     }

package/rules/require-i18n-text/index.js

@@ -35,6 +35,9 @@ const STRING_LITERAL_CONDITION =
 const generateAttributeSelector = (attributes) =>
   `JSXAttribute[name.name=/^(${attributes.join('|')})$/]${STRING_LITERAL_CONDITION}`
 
+const REGEX_IGNORE_TEXT = /^ *(\.|\+|\-|\*|\/|[0-9]+) *$/
+const checkIgnoreText = (text) => !REGEX_IGNORE_TEXT.test(text)
+
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -44,49 +47,52 @@ module.exports = {
     schema: SCHEMA,
   },
   create(context) {
-    const options = context.options[0] || {}
-    const elementsObj = options.elements || {}
-
+    const elementsObj = (context.options[0] || {}).elements || {}
     // ユーザーが'*'を設定していない場合のみデフォルトを適用
     const wildcardAttributes = elementsObj['*'] || DEFAULT_WILDCARD_ATTRIBUTES
     const specificElements = Object.keys(elementsObj).filter((k) => k !== '*')
     const handlers = {}
 
     const reportAttributeError = (node) => {
-      context.report({
-        node,
-        message: `${node.parent.name.name}の${node.name.name}属性に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください
+      if (checkIgnoreText(node.value.value)) {
+        context.report({
+          node,
+          message: `${node.parent.name.name}の${node.name.name}属性に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-i18n-text`,
-      })
+        })
+      }
     }
 
     // 個別要素の設定
     for (const elementName of specificElements) {
       const attributes = elementsObj[elementName]
-      if (attributes.length === 0) continue
 
-      handlers[`JSXOpeningElement[name.name="${elementName}"] > ${generateAttributeSelector(attributes)}`] = reportAttributeError
+      if (attributes.length !== 0) {
+        handlers[`JSXOpeningElement[name.name="${elementName}"] > ${generateAttributeSelector(attributes)}`] = reportAttributeError
+      }
     }
 
     // ワイルドカード設定
     if (wildcardAttributes && wildcardAttributes.length > 0) {
       const attributeSelector = generateAttributeSelector(wildcardAttributes)
-      if (specificElements.length > 0) {
-        // 個別設定要素を除外
-        handlers[`JSXOpeningElement:not([name.name=/^(${specificElements.join('|')})$/]) > ${attributeSelector}`] =
-          reportAttributeError
-      } else {
-        handlers[attributeSelector] = reportAttributeError
-      }
+
+      handlers[
+        specificElements.length > 0
+          // 個別設定要素を除外
+          ? `JSXOpeningElement:not([name.name=/^(${specificElements.join('|')})$/]) > ${attributeSelector}`
+          : attributeSelector
+      ] = reportAttributeError
     }
 
     // 子要素の文字列リテラルチェック（空白のみのテキストは除外）
     handlers['JSXText[value=/\\S/]'] = (node) => {
-      context.report({
-        node,
-        message: `子要素に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください
+      if (checkIgnoreText(node.value)) {
+        context.report({
+          node,
+          message: `子要素に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください
  - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/require-i18n-text`,
-      })
+        })
+      }
     }
 
     return handlers

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

@@ -10,8 +10,10 @@ const ruleTester = new RuleTester({
     },
   },
 })
-const errorMessage = (type, name) => `${name}には子要素が一つしか無いため、${type}でマークアップする意味がありません。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts
+
+const DETAIL_LINK_MESSAGE = `
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts`
+const errorMessage = (type, name) => `${name}には子要素が一つしか無いため、${type}でマークアップする意味がありません。${DETAIL_LINK_MESSAGE}
  - styleを確認し、div・spanなど、別要素でマークアップし直すか、${name}を削除してください
  - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
 
@@ -65,6 +67,9 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyFormControl label={{ text: 'hoge', icon: <AnyIcon /> }} />` },
     { code: `<AnyFieldset legend={{ text: <AnyStack as="span"><span>a</span><span>b</span></AnyStack> }} />` },
     { code: `<Fieldset legend={{ text: 'hoge', icon: <AnyIcon /> }} />` },
+    { code: `<AnyRadioButton><Cluster as="span"><A /><B /></Cluster></AnyRadioButton>` },
+    { code: `<RadioButtonPanel><AnyStack forwardedAs="span"><A /><B /></AnyStack></RadioButtonPanel>` },
+    { code: `<AnyCheckbox><Sidebar as="span"><A /><B /></Sidebar></AnyCheckbox>` },
   ],
   invalid: [
     { code: `<Stack><Hoge /></Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
@@ -89,8 +94,7 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<AnyCluster>{a ? a.b.hoge(action) : <Hoge />}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
     { code: `<AnyCluster>{a ? <Hoge /> : a ? <Hoge /> : a.b.hoge(action)}</AnyCluster>`, errors: [ { message: errorMessage('Cluster', 'AnyCluster') } ] },
-    { code: `<HogeStack gap={0}>{a}{b}</HogeStack>`, errors: [ { message: `HogeStack に "gap={0}" が指定されており、smarthr-ui/Stack の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts
+    { code: `<HogeStack gap={0}>{a}{b}</HogeStack>`, errors: [ { message: `HogeStack に "gap={0}" が指定されており、smarthr-ui/Stack の利用方法として誤っている可能性があります。以下の修正方法を検討してください。${DETAIL_LINK_MESSAGE}
  - 方法1: 子要素を一つにまとめられないか検討してください
    - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど
  - 方法2: 子要素のstyleを確認しgap属性を0以外にできないか検討してください
@@ -98,30 +102,21 @@ ruleTester.run('best-practice-for-button-element', rule, {
  - 方法3: 別要素でマークアップし直すか、HogeStackを削除してください
    - 親要素に smarthr-ui/Cluster, smarthr-ui/Stack などが存在している場合、div・spanなどで1要素にまとめる必要がある場合があります
    - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください` } ] },
-    { code: `<Heading><Cluster><Hoge /><Fuga /></Cluster></Heading>`, errors: [ { message: `Headingの子孫にClusterを置くことはできません。Headingの外でClusterを使用するようにマークアップを修正してください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<AnyHeading><AnyStack><Hoge /><Fuga /></AnyStack></AnyHeading>`, errors: [ { message: `Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<Heading><AnyIcon text="hoge" /></Heading>`, errors: [ { message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<AnyHeading><Text prefixIcon={<SomeIcon />}>hoge</Text></AnyHeading>`, errors: [ { message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<AnyFormControl label={{ text: <Cluster><Hoge /><Fuga /></Cluster> }} />`, errors: [ { message: `FormControlのlabel属性にClusterを置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<FormControl label={<AnyStack><Hoge /><Fuga /></AnyStack>} />`, errors: [ { message: `FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<AnyFormControl label={{ text: <AnyIcon text="hoge" /> }} />`, errors: [ { message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<FormControl label={{ text: <Text prefixIcon={<SomeIcon /> }>hoge</Text>}} />`, errors: [ { message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<Fieldset legend={<Cluster><Hoge /><Fuga /></Cluster>} />`, errors: [ { message: `Fieldsetのlegend属性にClusterを置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<AnyFieldset legend={{ text: <AnyStack><Hoge /><Fuga /></AnyStack> }} />`, errors: [ { message: `Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<Fieldset legend={<AnyIcon text="hoge" />} />`, errors: [ { message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
-    { code: `<AnyFieldset legend={{ text: <Text prefixIcon={<SomeIcon />}>hoge</Text>}} />`, errors: [ { message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-layouts` } ] },
+    { code: `<Heading><Cluster><Hoge /><Fuga /></Cluster></Heading>`, errors: [ { message: `Headingの子孫にClusterを置くことはできません。Headingの外でClusterを使用するようにマークアップを修正してください。${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<AnyHeading><AnyStack><Hoge /><Fuga /></AnyStack></AnyHeading>`, errors: [ { message: `Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<Heading><AnyIcon text="hoge" /></Heading>`, errors: [ { message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<AnyHeading><Text prefixIcon={<SomeIcon />}>hoge</Text></AnyHeading>`, errors: [ { message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<AnyFormControl label={{ text: <Cluster><Hoge /><Fuga /></Cluster> }} />`, errors: [ { message: `FormControlのlabel属性にClusterを置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<FormControl label={<AnyStack><Hoge /><Fuga /></AnyStack>} />`, errors: [ { message: `FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<AnyFormControl label={{ text: <AnyIcon text="hoge" /> }} />`, errors: [ { message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<FormControl label={{ text: <Text prefixIcon={<SomeIcon /> }>hoge</Text>}} />`, errors: [ { message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<Fieldset legend={<Cluster><Hoge /><Fuga /></Cluster>} />`, errors: [ { message: `Fieldsetのlegend属性にClusterを置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<AnyFieldset legend={{ text: <AnyStack><Hoge /><Fuga /></AnyStack> }} />`, errors: [ { message: `Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<Fieldset legend={<AnyIcon text="hoge" />} />`, errors: [ { message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<AnyFieldset legend={{ text: <Text prefixIcon={<SomeIcon />}>hoge</Text>}} />`, errors: [ { message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<AnyRadioButton><Cluster><A /><B /></Cluster></AnyRadioButton>`, errors: [ { message: `RadioButton, RadioButtonPanelの子孫にClusterを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<RadioButtonPanel><AnyStack><A /><B /></AnyStack></RadioButtonPanel>`, errors: [ { message: `RadioButton, RadioButtonPanelの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}` } ] },
+    { code: `<AnyCheckbox><Sidebar><A /><B /></Sidebar></AnyCheckbox>`, errors: [ { message: `Checkboxの子孫にSidebarを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください${DETAIL_LINK_MESSAGE}` } ] },
   ]
 })
 

package/test/require-i18n-text.js

@@ -54,6 +54,14 @@ ruleTester.run('require-i18n-text', rule, {
     { code: `<img src="image.png" />` },
     { code: `<div data-testid="test" />` },
 
+    // 数値のみ、.と演算記号のみの場合は許容
+    { code: `<Any aria-label="1234" />` },
+    { code: `<div>.</div>` },
+    { code: `<a> +</a>` },
+    { code: `<img alt="-" />` },
+    { code: `<i>*</i>` },
+    { code: `<i>/</i>` },
+
     // ワイルドカード - 空配列で除外
     {
       code: `<Icon label="Icon text" />`,
@@ -98,6 +106,14 @@ ruleTester.run('require-i18n-text', rule, {
       errors: [{ message: attributeError('button', 'title') }],
     },
 
+    // 数値、.と演算記号の場合でも他の文字列が含まれていればエラー
+    { code: `<Any aria-label="1234 あ" />`, errors: [{ message: attributeError('Any', 'aria-label') }] },
+    { code: `<div>a.</div>`, errors: [{ message: childTextError }] },
+    { code: `<a> + b</a>`, errors: [{ message: childTextError }] },
+    { code: `<img alt="-zod" />`, errors: [{ message: attributeError('img', 'alt') }] },
+    { code: `<i>*1</i>`, errors: [{ message: childTextError }] },
+    { code: `<i>a/</i>`, errors: [{ message: childTextError }] },
+
     // 属性エラー: カスタムオプション
     {
       code: `<img alt="Profile picture" />`,

package/rules/a11y-required-layout-as-attribute/README.md

@@ -1,54 +0,0 @@
-# smarthr/a11y-required-layout-as-attribute
-
-- smarthr-ui/Layoutに属するコンポーネントはデフォルトではdiv要素を出力します
-- そのため他の一部コンポーネントとの組み合わせによってはinvalidなマークアップになる場合が起こり得ます
-  - 例: FormControlのtitle属性内でClusterを使うと `label > div` の構造になるためinvalid
-- 対象コンポーネントの使用方法をチェックし、適切なマークアップになるよう、as・forwardedAs属性の利用を促します
-
-## rules
-
-```js
-{
-  rules: {
-    'smarthr/a11y-required-layout-as-attribute': [
-      'error', // 'warn', 'off'
-    ]
-  },
-}
-```
-
-## ❌ Incorrect
-
-```jsx
-<Heading>
-  <Cluster>any</Cluster>
-</Heading>
-
-<HogeFormControl title={
-  <FugaCluster>any</FugaCluster>
-} />
-
-<StyledFieldset title={
-  <Cluster>any</Cluster>
-}>
-  // any
-</StyledFieldset>
-```
-
-## ✅ Correct
-
-```jsx
-<Heading>
-  <Cluster as="span">any</Cluster>
-</Heading>
-
-<HogeFormControl title={
-  <FugaCluster forwardedAs="span">any</FugaCluster>
-} />
-
-<StyledFieldset title={
-  <Cluster as="strong">any</Cluster>
-}>
-  // any
-</StyledFieldset>
-```

package/rules/a11y-required-layout-as-attribute/index.js

@@ -1,65 +0,0 @@
-const layoutRegex = /((C(ent|lust)er)|Reel|Sidebar|Stack|Base(Column)?)$/
-const headingRegex = /((^h(1|2|3|4|5|6))|Heading)$/
-const asRegex = /^(as|forwardedAs)$/
-const formControlRegex = /(FormControl|Fieldset)$/
-
-const findAsAttr = (a) => a.name?.name.match(asRegex)
-
-const searchBubbleUp = (node) => {
-  switch (node.type) {
-    case 'Program':
-      // rootまで検索した場合は確定でエラーにする
-      return null
-    case 'JSXElement': {
-      const name = node.openingElement.name.name || ''
-
-      if (headingRegex.test(name)) {
-        return name
-      }
-
-      break
-    }
-    case 'JSXAttribute': {
-      const name = node.name.name || ''
-
-      if (name === 'title' && formControlRegex.test(node.parent.name.name)) {
-        return `${node.parent.name.name}のtitle属性`
-      }
-    }
-  }
-
-  return searchBubbleUp(node.parent)
-}
-
-/**
- * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
- */
-module.exports = {
-  meta: {
-    type: 'problem',
-    schema: [],
-  },
-  create(context) {
-    return {
-      JSXOpeningElement: (node) => {
-        const name = node.name.name || ''
-
-        if (layoutRegex.test(name) && !node.attributes.some(findAsAttr)) {
-          const parentName = searchBubbleUp(node.parent.parent)
-
-          if (parentName) {
-            context.report({
-              node,
-              message: `${name}は${parentName}内に存在するため、as、もしくはforwardedAs属性を指定し、div以外の要素にする必要があります
- - smarthr-ui/Layoutに属するコンポーネントはデフォルトでdiv要素を出力するため${parentName}内で利用すると、マークアップの仕様に違反します
- - ほぼすべての場合、spanを指定することで適切なマークアップに変更出来ます
- - span以外を指定したい場合、記述コンテンツに属する要素かどうかを確認してください (https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E8%A8%98%E8%BF%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)`,
-            })
-          }
-        }
-      },
-    }
-  },
-}
-
-module.exports.schema = []

package/test/a11y-required-layout-as-attribute.js

@@ -1,34 +0,0 @@
-const rule = require('../rules/a11y-required-layout-as-attribute')
-const RuleTester = require('eslint').RuleTester
-
-const ruleTester = new RuleTester({
-  languageOptions: {
-    parserOptions: {
-      ecmaFeatures: {
-        jsx: true,
-      },
-    },
-  },
-})
-
-const generateErrorText = (parentName, name) => `${name}は${parentName}内に存在するため、as、もしくはforwardedAs属性を指定し、div以外の要素にする必要があります
- - smarthr-ui/Layoutに属するコンポーネントはデフォルトでdiv要素を出力するため${parentName}内で利用すると、マークアップの仕様に違反します
- - ほぼすべての場合、spanを指定することで適切なマークアップに変更出来ます
- - span以外を指定したい場合、記述コンテンツに属する要素かどうかを確認してください (https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#%E8%A8%98%E8%BF%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)`
-
-ruleTester.run('a11y-anchor-has-href-attribute', rule, {
-  valid: [
-    { code: `<h1><Cluster as="span">ほげ</Cluster></h1>` },
-    { code: `<Heading><Cluster as="strong" /></Heading>` },
-    { code: `<StyledHeading><AnyCluster forwardedAs="span" /></StyledHeading>` },
-    { code: `<FormControl title={<Cluster as="span" />} />` },
-    { code: `<StyledFieldset title={<AnyCluster forwardedAs="strong" />} />` },
-  ],
-  invalid: [
-    { code: `<h1><Cluster>ほげ</Cluster></h1>`, errors: [{ message: generateErrorText('h1', 'Cluster') }] },
-    { code: `<Heading><Cluster /></Heading>`, errors: [{ message: generateErrorText('Heading', 'Cluster') }] },
-    { code: `<StyledHeading><AnyCluster /></StyledHeading>`, errors: [{ message: generateErrorText('StyledHeading', 'AnyCluster') }] },
-    { code: `<FormControl title={<Cluster />} />`, errors: [{ message: generateErrorText('FormControlのtitle属性', 'Cluster') }] },
-    { code: `<StyledFieldset title={<AnyCluster />} />`, errors: [{ message: generateErrorText('StyledFieldsetのtitle属性', 'AnyCluster') }] },
-  ]
-})