eslint-plugin-smarthr 2.5.0 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.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.0.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "f066316ebb46360a61effed8bec040ba0dedd11a"
+  "gitHead": "81723cdb62ca80730409d872043a72f7844abc46"
 }

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/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') }] },
-  ]
-})