eslint-plugin-smarthr 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.
 
+## [2.3.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.2.1...eslint-plugin-smarthr-v2.3.0) (2025-12-01)
+
+
+### Features
+
+* best-practice-for-layout にHeading, FormControl, Fieldsetのタイトル部分でLayout系コンポーネントの仕様を制限するチェックを追加 ([#906](https://github.com/kufu/tamatebako/issues/906)) ([631aeca](https://github.com/kufu/tamatebako/commit/631aecaa20c834b6d603e31af95f2aaee9694bd0))
+
+## [2.2.1](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.2.0...eslint-plugin-smarthr-v2.2.1) (2025-11-18)
+
+
+### Bug Fixes
+
+* a11y-anchor-has-href-attributeがhrefにメソッドが指定されている場合に誤検知することがある問題を修正 ([#905](https://github.com/kufu/tamatebako/issues/905)) ([6ebd6ec](https://github.com/kufu/tamatebako/commit/6ebd6ecc074a7088652697dcb6bfb60b63a13fc4))
+* a11y-input-has-name-attributeでtemplate literalの場合、誤検知してしまう問題を修正 ([#904](https://github.com/kufu/tamatebako/issues/904)) ([d440e86](https://github.com/kufu/tamatebako/commit/d440e8675bf600dbe8a51e496d7076bcf617336f))
+
 ## [2.2.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v2.1.0...eslint-plugin-smarthr-v2.2.0) (2025-11-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "56a52ee0be0573e3c6117ff2b368543fbbac5c4f"
+  "gitHead": "18f89a924a8920722a1e71982a4d117db0c6a073"
 }

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

@@ -91,7 +91,7 @@ module.exports = {
           reporter(node)
         }
       },
-      [`${ANCHOR_ELEMENT}:has(${HREF_ATTRIBUTE}:matches([value=null],:has(Literal[value=/^(|#)$/])))`]: reporter,
+      [`${ANCHOR_ELEMENT}:has(${HREF_ATTRIBUTE}:matches([value=null],:has(>Literal[value=/^(|#)$/]),:has(>JSXExpressionContainer[expression.value=/^(|#)$/])))`]: reporter,
     }
   },
 }

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

@@ -67,7 +67,7 @@ module.exports = {
  - 適切に指定することで同じname属性を指定したinput[radio]とグループが確立され、適切なキーボード操作を行えるようになります${MESSAGE_UNDEFINED_NAME_PART}`,
         })
       },
-      [`${INPUT_ELEMENT}${notHasSpreadAttribute} ${NAME_ATTRIBUTE}:not([value.value=${INPUT_NAME_REGEX}])`]: (node) => {
+      [`${INPUT_ELEMENT}${notHasSpreadAttribute} ${NAME_ATTRIBUTE}[value.value]:not([value.value=${INPUT_NAME_REGEX}])`]: (node) => {
         context.report({
           node,
           message: `${node.parent.name.name} のname属性の値(${node.value.value})はブラウザの自動補完が適切に行えない可能性があるため${MESSAGE_PART_FORMAT}`,

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

@@ -15,13 +15,28 @@
 ## ❌ Incorrect
 
 ```jsx
-// 子が複数無いためエラー
+// Cluster, Stackは子要素が複数存在する場合に利用するべきもののため
+// 要素が単一の場合エラーになる
 <Cluster>
-  <Any />
+  <div>
+    hoge
+  </div>
 </Cluster>
 <StyledStack>
-  {flg ? 'a' : 'b'}
+  <Any />
 </StyledStack>
+
+// Heading, FormControlのlabel, Fieldsetのlegendにsmarthr-ui/Layoutsに属するコンポーネントを設置するとエラー
+<Heading><Cluster><AnyIcon /><Text /></Cluster></Heading>
+<FormControl label={{
+  text: <Text prefixIcon={<AnyIcon />}>hoge</Cluster>
+}} />
+<Fieldset legend={
+  <Stack>
+    <Text />
+    <SubText />
+  </Stack>
+} />
 ```
 
 ## ✅ Correct
@@ -50,4 +65,33 @@
   <Any />
   <Any />
 </Cluster>
+
+// Heading, FormControlのlabel, FieldsetのlegendにIconを設定したい場合はicon属性を利用する
+<Heading icon={<AnyIcon />}><Text /></Heading>
+<FormControl label={{
+  text: <Text />,
+  icon: <AnyIcon />,
+}} />
+// Stackはas="span"、もしくはforwardedAs="span"を指定すれば利用できる
+<Fieldset legend={
+  <Stack as="span">
+    <Text />
+    <SubText />
+  </Stack>
+} />
+<FormControl label={{
+  text: (
+   <AnyStack forwardedAs="span">
+     <Text />
+     <SubText />
+   </AnyStack>
+  ),
+}} />
+
+// FormControl、Fieldsetで見出しの右側の領域に要素を設置する場合、statusLabels, subActionAreaを利用する
+<FormControl
+  label={<Text />}
+  statusLabels={<RequiredLabel />}
+  subActionArea={<HelpLink />}
+/>
 ```

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

@@ -1,8 +1,16 @@
 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 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 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 filterFalsyJSXText = (cs) => cs.filter(checkFalsyJSXText)
 const checkFalsyJSXText = (c) => (
   !(
@@ -55,39 +63,35 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) => {
+      [`JSXOpeningElement[selfClosing=false][name.name=${MULTI_CHILDREN_REGEX}]`]: (node) => {
         const nodeName = node.name.name;
+        const matcher = nodeName.match(MULTI_CHILDREN_REGEX)
+        const layoutType = matcher[1]
+        let justifyAttr = null
+        let alignAttr = null
+        let gapAttr = null
 
-        if (nodeName && !node.selfClosing) {
-          const matcher = nodeName.match(MULTI_CHILDREN_REGEX)
-
-          if (matcher) {
-            const layoutType = matcher[1]
-            let justifyAttr = null
-            let alignAttr = null
-            let gapAttr = null
-
-            node.attributes.forEach((a) => {
-              switch (a.name?.name) {
-                case 'justify':
-                  justifyAttr = a
-                  break
-                case 'align':
-                  alignAttr = a
-                  break
-                case 'gap':
-                  gapAttr = a
-                  break
-              }
-            })
+        node.attributes.forEach((a) => {
+          switch (a.name?.name) {
+            case 'justify':
+              justifyAttr = a
+              break
+            case 'align':
+              alignAttr = a
+              break
+            case 'gap':
+              gapAttr = a
+              break
+          }
+        })
 
-            if (layoutType === 'Stack') {
-              if (alignAttr && FLEX_END_REGEX.test(alignAttr.value.value)) {
-                return
-              } else if (gapAttr?.value.type === 'JSXExpressionContainer' && gapAttr.value.expression.value === 0) {
-                context.report({
-                  node,
-                  message: `${nodeName} に "gap={0}" が指定されており、smarthr-ui/${layoutType} の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
+        if (layoutType === 'Stack') {
+          if (alignAttr && FLEX_END_REGEX.test(alignAttr.value.value)) {
+            return
+          } else if (gapAttr?.value.type === 'JSXExpressionContainer' && gapAttr.value.expression.value === 0) {
+            context.report({
+              node,
+              message: `${nodeName} に "gap={0}" が指定されており、smarthr-ui/${layoutType} の利用方法として誤っている可能性があります。以下の修正方法を検討してください。
  - 方法1: 子要素を一つにまとめられないか検討してください
    - 例: "<Stack gap={0}><p>hoge</p><p>fuga</p></Stack>" を "<p>hoge<br />fuga</p>" にするなど
  - 方法2: 子要素のstyleを確認しgap属性を0以外にできないか検討してください
@@ -95,32 +99,86 @@ module.exports = {
  - 方法3: 別要素でマークアップし直すか、${nodeName}を削除してください
    - 親要素に smarthr-ui/Cluster, smarthr-ui/Stack などが存在している場合、div・spanなどで1要素にまとめる必要がある場合があります
    - as, forwardedAsなどでSectioningContent系要素に変更している場合、対応するsmarthr-ui/Section, Aside, Nav, Article のいずれかに差し替えてください`
-                })
-              }
-            }
+            })
+          }
+        }
 
-            const children = node.parent.children.filter(checkFalsyJSXText)
+        const children = node.parent.children.filter(checkFalsyJSXText)
 
-            if (children.length === 1) {
-              if (justifyAttr && FLEX_END_REGEX.test(justifyAttr.value.value)) {
-                return
-              }
+        if (children.length === 1) {
+          if (justifyAttr && FLEX_END_REGEX.test(justifyAttr.value.value)) {
+            return
+          }
 
-              if (searchChildren(children[0])) {
-                context.report({
-                  node,
-                  message:
-                    (justifyAttr?.value.value === 'center' || alignAttr?.value.value === 'center')
-                      ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
-                      : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
+          if (searchChildren(children[0])) {
+            context.report({
+              node,
+              message:
+                (justifyAttr?.value.value === 'center' || alignAttr?.value.value === 'center')
+                  ? `${nodeName} は smarthr-ui/${layoutType} ではなく smarthr-ui/Center でマークアップしてください`
+                  : `${nodeName}には子要素が一つしか無いため、${layoutType}でマークアップする意味がありません。
  - 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]
+
+        context.report({
+          node,
+          message: `Headingの子孫に${component}を置くことはできません。Headingの外で${component}を使用するようにマークアップを修正してください。`
+        })
+      },
+      [`${HEADING_ELEMENT} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
+        context.report({
+          node,
+          message: 'Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+        })
+      },
+      [`${HEADING_ELEMENT} :matches(${ICON_ELEMENT_WITH_TEXT},${TEXT_ELEMENT_WITH_PREFIX})`]: (node) => {
+        context.report({
+          node,
+          message: 'HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください',
+        })
+      },
+      [`${FORM_CONTROL_LABEL_ATTRIBUTE} ${INVALID_ELEMENT}`]: (node) => {
+        context.report({
+          node,
+          message: `FormControlのlabel属性に${node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。`,
+        })
+      },
+      [`${FORM_CONTROL_LABEL_ATTRIBUTE} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
+        context.report({
+          node,
+          message: 'FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+        })
+      },
+      [`${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属性を利用してください",
+        })
+      },
+      [`${FIELDSET_LEGEND_ATTRIBUTE} ${INVALID_ELEMENT}`]: (node) => {
+        context.report({
+          node,
+          message: `Fieldsetのlegend属性に${node.name.name.match(TARGET_INVALID_COMPONENT_REGEX)[1]}を置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。`,
+        })
+      },
+      [`${FIELDSET_LEGEND_ATTRIBUTE} ${STACK_ELEMENT_NOT_SPAN}`]: (node) => {
+        context.report({
+          node,
+          message: 'Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に `span` を指定してください',
+        })
+      },
+      [`${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属性を利用してください",
+        })
+      },
     }
   },
 }

package/test/a11y-input-has-name-attribute.js

@@ -26,6 +26,7 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: '<HogeTextarea name="hoge" />' },
     { code: '<select name="hoge" />' },
     { code: '<Select name="hoge[0][Fuga]" />' },
+    { code: '<Select name={`ABC`} />' },
     { code: '<Input {...hoge} />', options: [{ checkType: 'allow-spread-attributes' }] },
     { code: '<Input {...args1} {...args2} />', options: [{ checkType: 'allow-spread-attributes' }] },
     { code: '<Input {...args} hoge="fuga" />', options: [{ checkType: 'allow-spread-attributes' }] },

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

@@ -58,6 +58,12 @@ ruleTester.run('best-practice-for-button-element', rule, {
     { code: `<Cluster>{a}</Cluster>` },
     { code: `<Cluster>{a.b}</Cluster>` },
     { code: `<Cluster>{a ? b : c}</Cluster>` },
+    { code: `<Heading><Stack as="span"><Hoge /><Fuga /></Stack></Heading>` },
+    { code: `<AnyHeading icon={<AnyIcon />}>hoge</AnyHeading>` },
+    { code: `<FormControl label={<AnyStack as="span"><span>a</span><span>b</span></AnyStack>} />` },
+    { 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 /> }} />` },
   ],
   invalid: [
     { code: `<Stack><Hoge /></Stack>`, errors: [ { message: errorMessage('Stack', 'Stack') } ] },
@@ -90,6 +96,18 @@ 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を使用するようにマークアップを修正してください。` } ] },
+    { code: `<AnyHeading><AnyStack><Hoge /><Fuga /></AnyStack></AnyHeading>`, errors: [ { message: `Headingの子孫にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください` } ] },
+    { code: `<Heading><AnyIcon text="hoge" /></Heading>`, errors: [ { message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください` } ] },
+    { code: `<AnyHeading><Text prefixIcon={<SomeIcon />}>hoge</Text></AnyHeading>`, errors: [ { message: `HeadingにIconを設定する場合 <Heading icon={<XxxIcon />}></Heading> のようにicon属性を利用してください` } ] },
+    { code: `<AnyFormControl label={{ text: <Cluster><Hoge /><Fuga /></Cluster> }} />`, errors: [ { message: `FormControlのlabel属性にClusterを置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。` } ] },
+    { code: `<FormControl label={<AnyStack><Hoge /><Fuga /></AnyStack>} />`, errors: [ { message: `FormControlのlabel属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください` } ] },
+    { code: `<AnyFormControl label={{ text: <AnyIcon text="hoge" /> }} />`, errors: [ { message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください` } ] },
+    { code: `<FormControl label={{ text: <Text prefixIcon={<SomeIcon /> }>hoge</Text>}} />`, errors: [ { message: `FormControlのlabel属性にアイコンを設定する場合 <FormControl label={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlabel.icon属性を利用してください` } ] },
+    { code: `<Fieldset legend={<Cluster><Hoge /><Fuga /></Cluster>} />`, errors: [ { message: `Fieldsetのlegend属性にClusterを置くことはできません。ラベル用テキスト以外をstatusLabels、subActionArea、もしくはlabel属性のObjectとして '{ text: テキスト, icon: <XxxIcon /> }'に置き換えてください。` } ] },
+    { code: `<AnyFieldset legend={{ text: <AnyStack><Hoge /><Fuga /></AnyStack> }} />`, errors: [ { message: `Fieldsetのlegend属性にStackを置く場合、as属性、もしくはforwardedAs属性に \`span\` を指定してください` } ] },
+    { code: `<Fieldset legend={<AnyIcon text="hoge" />} />`, errors: [ { message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください` } ] },
+    { code: `<AnyFieldset legend={{ text: <Text prefixIcon={<SomeIcon />}>hoge</Text>}} />`, errors: [ { message: `Fieldsetのlegend属性にアイコンを設定する場合 <Fieldset legend={{ text: 'テキスト', icon: <XxxIcon /> }} /> のようにlegend.icon属性を利用してください` } ] },
   ]
 })