eslint-plugin-smarthr - npm Package Compare versions

Comparing version 0.3.19 to 0.3.20

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+### [0.3.20](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.19...v0.3.20) (2024-01-02)
+
 ### [0.3.19](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.18...v0.3.19) (2024-01-01)
@@ -7,0 +9,0 @@

package.json

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

rules/a11y-delegate-element-has-role-presentation/index.js

@@ -39,8 +39,7 @@ const { generateTagFormatter } = require('../../libs/format_styled_components');
 
-const INTERACTIVE_COMPONENT_NAMES = Object.keys(EXPECTED_NAMES)
+const INTERACTIVE_COMPONENT_NAMES = Object.keys(EXPECTED_NAMES).join('|')
 const INTERACTIVE_ON_REGEX = /^on(Change|Input|Focus|Blur|(Double)?Click|Key(Down|Up|Press)|Mouse(Enter|Over|Down|Up|Leave)|Select|Submit)$/
 const MEANED_ROLE_REGEX = /^(combobox|group|slider|toolbar)$/
+const INTERACTIVE_NODE_TYPE_REGEX = /^(JSXElement|JSXExpressionContainer|ConditionalExpression)$/
 
-const INTERACTIVE_NODE_TYPE = ['JSXElement', 'JSXExpressionContainer', 'ConditionalExpression']
-
 const messageNonInteractiveEventHandler = (nodeName, interactiveComponentRegex, onAttrs) => {
@@ -52,5 +51,8 @@ const onAttrsText = onAttrs.join(', ')
    - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
- - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
- - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
- - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
+ - 方法2: ${onAttrsText} がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
+   - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
+   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
+ - 方法4: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
+ - 方法5: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
    - 'role="presentation"' を設定した要素はマークアップとしての意味がなくなるため、div・span などマークアップとしての意味を持たない要素に設定してください
@@ -86,11 +88,12 @@ - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`
     const options = context.options[0]
-    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES.join('|')}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
+    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
+    const findInteractiveNode = (ec) => ec && ec.type.match(INTERACTIVE_NODE_TYPE_REGEX) && isHasInteractive(ec)
     const isHasInteractive = (c) => {
       switch (c.type) {
         case 'JSXElement': {
-          if ((c.openingElement.name.name || '').match(interactiveComponentRegex)) {
+          const name = c.openingElement.name.name
+
+          if (name && name.match(interactiveComponentRegex)) {
             return true
-          }
-
-          if (c.children.length > 0) {
+          } else if (c.children.length > 0) {
             return !!c.children.find(isHasInteractive)
@@ -101,9 +104,9 @@ }
         case 'ConditionalExpression': {
-          let expression = c
+          let e = c
 
           if (c.expression) {
-            expression = c.expression
+            e = c.expression
           }
 
-          return !![expression.right, expression.consequent, expression.alternate].find((ec) => INTERACTIVE_NODE_TYPE.includes(ec?.type) && isHasInteractive(ec))
+          return !![e.right, e.consequent, e.alternate].find(findInteractiveNode)
         }
@@ -134,3 +137,3 @@ }
               isMeanedRole = isRolePresentation = true
-            } else if  (v.match(MEANED_ROLE_REGEX)) {
+            } else if (v.match(MEANED_ROLE_REGEX)) {
               isMeanedRole = true
@@ -141,26 +144,24 @@ }
 
-        if (!nodeName.match(interactiveComponentRegex)) {
-          if (onAttrs.length > 0) {
-            if (!isRolePresentation) {
-              // HINT: role="presentation"以外で意味があるroleが設定されている場合はエラーにしない
-              // 基本的にsmarthr-uiでroleの設定などは巻き取る &&　そもそもroleを設定するよりタグを適切にマークアップすることが優先されるため
-              // エラーなどには表示しない
-              if (!isMeanedRole) {
-                context.report({
-                  node,
-                  message: messageNonInteractiveEventHandler(nodeName, interactiveComponentRegex, onAttrs),
-                });
-              }
-            } else if (!node.parent.children.find(isHasInteractive)) {
-              context.report({
-                node,
-                message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs)
-              })
-            }
+        if (nodeName.match(interactiveComponentRegex)) {
+          if (isRolePresentation) {
+            context.report({
+              node,
+              message: messageInteractiveHasRolePresentation(nodeName, interactiveComponentRegex)
+            })
           }
-        } else if (isRolePresentation) {
-          context.report({
-            node,
-            message: messageInteractiveHasRolePresentation(nodeName, interactiveComponentRegex)
-          })
+        } else if (onAttrs.length > 0) {
+          // HINT: role="presentation"以外で意味があるroleが設定されている場合はエラーにしない
+          // 基本的にsmarthr-uiでroleの設定などは巻き取る &&　そもそもroleを設定するよりタグを適切にマークアップすることが優先されるため
+          // エラーなどには表示しない
+          if (!isMeanedRole) {
+            context.report({
+              node,
+              message: messageNonInteractiveEventHandler(nodeName, interactiveComponentRegex, onAttrs),
+            });
+          } else if (!node.parent.children.find(isHasInteractive)) {
+            context.report({
+              node,
+              message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs)
+            })
+          }
         }
@@ -167,0 +168,0 @@ },

test/a11y-delegate-element-has-role-presantation.js

@@ -22,5 +22,8 @@ const rule = require('../rules/a11y-delegate-element-has-role-presentation');
    - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
- - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
- - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
- - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
+ - 方法2: ${onAttrsText} がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
+   - 属性名を"/^on(Change|Input|Focus|Blur|(Double)?Click|Key(Down|Up|Press)|Mouse(Enter|Over|Down|Up|Leave)|Select|Submit)$/"に一致しないものに変更してください
+   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
+ - 方法4: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
+ - 方法5: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
    - 'role="presentation"' を設定した要素はマークアップとしての意味がなくなるため、div・span などマークアップとしての意味を持たない要素に設定してください
@@ -27,0 +30,0 @@ - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`

No alert changes

Improved metrics

Total package byte prevSize

264036

increased by0.38%

Lines of code

4356

increased by0.11%

No dependency changes