eslint-plugin-smarthr 0.2.9 → 0.2.12

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.2.12](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.11...v0.2.12) (2022-12-07)
+
+
+### Bug Fixes
+
+* ファイルが複数の.を保つ場合（例 xxx.test.tsx）正常に動作しないバグを修正する ([#42](https://github.com/kufu/eslint-plugin-smarthr/issues/42)) ([23eb5b5](https://github.com/kufu/eslint-plugin-smarthr/commit/23eb5b51039085d3239adca42c65395b81869f9d))
+
+### [0.2.11](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.10...v0.2.11) (2022-12-07)
+
+
+### Bug Fixes
+
+* redundant-nameの省略文字列がファイルパスによって正常に生成できないバグを修正 ([49eb1d9](https://github.com/kufu/eslint-plugin-smarthr/commit/49eb1d9ad1e9c153b7cb150190a81e5fae6bedf6))
+
+### [0.2.10](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.9...v0.2.10) (2022-11-22)
+
+### Features
+
+* a11y-prohibit-input-placeholder を最新のComboBoxに対応させる ([#39](https://github.com/kufu/eslint-plugin-smarthr/issues/39)) ([682281c](https://github.com/kufu/eslint-plugin-smarthr/pull/39/commits/682281cd0f6ed73b4ec1295f34680bd9576ba831))
+* placeholder禁止対象にdate pickerが含まれていなかったため対応 ([#39](https://github.com/kufu/eslint-plugin-smarthr/issues/39)) ([abf89f0](https://github.com/kufu/eslint-plugin-smarthr/pull/39/commits/abf89f0fe5a88b4d03fdbd0e1ed344bae1c6397a))
+
+
+### Bug Fixes
+
+* a11y-image-has-alt-attribute が svg > image を誤検知してしまうバグを修正する ([#40](https://github.com/kufu/eslint-plugin-smarthr/issues/40)) ([1f21879](https://github.com/kufu/eslint-plugin-smarthr/commit/1f21879a0309bfec15cfa186db4f6203cd80cc14))
+
 ### [0.2.9](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.2.8...v0.2.9) (2022-10-19)
 
 

package/README.md

@@ -2,6 +2,7 @@
 
 - [a11y-clickable-element-has-text](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-clickable-element-has-text)
 - [a11y-image-has-alt-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-image-has-alt-attribute)
+- [a11y-prohibit-input-placeholder](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-prohibit-input-placeholder)
 - [a11y-trigger-has-button](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-trigger-has-button)
 - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)
 - [format-import-path](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/format-import-path)

package/package.json

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

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

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

package/rules/a11y-prohibit-input-placeholder/index.js

@@ -6,6 +6,7 @@ const EXPECTED_NAMES = {
   '(t|T)extarea$': 'Textarea$',
   'FieldSet$': 'FieldSet$',
   'ComboBox$': 'ComboBox$',
+  'DatePicker$': 'DatePicker$',
 }
 
 module.exports = {
@@ -27,7 +28,7 @@ module.exports = {
           return
         }
 
-        if (!name.match(/((i|I)nput|(t|T)extarea|FieldSet|ComboBox)$/)) {
+        if (!name.match(/((i|I)nput|(t|T)extarea|FieldSet|ComboBox|DatePicker)$/)) {
           return
         }
 
@@ -46,6 +47,41 @@ module.exports = {
                 },
               })
             }
+          } else if (name.match(/ComboBox$/)) {
+            let defaultItem
+            let dropdownHelpMessage
+
+            node.attributes.forEach((a) => {
+              switch(a.name?.name) {
+                case 'defaultItem': 
+                  defaultItem = a
+                  break
+                case 'dropdownHelpMessage': 
+                  dropdownHelpMessage = a
+                  break
+              }
+            })
+
+            if (defaultItem) {
+              context.report({
+                node: placeholder,
+                messageId: 'a11y-prohibit-input-placeholder',
+                data: {
+                  message: `${name} にはdefaultItemが設定されているため、placeholder属性を閲覧出来ません。削除してください。`,
+                },
+              })
+            } else if (!dropdownHelpMessage) {
+              context.report({
+                node: placeholder,
+                messageId: 'a11y-prohibit-input-placeholder',
+                data: {
+                  message: `${name} にはplaceholder属性は設定せず、以下のいずれか、もしくは組み合わせての対応を検討してください。
+ - 選択肢をどんな値で絞り込めるかの説明をしたい場合は dropdownHelpMessage 属性に変更してください。
+ - 空の値の説明のためにplaceholderを利用している場合は defaultItem 属性に変更してください。
+ - 上記以外の説明を行いたい場合、ヒント用要素を設置してください。(例: '<div><${name} /><Hint>ヒント</Hint></div>')`,
+                },
+              })
+            }
           } else {
             context.report({
               node: placeholder,

package/rules/redundant-name/index.js

@@ -86,7 +86,8 @@ const fetchTerminalImportName = (filename) => {
 const generateRedundantKeywords = ({ args, key, terminalImportName }) => {
   const option = args.option[key] || {}
   const ignoreKeywords = option.ignoreKeywords || DEFAULT_CONFIG[key].IGNORE_KEYWORDS
-  const terminalImportKeyword = terminalImportName ? terminalImportName.toLowerCase() : '' 
+  const terminalImportKeyword = terminalImportName ? terminalImportName.toLowerCase() : ''
+
   return args.keywords.reduce((prev, keyword) => {
     if (keyword === terminalImportKeyword || ignoreKeywords.includes(keyword)) {
       return prev
@@ -100,7 +101,7 @@ const generateRedundantKeywords = ({ args, key, terminalImportName }) => {
   }, [])
 }
 const handleReportBetterName = ({
-  key, 
+  key,
   context,
   option,
   filename,
@@ -170,13 +171,13 @@ const handleReportBetterName = ({
         Object.entries(option.betterNames).forEach(([regex, calc]) => {
           if (calc && filename.match(new RegExp(regex))) {
             switch(calc.operator) {
-              case '=': 
+              case '=':
                 candidates = calc.names
                 break
-              case '-': 
+              case '-':
                 candidates = candidates.filter((c) => !calc.names.includes(c))
                 break
-              case '+': 
+              case '+':
                 candidates = uniq([...candidates, ...calc.names])
                 break
             }
@@ -412,12 +413,15 @@ module.exports = {
     let rules = {}
 
     const option = context.options[0]
-    const filename = context.getFilename().match(/^(.+?)\..+?$/)[1]
+    let filename = context.getFilename()
     const keywords = uniq((() => {
       const keywordMatcher = filename.match(new RegExp(`${rootPath}/(.+?)$`))
 
       if (keywordMatcher) {
         const keywords = keywordMatcher[1].split('/')
+        keywords[keywords.length - 1] = keywords[keywords.length - 1].split('.')[0]
+
+        filename = keywords.join('/')
 
         if (keywords[keywords.length - 1] === 'index') {
           keywords.pop()
@@ -435,7 +439,7 @@ module.exports = {
       return []
     })())
 
-    const args = { 
+    const args = {
       context,
       option,
       filename,

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

@@ -30,6 +30,7 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: '<HogeImg alt="hoge" />' },
     { code: '<HogeImage alt="hoge" />' },
     { code: '<HogeIcon />' },
+    { code: '<svg><image /></svg>' },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
@@ -40,5 +41,6 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { 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 を末尾に持たない名称に変更してください。' } ] },
   ]
 })

package/test/a11y-prohhibit-input-placeholder.js

@@ -35,8 +35,12 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `<FugaFieldSet />` },
     { code: `<CustomComboBox />` },
     { code: `<SearchInput />` },
+    { code: `<DatePicker />` },
     { code: `<CustomSearchInput tooltipMessage="hoge" />` },
     { code: `<CustomSearchInput tooltipMessage="hoge" placeholder="fuga" />` },
+    { code: `<ComboBox defaultItem={items[0]} />` },
+    { code: `<ComboBox defaultItem={items[0]} dropdownHelpMessage="fuga" />` },
+    { code: `<ComboBox placeholder="hoge" dropdownHelpMessage="fuga" />` },
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: "styled-components をimportする際は、名称が`styled` となるようにしてください。例: `import styled from 'styled-components'`" } ] },
@@ -58,7 +62,12 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `<StyledInput placeholder={any} />`, errors: [ { message: `StyledInput にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><StyledInput /><Hint>ヒント</Hint></div>')` } ] },
     { code: `<HogeTextarea placeholder="any" />`, errors: [ { message: `HogeTextarea にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><HogeTextarea /><Hint>ヒント</Hint></div>')` } ] },
     { code: `<HogeFieldSet placeholder="any" />`, errors: [ { message: `HogeFieldSet にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><HogeFieldSet /><Hint>ヒント</Hint></div>')` } ] },
-    { code: `<HogeComboBox placeholder="any" />`, errors: [ { message: `HogeComboBox にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><HogeComboBox /><Hint>ヒント</Hint></div>')` } ] },
+    { code: `<HogeDatePicker placeholder="any" />`, errors: [ { message: `HogeDatePicker にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><HogeDatePicker /><Hint>ヒント</Hint></div>')` } ] },
+    { code: `<HogeComboBox placeholder="any" />`, errors: [ { message: `HogeComboBox にはplaceholder属性は設定せず、以下のいずれか、もしくは組み合わせての対応を検討してください。
+ - 選択肢をどんな値で絞り込めるかの説明をしたい場合は dropdownHelpMessage 属性に変更してください。
+ - 空の値の説明のためにplaceholderを利用している場合は defaultItem 属性に変更してください。
+ - 上記以外の説明を行いたい場合、ヒント用要素を設置してください。(例: '<div><HogeComboBox /><Hint>ヒント</Hint></div>')` } ] },
     { code: `<SearchInput placeholder="any" />`, errors: [ { message: `SearchInput にはplaceholder属性を単独で利用せず、tooltipMessageオプションのみ、もしくはplaceholderとtooltipMessageの併用を検討してください。 (例: '<SearchInput tooltipMessage="ヒント" />', '<SearchInput tooltipMessage={hint} placeholder={hint} />')` } ] },
+    { code: `<ComboBox defaultItem={items[0]} placeholder="any" />`, errors: [ { message: `ComboBox にはdefaultItemが設定されているため、placeholder属性を閲覧出来ません。削除してください。` } ] },
   ]
 })