eslint-plugin-smarthr - npm Package Compare versions

Comparing version 0.2.9 to 0.2.10

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+### [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)
@@ -7,0 +19,0 @@

package.json

 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "author": "SmartHR",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -5,2 +5,3 @@ # eslint-plugin-smarthr
 - [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)
@@ -7,0 +8,0 @@ - [best-practice-for-date](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/best-practice-for-date)

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

@@ -10,2 +10,17 @@ const { generateTagFormatter } = require('../../libs/format_styled_components')
 
+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 = {
@@ -24,3 +39,4 @@ meta: {
       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')
@@ -31,3 +47,5 @@
           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 === '') {
@@ -34,0 +52,0 @@ message = '画像の情報をテキストにした代替テキスト（`alt`）を設定してください。装飾目的の画像など、alt属性に指定すべき文字がない場合は背景画像にすることを検討してください。'

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

@@ -9,2 +9,3 @@ const { generateTagFormatter } = require('../../libs/format_styled_components')
   'ComboBox$': 'ComboBox$',
+  'DatePicker$': 'DatePicker$',
 }
@@ -31,3 +32,3 @@
 
-        if (!name.match(/((i|I)nput|(t|T)extarea|FieldSet|ComboBox)$/)) {
+        if (!name.match(/((i|I)nput|(t|T)extarea|FieldSet|ComboBox|DatePicker)$/)) {
           return
@@ -51,2 +52,37 @@ }
             }
+          } 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 {
@@ -53,0 +89,0 @@ context.report({

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

@@ -33,2 +33,3 @@ const rule = require('../rules/a11y-image-has-alt-attribute')
     { code: '<HogeIcon />' },
+    { code: '<svg><image /></svg>' },
   ],
@@ -44,3 +45,4 @@ invalid: [
     { 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 を末尾に持たない名称に変更してください。' } ] },
   ]
 })

test/a11y-prohhibit-input-placeholder.js

@@ -38,4 +38,8 @@ const rule = require('../rules/a11y-prohibit-input-placeholder')
     { 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" />` },
   ],
@@ -62,5 +66,10 @@ invalid: [
     { 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属性を閲覧出来ません。削除してください。` } ] },
   ]
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137463

increased by3.5%

Lines of code

3033

increased by2.05%

Number of lines in readme file

20

increased by5.26%

No dependency changes