eslint-plugin-smarthr 0.3.5 → 0.3.7

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.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)
+
+
+### Features
+
+* .eslintrc.js などの設定からparserOptions.project が設定されている場合、tsconfig.jsonの読み込み先を変更する ([#68](https://github.com/kufu/eslint-plugin-smarthr/issues/68)) ([3897faf](https://github.com/kufu/eslint-plugin-smarthr/commit/3897fafbf3bf8ccdc42a06700ff832ec97dc7ff1))
+
 ### [0.3.5](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.4...v0.3.5) (2023-07-28)
 
 

package/libs/common.js

@@ -3,13 +3,29 @@ const path = require('path')
 const fs = require('fs')
 
 const replacePaths = (() => {
-  const tsconfig = fs.readFileSync(`${process.cwd()}/tsconfig.json`)
+  const cwd = process.cwd()
+  const eslintrc = (() => {
+    let file = `${cwd}/.eslintrc.js`
+    if (fs.existsSync(file)) {
+      return require(file)
+    }
+
+    file = `${cwd}/.eslintrc`
+
+    if (fs.existsSync(file)) {
+      return JSON5.parse(fs.readFileSync(file))
+    }
+
+    return {}
+  })()
+
+  const tsconfigFile = `${cwd}/${eslintrc.parserOptions?.project || 'tsconfig.json'}`
 
-  if (!tsconfig) {
-    throw new Error('プロジェクトルートにtsconfig.json を設置してください')
+  if (!fs.existsSync(tsconfigFile)) {
+    throw new Error(`${tsconfigFile} を設置してください`)
   }
 
-  const { compilerOptions } = JSON5.parse(tsconfig)
+  const { compilerOptions } = JSON5.parse(fs.readFileSync(tsconfigFile))
 
   if (!compilerOptions || !compilerOptions.paths) {
     throw new Error('tsconfig.json の compilerOptions.paths に `"@/*": ["any_path/*"]` 形式でフロントエンドのroot dir を指定してください')

package/package.json

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

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/format-import-path/README.md

@@ -8,6 +8,8 @@
 ## config
 
 - tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
+  - tsconfig.json はデフォルトではコマンド実行をしたディレクトリから読み込みます
+  - tsconfig.json の設置ディレクトリを変更したい場合、 `.eslintrc` などのeslint設定ファイルに `parserOptions.project` を設定してください
 - ドメインを識別するために以下の設定を記述する必要があります
   - globalModuleDir
     - 全体で利用するファイルを収めているディレクトリを相対パスで指定します

package/rules/no-import-other-domain/README.md

@@ -7,6 +7,8 @@
 ## config
 
 - tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
+  - tsconfig.json はデフォルトではコマンド実行をしたディレクトリから読み込みます
+  - tsconfig.json の設置ディレクトリを変更したい場合、 `.eslintrc` などのeslint設定ファイルに `parserOptions.project` を設定してください
 - ドメインを識別するために以下の設定を記述する必要があります
   - globalModuleDir
     - 全体で利用するファイルを収めているディレクトリを相対パスで指定します

package/rules/redundant-name/README.md

@@ -6,6 +6,8 @@
 ## config
 
 - tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
+  - tsconfig.json はデフォルトではコマンド実行をしたディレクトリから読み込みます
+  - tsconfig.json の設置ディレクトリを変更したい場合、 `.eslintrc` などのeslint設定ファイルに `parserOptions.project` を設定してください
 - 以下の設定を行えます。全て省略可能です。
   - ignoreKeywords
     - ディレクトリ名から生成されるキーワードに含めたくない文字列を指定します

package/rules/require-barrel-import/README.md

@@ -1,6 +1,8 @@
 # smarthr/require-barrel-import
 
 - tsconfig.json の compilerOptions.pathsに '@/*', もしくは '~/*' としてroot path を指定する必要があります
+  - tsconfig.json はデフォルトではコマンド実行をしたディレクトリから読み込みます
+  - tsconfig.json の設置ディレクトリを変更したい場合、 `.eslintrc` などのeslint設定ファイルに `parserOptions.project` を設定してください
 - importした対象が本来exportされているべきであるbarrel(index.tsなど)が有る場合、import pathの変更を促します
   - 例: Page/parts/Menu/Item の import は Page/parts/Menu から行わせたい
 - ディレクトリ内のindexファイルを捜査し、対象を決定します

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