eslint-plugin-smarthr 0.3.6 → 0.3.8

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.
 
+### [0.3.8](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.7...v0.3.8) (2023-09-01)
+
+
+### Features
+
+* a11y-anchor-has-href-attribute の next, react-router-dom用オプションをpackage.jsonを解析して自動設定するように修正 ([#71](https://github.com/kufu/eslint-plugin-smarthr/issues/71)) ([8321433](https://github.com/kufu/eslint-plugin-smarthr/commit/832143385dd92bfd6fe45acd959038deea5cd1fe))
+* a11y-anchor-has-href-attributeをhref="" や href="#" の場合、エラーとなるように修正 ([#75](https://github.com/kufu/eslint-plugin-smarthr/issues/75)) ([738ab65](https://github.com/kufu/eslint-plugin-smarthr/commit/738ab6598111dcf573a35d24f9d1baeda0506b4f))
+
+### [0.3.7](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.6...v0.3.7) (2023-08-24)
+
+
+### Features
+
+* a11y-clickable-element-has-text のチェック時、リンク内部に名称の末尾がTextがつくコンポーネントがある場合、チェックを通過するように修正 ([#69](https://github.com/kufu/eslint-plugin-smarthr/issues/69)) ([182b5d5](https://github.com/kufu/eslint-plugin-smarthr/commit/182b5d5e52c1faee26011572c48271e4c03512e1))
+
 ### [0.3.6](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.5...v0.3.6) (2023-08-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",

package/rules/a11y-anchor-has-href-attribute/README.md

@@ -12,13 +12,7 @@
 ```js
 {
   rules: {
-    'smarthr/a11y-anchor-has-href-attribute': [
-      'error', // 'warn', 'off'
-      // {
-      //   nextjs: true,
-      //   react_router: true,
-      // },
-    ]
+    'smarthr/a11y-anchor-has-href-attribute': 'error', // 'warn', 'off'
   },
 }
 ```
@@ -39,9 +33,9 @@
 <XxxAnchor href={hoge}>any</XxxAnchor>
 <XxxLink href={undefined}>any</XxxLink>
 
-// nextjs: true
+// nextを利用している場合
 <Link href={hoge}><a>any</a></Link>
 
-// react_router: true
+// react-router-domを利用している場合
 <Link to={hoge}>any</Link>
 ```

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

@@ -1,5 +1,27 @@
+const JSON5 = require('json5')
+const fs = require('fs')
+
 const { generateTagFormatter } = require('../../libs/format_styled_components')
 
+const OPTION = (() => {
+  const file = `${process.cwd()}/package.json`
+
+  if (!fs.existsSync(file)) {
+    return {}
+  }
+
+  const json = JSON5.parse(fs.readFileSync(file))
+  const dependencies = [
+    ...Object.keys(json.dependencies || {}),
+    ...Object.keys(json.devDependencies || {}),
+  ]
+
+  return {
+    nextjs: dependencies.includes('next'),
+    react_router: dependencies.includes('react-router-dom'),
+  }
+})()
+
 const EXPECTED_NAMES = {
   'Anchor$': 'Anchor$',
   'Link$': 'Link$',
@@ -7,59 +29,47 @@ const EXPECTED_NAMES = {
 }
 
 const REGEX_TARGET = /(Anchor|Link|^a)$/
-const check = (node, option) => {
-  let result = baseCheck(node)
-
-  if (
-    result && (
-      (option.nextjs && !nextCheck(node)) ||
-      (option.react_router && !reactRouterCheck(node))
-    )
-  ) {
-    result = null
-  }
+const check = (node) => {
+  const result = baseCheck(node)
 
-  return result
+  return result && ((OPTION.nextjs && !nextCheck(node)) || (OPTION.react_router && !reactRouterCheck(node))) ? null : result
 }
 const baseCheck = (node) => {
   const nodeName = node.name.name || ''
 
-  if (nodeName.match(REGEX_TARGET)) {
-    const href = node.attributes.find((a) => a.name?.name == 'href')
-
-    if (!href || !href.value) {
-      return nodeName
-    }
-  }
-
-  return false
+  return nodeName.match(REGEX_TARGET) && checkExistAttribute(node, findHrefAttribute) ? nodeName : false
 }
 const nextCheck = (node) => {
   // HINT: next/link で `Link>a` という構造がありえるので直上のJSXElementを調べる
   const target = node.parent.parent.openingElement
 
-  if (target) {
-    return baseCheck(target)
-  }
-
-  return false
+  return target ? baseCheck(target) : false
 }
-const reactRouterCheck = (node) => {
-  const href = node.attributes.find((a) => a.name?.name == 'to')
+const reactRouterCheck = (node) => checkExistAttribute(node, findToAttribute)
+
+const checkExistAttribute = (node, find) => {
+  const attr = node.attributes.find(find)?.value
 
-  return !href || !href.value
+  return (
+    !attr ||
+    isNullTextHref(attr) ||
+    (attr.type === 'JSXExpressionContainer' && isNullTextHref(attr.expression))
+  )
 }
+const isNullTextHref = (attr) => attr.type === 'Literal' && (attr.value === '' || attr.value === '#')
 
-const SCHEMA = [
-  {
-    type: 'object',
-    properties: {
-      nextjs: { type: 'boolean' },
-      react_router: { type: 'boolean' },
-    },
-    additionalProperties: false,
-  }
-]
+const findHrefAttribute = (a) => a.name?.name == 'href'
+const findToAttribute = (a) => a.name?.name == 'to'
+
+const MESSAGE_SUFFIX = ` に href 属性を正しく設定してください
+ - onClickなどでページ遷移する場合でもhref属性に遷移先のURIを設定してください
+   - Cmd + clickなどのキーボードショートカットに対応出来ます
+ - onClickなどの動作がURLの変更を行わない場合、button要素でマークアップすることを検討してください
+   - href属性に空文字(""など)や '#' が設定されている場合、実質画面遷移を行わないため、同様にbutton要素でマークアップすることを検討してください
+ - リンクが存在せず無効化されていることを表したい場合、href属性に undefined を設定してください
+   - button要素のdisabled属性が設定された場合に相当します`
+
+const SCHEMA = []
 
 module.exports = {
   meta: {
@@ -67,20 +77,15 @@ module.exports = {
     schema: SCHEMA,
   },
   create(context) {
-    const option = context.options[0] || {}
-
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
-        const nodeName = check(node, option)
+        const nodeName = check(node)
 
         if (nodeName) {
           context.report({
             node,
-            message: `${nodeName} に href 属性を設定してください。
- - onClickなどでページ遷移する場合、href属性に遷移先のURIを設定してください。Cmd + clickなどのキーボードショートカットに対応出来ます。
- - onClickなどの動作がURLの変更を行わない場合、リンクではなくbuttonでマークアップすることを検討してください。
- - リンクを無効化することを表したい場合、href属性に undefined を設定してください。`,
+            message: `${nodeName}${MESSAGE_SUFFIX}`,
           })
         }
       },

package/rules/a11y-clickable-element-has-text/README.md

@@ -37,6 +37,12 @@
 </XxxButton>
 ```
 
+```jsx
+<XxxAnchor>>
+  <XxxTextYyyy />
+</XxxAnchor>
+```
+
 ## ✅ Correct
 
 ```jsx
@@ -65,19 +71,25 @@
 <YyyAnchoor />
 ```
 
+```jsx
+<XxxAnchor>>
+  <XxxText />
+</XxxAnchor>
+```
+
 ```jsx
 /*
 rules: {
   'smarthr/a11y-clickable-element-has-text': [
     'error',
     {
-      componentsWithText: ['AnyComponent'],
+      componentsWithText: ['Hoge'],
     },
   ]
 },
 */
 
 <XxxButton>
-  <AnyComponent />
+  <Hoge />
 </XxxButton>
 ```

package/rules/a11y-clickable-element-has-text/index.js

@@ -15,12 +15,27 @@ const EXPECTED_NAMES = {
   '(b|B)utton$': 'Button$',
   'Anchor$': 'Anchor$',
   'Link$': 'Link$',
+  'Text$': 'Text$',
+  'Message$': 'Message$',
   '^a$': '(Anchor|Link)$',
 }
 
-const filterFalsyJSXText = (cs) => cs.filter((c) => (
-  !(c.type === 'JSXText' && c.value.match(/^\s*\n+\s*$/))
-))
+const REGEX_NLSP = /^\s*\n+\s*$/
+const REGEX_CLICKABLE_ELEMENT = /^(a|(.*?)Anchor(Button)?|(.*?)Link|(b|B)utton)$/
+const REGEX_SMARTHR_LOGO = /SmartHRLogo$/
+const REGEX_TEXT_COMPONENT = /(Text|Message)$/
+
+const HIT_TYPES_RECURSICVE_SEARCH = ['JSXText', 'JSXExpressionContainer']
+const HIT_TEXT_ATTRS = ['visuallyHiddenText', 'alt']
+
+const filterFalsyJSXText = (cs) => cs.filter(checkFalsyJSXText)
+const checkFalsyJSXText = (c) => (
+  !(c.type === 'JSXText' && c.value.match(REGEX_NLSP))
+)
+
+const message = `a, buttonなどのクリッカブルな要素内にはテキストを設定してください。
+ - 要素内にアイコン、画像のみを設置する場合はaltなどの代替テキスト用属性を指定してください
+ - クリッカブルな要素内に設置しているコンポーネントがテキストを含んでいる場合、"XxxxText" のように末尾に "Text" もしくは "Message" という名称を設定してください`
 
 module.exports = {
   meta: {
@@ -41,69 +56,65 @@ module.exports = {
 
         const node = parentNode.openingElement
 
-        if (!node.name.name || !node.name.name.match(/^(a|(.*?)Anchor(Button)?|(.*?)Link|(b|B)utton)$/)) {
+        if (!node.name.name || !node.name.name.match(REGEX_CLICKABLE_ELEMENT)) {
           return
         }
 
         const recursiveSearch = (c) => {
-          if (['JSXText', 'JSXExpressionContainer'].includes(c.type)) {
+          if (HIT_TYPES_RECURSICVE_SEARCH.includes(c.type)) {
             return true
           }
 
-          if (c.type === 'JSXFragment') {
-            if (c.children && filterFalsyJSXText(c.children).some(recursiveSearch)) {
-              return true
-            }
-
-            return false
-          }
-
-          if (c.type === 'JSXElement') {
-            // // HINT: SmartHRLogo コンポーネントは内部でaltを持っているため対象外にする
-            if (c.openingElement.name.name.match(/SmartHRLogo$/)) {
-              return true
-            }
-
-            if (componentsWithText.includes(c.openingElement.name.name)) {
-              return true
+          switch (c.type) {
+            case 'JSXFragment': {
+              return c.children && filterFalsyJSXText(c.children).some(recursiveSearch)
             }
+            case 'JSXElement': {
+              // // HINT: SmartHRLogo コンポーネントは内部でaltを持っているため対象外にする
+              if (c.openingElement.name.name.match(REGEX_SMARTHR_LOGO)) {
+                return true
+              }
 
-            // HINT: role & aria-label を同時に設定されている場合は許可
-            let existRole = false
-            let existAriaLabel = false
-            const result = c.openingElement.attributes.reduce((prev, a) =>  {
-              existRole = existRole || (a.name.name === 'role' && a.value.value === 'img')
-              existAriaLabel = existAriaLabel || a.name.name === 'aria-label'
+              const tagName = c.openingElement.name.name
 
-              if (prev) {
-                return prev
+              if (tagName.match(REGEX_TEXT_COMPONENT) || componentsWithText.includes(tagName)) {
+                return true
               }
 
-              if (!['visuallyHiddenText', 'alt'].includes(a.name.name)) {
-                return prev
+              // HINT: role & aria-label を同時に設定されている場合は許可
+              let existRole = false
+              let existAriaLabel = false
+              const result = c.openingElement.attributes.reduce((prev, a) =>  {
+                existRole = existRole || (a.name.name === 'role' && a.value.value === 'img')
+                existAriaLabel = existAriaLabel || a.name.name === 'aria-label'
+
+                if (
+                  prev ||
+                  !HIT_TEXT_ATTRS.includes(a.name.name)
+                ) {
+                  return prev
+                }
+
+                return (!!a.value.value || a.value.type === 'JSXExpressionContainer') ? a : prev
+              }, null)
+
+              if (
+                result ||
+                (existRole && existAriaLabel) ||
+                (c.children && filterFalsyJSXText(c.children).some(recursiveSearch))
+              ) {
+                return true
               }
-
-              return (!!a.value.value || a.value.type === 'JSXExpressionContainer') ? a : prev
-            }, null)
-
-            if (result || (existRole && existAriaLabel)) {
-              return true
-            }
-
-            if (c.children && filterFalsyJSXText(c.children).some(recursiveSearch)) {
-              return true
             }
           }
 
           return false
         }
 
-        const child = filterFalsyJSXText(parentNode.children).find(recursiveSearch)
-
-        if (!child) {
+        if (!filterFalsyJSXText(parentNode.children).find(recursiveSearch)) {
           context.report({
             node,
-            message: 'a, button要素にはテキストを設定してください。要素内にアイコン、画像のみを設置する場合はSmartHR UIのvisuallyHiddenText、通常のHTML要素にはaltなどの代替テキスト用属性を指定してください',
+            message,
           });
         }
       },

package/rules/a11y-image-has-alt-attribute/index.js

@@ -7,6 +7,9 @@ const EXPECTED_NAMES = {
   '^(img|svg)$': '(Img|Image|Icon)$',
 }
 
+const REGEX_IMG = /(img|image)$/i // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
+
+const findAltAttr = (a) => a.name?.name === 'alt'
 const isWithinSvgJsxElement = (node) => {
   if (
     node.type === 'JSXElement' &&
@@ -15,13 +18,16 @@ const isWithinSvgJsxElement = (node) => {
     return true
   }
 
-  if (!node.parent) {
-    return false
-  }
-
-  return isWithinSvgJsxElement(node.parent)
+  return node.parent ? isWithinSvgJsxElement(node.parent) : false
 }
 
+const MESSAGE_NOT_EXIST_ALT = `画像にはalt属性を指定してください。
+ - コンポーネントが画像ではない場合、img or image を末尾に持たない名称に変更してください。
+ - ボタンやリンクの先頭・末尾などに設置するアイコンとしての役割を持つ画像の場合、コンポーネント名の末尾を "Icon" に変更してください。
+ - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください。`
+const MESSAGE_NULL_ALT = `画像の情報をテキストにした代替テキスト（'alt'）を設定してください。
+ - 装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。`
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -31,25 +37,28 @@ module.exports = {
     return {
       ...generateTagFormatter({ context, EXPECTED_NAMES }),
       JSXOpeningElement: (node) => {
-        const matcher = (node.name.name || '').match(/(img|image)$/i) // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
-        if (matcher) {
-          const alt = node.attributes.find((a) => a.name?.name === 'alt')
+        if (node.name.name) {
+          const matcher = node.name.name.match(REGEX_IMG)
 
-          let message = ''
+          if (matcher) {
+            const alt = node.attributes.find(findAltAttr)
 
-          if (!alt) {
-            if (matcher.input !== 'image' || !isWithinSvgJsxElement(node.parent)) {
-              message = '画像にはalt属性を指定してください。SVG component の場合、altを属性として受け取れるようにした上で `<svg role="img" aria-label={alt}>` のように指定してください。画像ではない場合、img or image を末尾に持たない名称に変更してください。'
+            let message = ''
+
+            if (!alt) {
+              if (matcher.input !== 'image' || !isWithinSvgJsxElement(node.parent)) {
+                message = MESSAGE_NOT_EXIST_ALT
+              }
+            } else if (alt.value.value === '') {
+              message = MESSAGE_NULL_ALT
             }
-          } else if (alt.value.value === '') {
-            message = '画像の情報をテキストにした代替テキスト（`alt`）を設定してください。装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。'
-          }
 
-          if (message) {
-            context.report({
-              node,
-              message,
-            });
+            if (message) {
+              context.report({
+                node,
+                message,
+              });
+            }
           }
         }
       },

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

@@ -13,15 +13,26 @@ const EXPECTED_NAMES = {
 }
 const TARGET_TAG_NAME_REGEX = new RegExp(`(${Object.keys(EXPECTED_NAMES).join('|')})`)
 const INPUT_NAME_REGEX = /^[a-zA-Z0-9_\[\]]+$/
+const INPUT_TAG_REGEX = /(i|I)nput$/
+
+const findNameAttr = (a) => a?.name?.name === 'name'
+const findRadioInput = (a) => a.name?.name === 'type' && a.value.value === 'radio'
+
+const MESSAGE_PART_FORMAT = `"${INPUT_NAME_REGEX.toString()}"にmatchするフォーマットで命名してください`
+const MESSAGE_UNDEFINED_NAME_PART = `
+ - ブラウザの自動補完が有効化されるなどのメリットがあります
+ - より多くのブラウザが自動補完を行える可能性を上げるため、${MESSAGE_PART_FORMAT}`
+const MESSAGE_UNDEFINED_FOR_RADIO = `にグループとなる他のinput[radio]と同じname属性を指定してください
+ - 適切に指定することで同じname属性を指定したinput[radio]とグループが確立され、適切なキーボード操作を行えるようになります${MESSAGE_UNDEFINED_NAME_PART}`
+const MESSAGE_UNDEFINED_FOR_NOT_RADIO = `にname属性を指定してください${MESSAGE_UNDEFINED_NAME_PART}`
+const MESSAGE_NAME_FORMAT_SUFFIX = `はブラウザの自動補完が適切に行えない可能性があるため${MESSAGE_PART_FORMAT}`
+
+const SCHEMA = []
 
 module.exports = {
   meta: {
     type: 'problem',
-    messages: {
-      'format-styled-components': '{{ message }}',
-      'a11y-input-has-name-attribute': '{{ message }}',
-    },
-    schema: [],
+    schema: SCHEMA,
   },
   create(context) {
     return {
@@ -29,41 +40,31 @@ module.exports = {
       JSXOpeningElement: (node) => {
         const nodeName = node.name.name || '';
 
-        if (!nodeName.match(TARGET_TAG_NAME_REGEX)) {
-          return
-        }
+        if (nodeName.match(TARGET_TAG_NAME_REGEX)) {
+          const nameAttr = node.attributes.find(findNameAttr)
 
-        const nameAttr = node.attributes.find((a) => a?.name?.name === 'name')
+          if (!nameAttr) {
+            const isRadio =
+              nodeName.match(/RadioButton$/) ||
+              (nodeName.match(INPUT_TAG_REGEX) && node.attributes.some(findRadioInput));
 
-        if (!nameAttr) {
-          const isRadio =
-            nodeName.match(/RadioButton$/) ||
-            (nodeName.match(/(i|I)nput$/) && node.attributes.some(
-              (a) => a.name?.name === 'type' && a.value.value === 'radio'
-            ));
-
-          context.report({
-            node,
-            messageId: 'a11y-input-has-name-attribute',
-            data: {
-              message: `${nodeName} にname属性を指定してください。適切に指定することで${isRadio ? 'グループが確立され、キーボード操作しやすくなる' : 'ブラウザの自動補完が有効化される'}などのメリットがあります。`,
-            },
-          });
-        } else {
-          const nameValue = nameAttr.value?.value || ''
-
-          if (nameValue && !nameValue.match(INPUT_NAME_REGEX)) {
             context.report({
               node,
-              messageId: 'a11y-input-has-name-attribute',
-              data: {
-                message: `${nodeName} のname属性の値(${nameValue})はブラウザの自動補完が適切に行えない可能性があるため ${INPUT_NAME_REGEX.toString()} にmatchするフォーマットで命名してください。`,
-              },
+              message: `${nodeName} ${isRadio ? MESSAGE_UNDEFINED_FOR_RADIO : MESSAGE_UNDEFINED_FOR_NOT_RADIO}`,
             });
+          } else {
+            const nameValue = nameAttr.value?.value || ''
+
+            if (nameValue && !nameValue.match(INPUT_NAME_REGEX)) {
+              context.report({
+                node,
+                message: `${nodeName} のname属性の値(${nameValue})${MESSAGE_NAME_FORMAT_SUFFIX}`,
+              });
+            }
           }
         }
       },
     };
   },
 };
-module.exports.schema = [];
+module.exports.schema = SCHEMA;

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

@@ -1,3 +1,10 @@
+const MESSAGE_NEW_DATE = `'new Date(arg)' のように引数を一つだけ指定したDate instanceの生成は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
+ - 'new Date(2022, 12 - 1, 31)' のように数値を個別に指定する
+ - dayjsなど、日付系ライブラリを利用する (例:  'dayjs(arg).toDate()')`
+const MESSAGE_PARSE = `Date.parse は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
+ - 'new Date(2022, 12 - 1, 31).getTime()' のように数値を個別に指定する
+ - dayjsなど、日付系ライブラリを利用する (例: 'dayjs(arg).valueOf()')`
+
 module.exports = {
   meta: {
     type: 'problem',
@@ -12,7 +19,7 @@ module.exports = {
         ) {
           context.report({
             node,
-            message: "'new Date(arg)' のように引数一つのみの指定方は実行環境により結果が変わる可能性があるため 'new Date(2022, 12 - 1, 31)' のようにparseするなど他の方法を検討してください。",
+            message: MESSAGE_NEW_DATE,
           });
         }
       },
@@ -23,7 +30,7 @@ module.exports = {
         ) {
           context.report({
             node,
-            message: 'Date.parse は日付形式の解釈がブラウザによって異なるため、他の手段を検討してください',
+            message: MESSAGE_PARSE,
           });
         }
       },

package/test/a11y-anchor-has-href-attribute.js

@@ -12,10 +12,13 @@ const ruleTester = new RuleTester({
   },
 })
 
-const generateErrorText = (name) => `${name} に href 属性を設定してください。
- - onClickなどでページ遷移する場合、href属性に遷移先のURIを設定してください。Cmd + clickなどのキーボードショートカットに対応出来ます。
- - onClickなどの動作がURLの変更を行わない場合、リンクではなくbuttonでマークアップすることを検討してください。
- - リンクを無効化することを表したい場合、href属性に undefined を設定してください。`
+const generateErrorText = (name) => `${name} に href 属性を正しく設定してください
+ - onClickなどでページ遷移する場合でもhref属性に遷移先のURIを設定してください
+   - Cmd + clickなどのキーボードショートカットに対応出来ます
+ - onClickなどの動作がURLの変更を行わない場合、button要素でマークアップすることを検討してください
+   - href属性に空文字(""など)や '#' が設定されている場合、実質画面遷移を行わないため、同様にbutton要素でマークアップすることを検討してください
+ - リンクが存在せず無効化されていることを表したい場合、href属性に undefined を設定してください
+   - button要素のdisabled属性が設定された場合に相当します`
 
 ruleTester.run('a11y-anchor-has-href-attribute', rule, {
   valid: [
@@ -42,12 +45,7 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
       code: `<Link href="hoge">ほげ</Link>`,
     },
     {
-      code: `<Link href="hoge"><a>ほげ</a></Link>`,
-      options: [{ nextjs: true }],
-    },
-    {
-      code: `<Link to="hoge">ほげ</Link>`,
-      options: [{ react_router: true }],
+      code: `<Link href="#fuga">ほげ</Link>`,
     },
   ],
   invalid: [
@@ -61,7 +59,11 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: `<HogeLink>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
     { code: `<HogeLink href>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
     { code: `<HogeLink href="hoge"><a>hoge</a></HogeLink>`, errors: [{ message: generateErrorText('a') }] },
-    { code: `<HogeLink><a>hoge</a></HogeLink>`, options: [{ nextjs: true }], errors: [{ message: generateErrorText('a') }] },
     { code: `<HogeLink to="hoge">hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: `<HogeLink href="">hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: `<HogeLink href={""}>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: `<HogeLink href={''}>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: `<HogeLink href="#">hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
+    { code: `<HogeLink href={'#'}>hoge</HogeLink>`, errors: [{ message: generateErrorText('HogeLink') }] },
   ]
 })

package/test/a11y-clickable-element-has-text.js

@@ -12,7 +12,9 @@ const ruleTester = new RuleTester({
   },
 })
 
-const defaultErrorMessage = 'a, button要素にはテキストを設定してください。要素内にアイコン、画像のみを設置する場合はSmartHR UIのvisuallyHiddenText、通常のHTML要素にはaltなどの代替テキスト用属性を指定してください'
+const defaultErrorMessage = `a, buttonなどのクリッカブルな要素内にはテキストを設定してください。
+ - 要素内にアイコン、画像のみを設置する場合はaltなどの代替テキスト用属性を指定してください
+ - クリッカブルな要素内に設置しているコンポーネントがテキストを含んでいる場合、"XxxxText" のように末尾に "Text" もしくは "Message" という名称を設定してください`
 
 ruleTester.run('a11y-clickable-element-has-text', rule, {
   valid: [
@@ -30,6 +32,8 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: 'const HogeAnchor = styled.a(() => ``)' },
     { code: 'const HogeAnchor = styled("a")(() => ``)' },
     { code: 'const HogeAnchor = styled(Anchor)(() => ``)' },
+    { code: 'const FugaText = styled(HogeText)(() => ``)' },
+    { code: 'const FugaMessage = styled(HogeMessage)(() => ``)' },
     {
       code: `<a>ほげ</a>`,
     },
@@ -105,6 +109,15 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     {
       code: `<a><svg role="img" aria-label="hoge" /></a>`,
     },
+    {
+      code: `<a><Text /></a>`,
+    },
+    {
+      code: `<a><HogeText /></a>`,
+    },
+    {
+      code: `<a><FormattedMessage /></a>`,
+    },
     {
       code: `<a><AnyComponent /></a>`,
       options: [{
@@ -126,6 +139,8 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: 'const Piyo = styled("a")(() => ``)', errors: [ { message: `Piyoを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Piyo = styled("a")``', errors: [ { message: `Piyoを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Piyo = styled(Anchor)(() => ``)', errors: [ { message: `Piyoを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: 'const Hoge = styled(Text)``', errors: [ { message: `Hogeを正規表現 "/Text$/" がmatchする名称に変更してください` } ]  },
+    { code: 'const Hoge = styled(HogeMessage)``', errors: [ { message: `Hogeを正規表現 "/Message$/" がmatchする名称に変更してください` } ]  },
     {
       code: `<a><img src="hoge.jpg" /></a>`,
       errors: [{ message: defaultErrorMessage }]
@@ -174,6 +189,10 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
       code: `<a><div role="article" aria-label="hoge" /></a>`,
       errors: [{ message: defaultErrorMessage }]
     },
+    {
+      code: `<a><TextWithHoge /></a>`,
+      errors: [{ message: defaultErrorMessage }]
+    },
     {
       code: `<a><AnyComponent /></a>`,
       options: [{

package/test/a11y-image-has-alt-attribute.js

@@ -12,6 +12,13 @@ const ruleTester = new RuleTester({
   },
 })
 
+const messageNotExistAlt = `画像にはalt属性を指定してください。
+ - コンポーネントが画像ではない場合、img or image を末尾に持たない名称に変更してください。
+ - ボタンやリンクの先頭・末尾などに設置するアイコンとしての役割を持つ画像の場合、コンポーネント名の末尾を "Icon" に変更してください。
+ - SVG component の場合、altを属性として受け取れるようにした上で '<svg role="img" aria-label={alt}>' のように指定してください。`
+const messageNullAlt = `画像の情報をテキストにした代替テキスト（'alt'）を設定してください。
+ - 装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。`
+
 ruleTester.run('a11y-image-has-alt-attribute', rule, {
   valid: [
     { code: `import styled from 'styled-components'` },
@@ -39,8 +46,8 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: 'const Hoge = styled(Icon)``', errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Img)``', errors: [ { message: `Hogeを正規表現 "/Img$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Image)``', errors: [ { message: `Hogeを正規表現 "/Image$/" がmatchする名称に変更してください` } ] },
-    { code: '<img />', errors: [ { message: '画像にはalt属性を指定してください。SVG component の場合、altを属性として受け取れるようにした上で `<svg role="img" aria-label={alt}>` のように指定してください。画像ではない場合、img or image を末尾に持たない名称に変更してください。' } ] },
-    { code: '<HogeImage alt="" />', errors: [ { message: '画像の情報をテキストにした代替テキスト（`alt`）を設定してください。装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。' } ] },
-    { code: '<hoge><image /></hoge>', errors: [ { message: '画像にはalt属性を指定してください。SVG component の場合、altを属性として受け取れるようにした上で `<svg role="img" aria-label={alt}>` のように指定してください。画像ではない場合、img or image を末尾に持たない名称に変更してください。' } ] },
+    { code: '<img />', errors: [ { message: messageNotExistAlt } ] },
+    { code: '<HogeImage alt="" />', errors: [ { message: messageNullAlt } ] },
+    { code: '<hoge><image /></hoge>', errors: [ { message: messageNotExistAlt } ] },
   ]
 })

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

@@ -12,6 +12,12 @@ const ruleTester = new RuleTester({
   },
 });
 
+const MESSAGE_SUFFIX = `
+ - ブラウザの自動補完が有効化されるなどのメリットがあります
+ - より多くのブラウザが自動補完を行える可能性を上げるため、\"/^[a-zA-Z0-9_\\[\\]]+$/\"にmatchするフォーマットで命名してください`
+const MESSAGE_RADIO_SUFFIX = `
+ - 適切に指定することで同じname属性を指定したinput[radio]とグループが確立され、適切なキーボード操作を行えるようになります${MESSAGE_SUFFIX}`
+
 ruleTester.run('a11y-input-has-name-attribute', rule, {
   valid: [
     { code: `import styled from 'styled-components'` },
@@ -37,18 +43,18 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.Input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(RadioButton)``', errors: [ { message: `Hogeを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },
-    { code: '<input />', errors: [ { message: 'input にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
-    { code: '<input type="date" />', errors: [ { message: 'input にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
-    { code: '<Input type="checkbox" />', errors: [ { message: 'Input にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
-    { code: '<input type="radio" />', errors: [ { message: 'input にname属性を指定してください。適切に指定することでグループが確立され、キーボード操作しやすくなるなどのメリットがあります。' } ] },
-    { code: '<HogeInput type="radio" />', errors: [ { message: 'HogeInput にname属性を指定してください。適切に指定することでグループが確立され、キーボード操作しやすくなるなどのメリットがあります。' } ] },
-    { code: '<HogeInput type="text" />', errors: [ { message: 'HogeInput にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
-    { code: '<HogeRadioButton />', errors: [ { message: 'HogeRadioButton にname属性を指定してください。適切に指定することでグループが確立され、キーボード操作しやすくなるなどのメリットがあります。' } ] },
-    { code: '<select />', errors: [ { message: 'select にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
-    { code: '<HogeSelect />', errors: [ { message: 'HogeSelect にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
-    { code: '<textarea />', errors: [ { message: 'textarea にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
-    { code: '<HogeTextarea />', errors: [ { message: 'HogeTextarea にname属性を指定してください。適切に指定することでブラウザの自動補完が有効化されるなどのメリットがあります。' } ] },
-    { code: '<input type="radio" name="ほげ" />', errors: [ { message: 'input のname属性の値(ほげ)はブラウザの自動補完が適切に行えない可能性があるため /^[a-zA-Z0-9_\\[\\]]+$/ にmatchするフォーマットで命名してください。' } ] },
-    { code: '<select name="hoge[fuga][0][あいうえお]" />', errors: [ { message: 'select のname属性の値(hoge[fuga][0][あいうえお])はブラウザの自動補完が適切に行えない可能性があるため /^[a-zA-Z0-9_\\[\\]]+$/ にmatchするフォーマットで命名してください。' } ] },
+    { code: '<input />', errors: [ { message: `input にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
+    { code: '<input type="date" />', errors: [ { message: `input にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
+    { code: '<Input type="checkbox" />', errors: [ { message: `Input にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
+    { code: '<input type="radio" />', errors: [ { message: `input にグループとなる他のinput[radio]と同じname属性を指定してください${MESSAGE_RADIO_SUFFIX}` } ] },
+    { code: '<HogeInput type="radio" />', errors: [ { message: `HogeInput にグループとなる他のinput[radio]と同じname属性を指定してください${MESSAGE_RADIO_SUFFIX}` } ] },
+    { code: '<HogeInput type="text" />', errors: [ { message: `HogeInput にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
+    { code: '<HogeRadioButton />', errors: [ { message: `HogeRadioButton にグループとなる他のinput[radio]と同じname属性を指定してください${MESSAGE_RADIO_SUFFIX}` } ] },
+    { code: '<select />', errors: [ { message: `select にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
+    { code: '<HogeSelect />', errors: [ { message: `HogeSelect にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
+    { code: '<textarea />', errors: [ { message: `textarea にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
+    { code: '<HogeTextarea />', errors: [ { message: `HogeTextarea にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
+    { code: '<input type="radio" name="ほげ" />', errors: [ { message: 'input のname属性の値(ほげ)はブラウザの自動補完が適切に行えない可能性があるため"/^[a-zA-Z0-9_\\[\\]]+$/"にmatchするフォーマットで命名してください' } ] },
+    { code: '<select name="hoge[fuga][0][あいうえお]" />', errors: [ { message: 'select のname属性の値(hoge[fuga][0][あいうえお])はブラウザの自動補完が適切に行えない可能性があるため"/^[a-zA-Z0-9_\\[\\]]+$/"にmatchするフォーマットで命名してください' } ] },
   ],
 });

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

@@ -12,8 +12,12 @@ const ruleTester = new RuleTester({
   },
 })
 
-const errorNewDate = "'new Date(arg)' のように引数一つのみの指定方は実行環境により結果が変わる可能性があるため 'new Date(2022, 12 - 1, 31)' のようにparseするなど他の方法を検討してください。"
-const errorDateParse = 'Date.parse は日付形式の解釈がブラウザによって異なるため、他の手段を検討してください'
+const errorNewDate = `'new Date(arg)' のように引数を一つだけ指定したDate instanceの生成は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
+ - 'new Date(2022, 12 - 1, 31)' のように数値を個別に指定する
+ - dayjsなど、日付系ライブラリを利用する (例:  'dayjs(arg).toDate()')`
+const errorDateParse = `Date.parse は実行環境によって結果が異なるため、以下のいずれかの方法に変更してください
+ - 'new Date(2022, 12 - 1, 31).getTime()' のように数値を個別に指定する
+ - dayjsなど、日付系ライブラリを利用する (例: 'dayjs(arg).valueOf()')`
 
 ruleTester.run('best-practice-for-date', rule, {
   valid: [