eslint-plugin-smarthr 1.11.0 → 2.1.0

package/test/require-i18n-text.js

@@ -0,0 +1,170 @@
+const rule = require('../rules/require-i18n-text')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const attributeError = (element, attr) =>
+  `${element}の${attr}属性に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください`
+const childTextError = '子要素に文字列リテラルが指定されています。多言語化対応のため、翻訳関数を使用してください'
+
+const options = [
+  {
+    elements: {
+      img: ['alt', 'title'],
+      div: ['title'],
+      Button: ['label'],
+    },
+  },
+]
+
+ruleTester.run('require-i18n-text', rule, {
+  valid: [
+    // 翻訳関数を使用している場合
+    { code: `<img alt={t('profile_picture')} />`, options },
+    { code: `<div>{t('hello')}</div>`, options },
+
+    // 検査対象外の属性
+    { code: `<img src="test.png" />`, options },
+
+    // 検査対象外の要素
+    { code: `<Input label="test" />`, options },
+
+    // 数値リテラル（検査対象外）
+    { code: `<div>{123}</div>`, options },
+
+    // 真偽値（検査対象外）
+    { code: `<Button disabled={true} />`, options },
+
+    // 空文字列（検査対象外）
+    { code: `<img alt="" />`, options },
+
+    // 空白のみのテキスト（検査対象外）
+    { code: `<div>  </div>`, options },
+
+    // デフォルト設定対象外の属性
+    { code: `<img src="image.png" />` },
+    { code: `<div data-testid="test" />` },
+
+    // ワイルドカード - 空配列で除外
+    {
+      code: `<Icon label="Icon text" />`,
+      options: [
+        {
+          elements: {
+            '*': ['label'],
+            Icon: [],
+          },
+        },
+      ],
+    },
+
+    // デフォルト設定の上書き
+    {
+      code: `<img alt="text" />`,
+      options: [
+        {
+          elements: {
+            '*': ['data-tooltip'],
+          },
+        },
+      ],
+    },
+  ],
+  invalid: [
+    // 属性エラー: デフォルト設定
+    {
+      code: `<img alt="Profile picture" />`,
+      errors: [{ message: attributeError('img', 'alt') }],
+    },
+    {
+      code: `<CustomComponent aria-label="Label" />`,
+      errors: [{ message: attributeError('CustomComponent', 'aria-label') }],
+    },
+    {
+      code: `<DefinitionListItem term="Label" />`,
+      errors: [{ message: attributeError('DefinitionListItem', 'term') }],
+    },
+    {
+      code: `<button title="Click me" />`,
+      errors: [{ message: attributeError('button', 'title') }],
+    },
+
+    // 属性エラー: カスタムオプション
+    {
+      code: `<img alt="Profile picture" />`,
+      options,
+      errors: [{ message: attributeError('img', 'alt') }],
+    },
+    {
+      code: `<img alt={'Profile'} />`,
+      options,
+      errors: [{ message: attributeError('img', 'alt') }],
+    },
+
+    // 属性エラー: 同一要素の複数属性
+    {
+      code: `<img alt="Profile" title="User profile" />`,
+      options,
+      errors: [{ message: attributeError('img', 'alt') }, { message: attributeError('img', 'title') }],
+    },
+
+    // 属性エラー: ワイルドカード
+    {
+      code: `<CustomComponent label="Text" />`,
+      options: [
+        {
+          elements: {
+            '*': ['label'],
+          },
+        },
+      ],
+      errors: [{ message: attributeError('CustomComponent', 'label') }],
+    },
+
+    // 属性エラー: 個別設定がワイルドカードより優先
+    {
+      code: `<Button label="Submit" helperText="Help" />`,
+      options: [
+        {
+          elements: {
+            '*': ['label'],
+            Button: ['label', 'helperText'],
+          },
+        },
+      ],
+      errors: [{ message: attributeError('Button', 'label') }, { message: attributeError('Button', 'helperText') }],
+    },
+
+    // 子要素エラー（オプション未設定時でもチェックされる）
+    {
+      code: `<div>Hello World</div>`,
+      errors: [{ message: childTextError }],
+    },
+
+    // 複合エラー: 属性と子要素
+    {
+      code: `<Button label="Submit">Click here</Button>`,
+      options,
+      errors: [{ message: attributeError('Button', 'label') }, { message: childTextError }],
+    },
+
+    // 複合エラー: 入れ子構造
+    {
+      code: `<div title="Parent"><Button label="Child">Grandchild text</Button></div>`,
+      options,
+      errors: [
+        { message: attributeError('div', 'title') },
+        { message: attributeError('Button', 'label') },
+        { message: childTextError },
+      ],
+    },
+  ],
+})

package/rules/a11y-replace-unreadable-symbol/README.md

@@ -1,38 +0,0 @@
-# smarthr/a11y-replace-unreadable-symbol
-
-- 一部記号はスクリーンリーダーで読み上げられない、もしくは記号名そのままで読み上げられてしまい、意図が正しく伝えられない場合があります
-- それらの記号を適切に読み上げられるコンポーネントに置き換えることを促すルールです
-
-## rules
-
-```js
-{
-  rules: {
-    'smarthr/a11y-replace-unreadable-symbol': 'error', // 'warn', 'off',
-  },
-}
-```
-
-## ❌ Incorrect
-
-```jsx
-<>XXXX年YY月ZZ日 〜 XXXX年YY月ZZ日</>
-// スクリーンリーダーは "XXXX年YY月ZZ日XXXX年YY月ZZ日" と読み上げる場合があります
-
-<p>選択できる数値の範囲は 0 ~ 9999 です</p>
-// スクリーンリーダーは "選択できる数値の範囲は09999です" と読み上げる場合があります
-```
-
-## ✅ Correct
-
-```jsx
-//
-<>XXXX年YY月ZZ日 <RangeSeparator /> XXXX年YY月ZZ日</>
-// スクリーンリーダーは "XXXX年YY月ZZ日からXXXX年YY月ZZ日" と読み上げます
-
-<p>選択できる数値の範囲は 0 <RangeSeparator /> 9999 です</p>
-// スクリーンリーダーは "選択できる数値の範囲は0から9999です" と読み上げます
-
-<p>入力できる記号は <RangeSeparator decorators={{ text: '~', visuallyHiddenText: '半角チルダ' }} /> です</p>
-// スクリーンリーダーは "入力できる記号は半角チルダです" と読み上げます
-```

package/rules/a11y-replace-unreadable-symbol/index.js

@@ -1,31 +0,0 @@
-const TILDE_REGEX = /([~〜])/
-
-const SCHEMA = []
-
-/**
- * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
- */
-module.exports = {
-  meta: {
-    type: 'problem',
-    schema: SCHEMA,
-  },
-  create(context) {
-    return {
-      JSXText: (node) => {
-        const matcher = node.value.match(TILDE_REGEX)
-
-        if (matcher) {
-          context.report({
-            node,
-            message: `"${matcher[1]}"はスクリーンリーダーが正しく読み上げることができない場合があるため、smarthr-ui/RangeSeparatorに置き換えてください。
- - エラー表示されている行に"${matcher[1]}"が存在しない場合、改行文字を含む関係で行番号がずれている場合があります。数行下の範囲を確認してください
- - smarthr-ui/RangeSeparatorに置き換えることでスクリーンリーダーが "から" と読み上げることができます
- - 前後の文脈などで "から" と読まれることが不適切な場合 \`<RangeSeparator decorators={{ visuallyHiddenText: () => "ANY" }} />\` のようにdecoratorsを指定してください`,
-          })
-        }
-      },
-    }
-  },
-}
-module.exports.schema = SCHEMA

package/test/a11y-replace-unreadable-symbol.js

@@ -1,35 +0,0 @@
-const rule = require('../rules/a11y-replace-unreadable-symbol')
-const RuleTester = require('eslint').RuleTester
-
-const generateErrorText = (symbol, replaced, read) => `"${symbol}"はスクリーンリーダーが正しく読み上げることができない場合があるため、smarthr-ui/${replaced}に置き換えてください。
- - エラー表示されている行に"${symbol}"が存在しない場合、改行文字を含む関係で行番号がずれている場合があります。数行下の範囲を確認してください
- - smarthr-ui/${replaced}に置き換えることでスクリーンリーダーが "${read}" と読み上げることができます
- - 前後の文脈などで "${read}" と読まれることが不適切な場合 \`<RangeSeparator decorators={{ visuallyHiddenText: () => "ANY" }} />\` のようにdecoratorsを指定してください`
-
-const ruleTester = new RuleTester({
-  languageOptions: {
-    parserOptions: {
-      ecmaFeatures: {
-        jsx: true,
-      },
-    },
-  },
-})
-
-ruleTester.run('a11y-replace-unreadable-symbol', rule, {
-  valid: [
-    { code: `<>ほげふが</>` },
-    { code: `<RangeSeparator />` },
-    { code: `<p>ほげ<RangeSeparator />ふが</p>` },
-    { code: `<p>
-      ほげ
-      <RangeSeparator />
-      ふが
-    </p>` },
-  ],
-  invalid: [
-    { code: `<>~</>`, errors: [ { message: generateErrorText('~', 'RangeSeparator', 'から') } ] },
-    { code: `<>ほげ~ふが</>`, errors: [ { message: generateErrorText('~', 'RangeSeparator', 'から') } ] },
-    { code: `<p>ほげ〜ふが</p>`, errors: [ { message: generateErrorText('〜', 'RangeSeparator', 'から') } ] },
-  ]
-})