eslint-plugin-smarthr 1.10.0 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 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.
 
+## [2.0.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.11.0...eslint-plugin-smarthr-v2.0.0) (2025-10-16)
+
+
+### ⚠ BREAKING CHANGES
+
+* eslint rule の smarthr/a11y-replace-unreadable-symbolを削除 ([#850](https://github.com/kufu/tamatebako/issues/850))
+
+### Code Refactoring
+
+* eslint rule の smarthr/a11y-replace-unreadable-symbolを削除 ([#850](https://github.com/kufu/tamatebako/issues/850)) ([68336f8](https://github.com/kufu/tamatebako/commit/68336f8df42fcfe0c3a8375671377cc62b2be711))
+
+## [1.11.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.10.0...eslint-plugin-smarthr-v1.11.0) (2025-10-01)
+
+
+### Features
+
+* a11y-input-in-form-controlのaria-label,aria-labelledbyが設定されている場合、FormControlでラップしなくてもよしとする ([#795](https://github.com/kufu/tamatebako/issues/795)) ([443892f](https://github.com/kufu/tamatebako/commit/443892ffb39732157d77a179484da3f529e43885))
+
 ## [1.10.0](https://github.com/kufu/tamatebako/compare/eslint-plugin-smarthr-v1.9.0...eslint-plugin-smarthr-v1.10.0) (2025-10-01)
 
 

package/README.md

@@ -14,7 +14,6 @@
 - [a11y-prohibit-input-placeholder](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-prohibit-input-placeholder)
 - [a11y-prohibit-sectioning-content-in-form](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-prohibit-sectioning-content-in-form)
 - [a11y-prohibit-useless-sectioning-fragment](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-prohibit-useless-sectioning-fragment)
-- [a11y-replace-unreadable-symbol](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-replace-unreadable-symbol)
 - [a11y-required-layout-as-attribute](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-required-layout-as-attribute)
 - [a11y-trigger-has-button](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-trigger-has-button)
 - [best-practice-for-async-current-target](https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-async-current-target)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "1.10.0",
+  "version": "2.0.0",
   "author": "SmartHR",
   "license": "MIT",
   "description": "A sharable ESLint plugin for SmartHR",
   "main": "index.js",
   "engines": {
-    "node": ">=22.18.0"
+    "node": ">=22.20.0"
   },
   "scripts": {
     "test": "jest"
@@ -26,7 +26,7 @@
     "json5": "^2.2.3"
   },
   "devDependencies": {
-    "typescript-eslint": "^8.40.0"
+    "typescript-eslint": "^8.46.0"
   },
   "peerDependencies": {
     "eslint": "^9"
@@ -37,5 +37,5 @@
     "eslintplugin",
     "smarthr"
   ],
-  "gitHead": "343b735f1202c536e8bf9c897fdb4d5289455b8e"
+  "gitHead": "dd35a6760dd9022d4b28747996c2016022e94dc6"
 }

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

@@ -4,90 +4,52 @@ const fs = require('fs')
 const OPTION = (() => {
   const file = `${process.cwd()}/package.json`
 
-  if (!fs.existsSync(file)) {
-    return {}
-  }
+  if (fs.existsSync(file)) {
+    const json = JSON5.parse(fs.readFileSync(file))
 
-  const json = JSON5.parse(fs.readFileSync(file))
-  const dependencies = [
-    ...(json.dependencies ? Object.keys(json.dependencies) : []),
-    ...(json.devDependencies ? Object.keys(json.devDependencies) : []),
-  ]
+    if (json.dependencies){
+      const dependencies = Object.keys(json.dependencies)
 
-  let nextjs = false
-  let react_router = false
-  const result = () => ({
-    nextjs,
-    react_router,
-  })
+      let nextjs = false
+      let react_router = false
+      const result = () => ({
+        nextjs,
+        react_router,
+      })
 
-  for (let i = 0; i < dependencies.length; i++) {
-    switch (dependencies[i]) {
-      case 'next':
-        nextjs = true
+      for (let i = 0; i < dependencies.length; i++) {
+        switch (dependencies[i]) {
+          case 'next':
+            nextjs = true
 
-        if (react_router) {
-          return result()
-        }
+            if (react_router) {
+              return result()
+            }
 
-        break
-      case 'react-router':
-        react_router = true
+            break
+          case 'react-router':
+            react_router = true
 
-        if (nextjs) {
-          return result()
-        }
+            if (nextjs) {
+              return result()
+            }
 
-        break
+            break
+        }
+      }
     }
   }
 
-  return result()
+  return {}
 })()
 
-const REGEX_TARGET = /(Anchor|Link|^a)$/
-const check = (node, checkType) => {
-  const result = baseCheck(node, checkType)
-
-  return result && ((OPTION.nextjs && !nextCheck(node, checkType)) || (OPTION.react_router && !reactRouterCheck(node))) ? null : result
-}
-const baseCheck = (node, checkType) => {
-  const nodeName = node.name.name || ''
-
-  if (
-    REGEX_TARGET.test(nodeName) &&
-    checkExistAttribute(node, findHrefAttribute) &&
-    (checkType !== 'allow-spread-attributes' || !node.attributes.some(findSpreadAttr))
-  ) {
-    return nodeName
-  }
-
-  return false
-}
-const nextCheck = (node, checkType) => {
-  // HINT: next/link で `Link>a` という構造がありえるので直上のJSXElementを調べる
-  const target = node.parent.parent.openingElement
-
-  return target ? baseCheck(target, checkType) : false
-}
-const reactRouterCheck = (node) => checkExistAttribute(node, findToAttribute)
+const ANCHOR_ELEMENT = 'JSXOpeningElement[name.name=/(Anchor|Link|^a)$/]'
+const HREF_ATTRIBUTE = `JSXAttribute[name.name=${OPTION.react_router ? '/^(href|to)$/' : '"href"'}]`
+const NEXT_LINK_REGEX = /Link$/
+// HINT: next/link で `Link>a` という構造がありえるので直上のJSXElementを調べる
+const nextCheck = (node) => ((node.parent.parent.openingElement.name.name || '').test(NEXT_LINK_REGEX))
 
-const checkExistAttribute = (node, find) => {
-  const attr = node.attributes.find(find)?.value
-
-  return (
-    !attr ||
-    isNullTextHref(attr) ||
-    (attr.type === 'JSXExpressionContainer' && isNullTextHref(attr.expression))
-  )
-}
-const isNullTextHref = (attr) => attr.type === 'Literal' && (attr.value === '' || attr.value === '#')
-const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'
-
-const findHrefAttribute = (a) => a.name?.name == 'href'
-const findToAttribute = (a) => a.name?.name == 'to'
-
-const MESSAGE_SUFFIX = ` に href 属性を正しく設定してください
+const MESSAGE_SUFFIX = ` に href${OPTION.react_router ? '、もしくはto' : ''} 属性を正しく設定してください
  - onClickなどでページ遷移する場合でもhref属性に遷移先のURIを設定してください
    - Cmd + clickなどのキーボードショートカットに対応出来ます
  - onClickなどの動作がURLの変更を行わない場合、button要素でマークアップすることを検討してください
@@ -115,19 +77,21 @@ module.exports = {
   },
   create(context) {
     const option = context.options[0] || {}
-    const checkType = option.checkType || 'always'
+    const spreadAttributeSelector = option.checkType === 'allow-spread-attributes' ? ':not(:has(JSXSpreadAttribute))' : ''
+    const reporter = (node) => {
+      context.report({
+        node,
+        message: `${node.name.name}${MESSAGE_SUFFIX}`,
+      })
+    }
 
     return {
-      JSXOpeningElement: (node) => {
-        const nodeName = check(node, checkType)
-
-        if (nodeName) {
-          context.report({
-            node,
-            message: `${nodeName}${MESSAGE_SUFFIX}`,
-          })
+      [`${ANCHOR_ELEMENT}:not(:has(${HREF_ATTRIBUTE}))${spreadAttributeSelector}`]: (node) => {
+        if (!OPTION.nextjs || !nextCheck(node)) {
+          reporter(node)
         }
       },
+      [`${ANCHOR_ELEMENT}:has(${HREF_ATTRIBUTE}:matches([value=null],:has(Literal[value=/^(|#)$/])))`]: reporter,
     }
   },
 }

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

@@ -8,14 +8,8 @@ const SCHEMA = [
   }
 ]
 
-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 REGEX_JSX_TYPE = /^(JSXText|JSXExpressionContainer)$/
-
-const filterFalsyJSXText = (cs) => cs.filter(checkFalsyJSXText)
-const checkFalsyJSXText = (c) => c.type !== 'JSXText' || !REGEX_NLSP.test(c.value)
+const CLICKABLE_ELEMENT = 'JSXElement[openingElement.name.name=/((^b|B)utton|Anchor|Link|^a)/]:has(JSXClosingElement)'
+const TEXT_LIKE_ATTRIBUTE = 'JSXAttribute[name.name=/^(text|alt|aria-label(ledby)?)$/]:not(:matches([value=null],[value.value=""])))'
 
 const message = `a, buttonなどのクリッカブルな要素内にはテキストを設定してください
  - 要素内にアイコン、画像のみを設置する場合はaltなどの代替テキスト用属性を指定してください
@@ -33,76 +27,15 @@ module.exports = {
   create(context) {
     const option = context.options[0] || {}
     const componentsWithText = option.componentsWithText || []
+    // HINT: SmartHRLogo コンポーネントは内部でaltを持っているため対象外にする
+    const elementWithText = `JSXOpeningElement[name.name=/(SmartHRLogo|Text|Message|^(${componentsWithText.join('|')}))$/]`
 
     return {
-      JSXElement: (parentNode) => {
-        // HINT: 閉じタグが存在しない === テキストノードが存在しない
-        if (!parentNode.closingElement) {
-          return
-        }
-
-        const node = parentNode.openingElement
-
-        if (!node.name.name || !REGEX_CLICKABLE_ELEMENT.test(node.name.name)) {
-          return
-        }
-
-        const recursiveSearch = (c) => {
-          if (REGEX_JSX_TYPE.test(c.type)) {
-            return true
-          }
-
-          switch (c.type) {
-            case 'JSXFragment': {
-              return c.children && filterFalsyJSXText(c.children).some(recursiveSearch)
-            }
-            case 'JSXElement': {
-              // // HINT: SmartHRLogo コンポーネントは内部でaltを持っているため対象外にする
-              if (REGEX_SMARTHR_LOGO.test(c.openingElement.name.name)) {
-                return true
-              }
-
-              const tagName = c.openingElement.name.name
-
-              if (REGEX_TEXT_COMPONENT.test(tagName) || componentsWithText.includes(tagName)) {
-                return true
-              }
-
-              // HINT: role & aria-label を同時に設定されている場合か、text属性が設定されている場合許可
-              let existRole = false
-              let existAriaLabel = false
-              const result = c.openingElement.attributes.reduce((prev, a) =>  {
-                const n = a.name?.name
-
-                if (prev || n === 'text') {
-                  return true
-                }
-
-                const v = a.value?.value
-
-                existRole = existRole || (n === 'role' && v === 'img')
-                existAriaLabel = existAriaLabel || n === 'aria-label'
-
-                if (existRole && existAriaLabel) {
-                  return true
-                }
-
-                return n === 'alt' && (v || a.value.type === 'JSXExpressionContainer') || false
-              }, null)
-
-              return result || (c.children && filterFalsyJSXText(c.children).some(recursiveSearch))
-            }
-          }
-
-          return false
-        }
-
-        if (!filterFalsyJSXText(parentNode.children).find(recursiveSearch)) {
-          context.report({
-            node,
-            message,
-          });
-        }
+      [`${CLICKABLE_ELEMENT}:not(:has(:matches(${TEXT_LIKE_ATTRIBUTE},JSXText,JSXExpressionContainer,${elementWithText}))`]: (node) => {
+        context.report({
+          node,
+          message,
+        });
       },
     }
   },

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

@@ -1,18 +1,6 @@
-const REGEX_IMG = /(img|image)$/i // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
-
-const findAltAttr = (a) => a.name?.name === 'alt'
-const findAriaDescribedbyAttr = (a) => a.name?.name === 'aria-describedby'
-const findSpreadAttr = (a) => a.type === 'JSXSpreadAttribute'
-const isWithinSvgJsxElement = (node) => {
-  if (
-    node.type === 'JSXElement' &&
-    node.openingElement.name?.name === 'svg'
-  ) {
-    return true
-  }
-
-  return node.parent ? isWithinSvgJsxElement(node.parent) : false
-}
+const REGEX_IMG = /((i|I)mg|Image)$/ // HINT: Iconは別途テキストが存在する場合が多いためチェックの対象外とする
+const IMG_ELEMENT = 'JSXOpeningElement[name.name=/((i|I)mg|Image)$/]'
+const ALT_LIKE_ATTRIBUTE = 'JSXAttribute[name.name=/^(alt|aria-describedby)$/]'
 
 const MESSAGE_NOT_EXIST_ALT = `画像にはalt属性を指定してください。
  - コンポーネントが画像ではない場合、img or image を末尾に持たない名称に変更してください。
@@ -43,44 +31,20 @@ module.exports = {
   },
   create(context) {
     const option = context.options[0] || {}
-    const checkType = option.checkType || 'always'
+    const notHasSpreadAttr = option.checkType === 'allow-spread-attributes' ? ':not(:has(JSXSpreadAttribute))' : ''
 
     return {
-      JSXOpeningElement: (node) => {
-        if (node.name.name) {
-          const matcher = node.name.name.match(REGEX_IMG)
-
-          if (matcher) {
-            const alt = node.attributes.find(findAltAttr)
-
-            let message = ''
-
-            if (!alt) {
-              if (
-                !node.attributes.find(findAriaDescribedbyAttr) &&
-                (
-                  matcher.input !== 'image' ||
-                  !isWithinSvgJsxElement(node.parent)
-                ) &&
-                (
-                  checkType !== 'allow-spread-attributes' ||
-                  !node.attributes.some(findSpreadAttr)
-                )
-              ) {
-                message = MESSAGE_NOT_EXIST_ALT
-              }
-            } else if (alt.value.value === '') {
-              message = MESSAGE_NULL_ALT
-            }
-
-            if (message) {
-              context.report({
-                node,
-                message,
-              });
-            }
-          }
-        }
+      [`${IMG_ELEMENT}:not(:has(${ALT_LIKE_ATTRIBUTE}))${notHasSpreadAttr}`]: (node) => {
+        context.report({
+          node,
+          message: MESSAGE_NOT_EXIST_ALT,
+        });
+      },
+      [`${IMG_ELEMENT}:has(${ALT_LIKE_ATTRIBUTE}:matches([value.value=""],[value=null]))${notHasSpreadAttr}`]: (node) => {
+        context.report({
+          node,
+          message: MESSAGE_NULL_ALT,
+        });
       },
     }
   },

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

@@ -5,31 +5,26 @@ const JSON5 = require('json5')
 const OPTION = (() => {
   const file = `${process.cwd()}/package.json`
 
-  if (!fs.existsSync(file)) {
-    return {}
+  if (fs.existsSync(file)) {
+    return {
+      react_hook_form: Object.keys(JSON5.parse(fs.readFileSync(file)).dependencies).includes('react-hook-form'),
+    }
   }
 
-  const json = JSON5.parse(fs.readFileSync(file))
-  const dependencies = [...Object.keys(json.dependencies || {}), ...Object.keys(json.devDependencies || {})]
-
-  return {
-    react_hook_form: dependencies.includes('react-hook-form'),
-  }
+  return {}
 })()
 
-const TARGET_TAG_NAME_REGEX = /((I|^i)nput|(T|^t)extarea|(S|^s)elect|InputFile|RadioButton(Panel)?|(Check|Combo)(B|b)ox|(Date|Wareki|Time)Picker|DropZone)$/
-const INPUT_NAME_REGEX = /^[a-zA-Z0-9_\[\]]+$/
-const INPUT_TAG_REGEX = /(i|I)nput$/
-const RADIO_BUTTON_REGEX = /RadioButton(Panel)?$/
+const INPUT_ELEMENT = 'JSXOpeningElement[name.name=/((I|^i)nput|(T|^t)extarea|(S|^s)elect|InputFile|RadioButton(Panel)?|(Check|Combo)(B|b)ox|(Date|Wareki|Time)Picker|DropZone)$/]'
+const INPUT_ELEMENT_WITHOUT_RADIO = 'JSXOpeningElement[name.name=/((I|^i)nput|(T|^t)extarea|(S|^s)elect|InputFile|(Check|Combo)(B|b)ox|(Date|Wareki|Time)Picker|DropZone)$/]'
+const RADIO_ELEMENT = 'JSXOpeningElement:matches([name.name=/RadioButton(Panel)?$/],[name.name=/(I|^i)nput?$/]:has(JSXAttribute[name.name="type"][value.value="radio"]))'
+const NAME_ATTRIBUTE = 'JSXAttribute[name.name="name"]'
+
+const INPUT_NAME_REGEX = /^[a-zA-Z0-9_\[\]]+$/.toString()
 
 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 = [
   {
@@ -53,61 +48,30 @@ module.exports = {
     const option = context.options[0] || {}
     const checkType = option.checkType || 'always'
 
-    return {
-      JSXOpeningElement: (node) => {
-        const { name, attributes } = node
-        const nodeName = name.name || ''
-
-        if (TARGET_TAG_NAME_REGEX.test(nodeName)) {
-          let nameAttr = null
-          let hasSpreadAttr = false
-          let hasReactHookFormRegisterSpreadAttr = false
-          let hasRadioInput = false
+    const notHasSpreadAttribute =
+      option.checkType == 'allow-spread-attributes'
+        ? ':not(:has(JSXSpreadAttribute))'
+        : OPTION.react_hook_form ? ':not(:has(JSXSpreadAttribute CallExpression[callee.name="register"]))' : ''
 
-          attributes.forEach((a) => {
-            if (a.type === 'JSXSpreadAttribute') {
-              hasSpreadAttr = true
-
-              if (hasReactHookFormRegisterSpreadAttr === false && a.argument?.callee?.name === 'register') {
-                hasReactHookFormRegisterSpreadAttr = true
-              }
-            } else {
-              switch (a.name?.name) {
-                case 'name': {
-                  nameAttr = a
-                  break
-                }
-                case 'type': {
-                  if (a.value.value === 'radio') {
-                    hasRadioInput = true
-                  }
-                  break
-                }
-              }
-            }
-          })
-
-          if (nameAttr) {
-            const nameValue = nameAttr.value?.value
-
-            if (nameValue && !INPUT_NAME_REGEX.test(nameValue)) {
-              context.report({
-                node,
-                message: `${nodeName} のname属性の値(${nameValue})${MESSAGE_NAME_FORMAT_SUFFIX}`,
-              })
-            }
-          } else if (
-            !(OPTION.react_hook_form && hasReactHookFormRegisterSpreadAttr) &&
-            (attributes.length === 0 || checkType !== 'allow-spread-attributes' || !hasSpreadAttr)
-          ) {
-            const isRadio = RADIO_BUTTON_REGEX.test(nodeName) || INPUT_TAG_REGEX.test(nodeName) && hasRadioInput
-
-            context.report({
-              node,
-              message: `${nodeName} ${isRadio ? MESSAGE_UNDEFINED_FOR_RADIO : MESSAGE_UNDEFINED_FOR_NOT_RADIO}`,
-            })
-          }
-        }
+    return {
+      [`${INPUT_ELEMENT_WITHOUT_RADIO}:not(:has(:matches(${NAME_ATTRIBUTE},JSXAttribute[name.name="type"][value.value="radio"])))${notHasSpreadAttribute}`]: (node) => {
+        context.report({
+          node,
+          message: `${node.name.name} にname属性を指定してください${MESSAGE_UNDEFINED_NAME_PART}`,
+        })
+      },
+      [`${RADIO_ELEMENT}:not(:has(${NAME_ATTRIBUTE}))${notHasSpreadAttribute}`]: (node) => {
+        context.report({
+          node,
+          message: `${node.name.name} にグループとなる他のinput[radio]と同じname属性を指定してください
+ - 適切に指定することで同じname属性を指定したinput[radio]とグループが確立され、適切なキーボード操作を行えるようになります${MESSAGE_UNDEFINED_NAME_PART}`,
+        })
+      },
+      [`${INPUT_ELEMENT}${notHasSpreadAttribute} ${NAME_ATTRIBUTE}:not([value.value=${INPUT_NAME_REGEX}])`]: (node) => {
+        context.report({
+          node,
+          message: `${node.parent.name.name} のname属性の値(${node.value.value})はブラウザの自動補完が適切に行えない可能性があるため${MESSAGE_PART_FORMAT}`,
+        })
       },
     }
   },

package/rules/a11y-input-in-form-control/index.js

@@ -77,8 +77,11 @@ module.exports = {
             for (const i of node.attributes) {
               if (i.name) {
                 // HINT: idが設定されている場合、htmlForでlabelと紐づく可能性が高いため無視する
+                // aria-label, aria-labelledbyが設定されている場合は疑似ラベルが設定されているため許容する
                 switch (i.name.name) {
                   case 'id':
+                  case 'aria-label':
+                  case 'aria-labelledby':
                     isPseudoLabel = true
                     break
                   case 'type':

package/rules/a11y-prohibit-input-maxlength-attribute/index.js

@@ -1,9 +1,5 @@
-const INPUT_COMPONENT_NAMES = /((I|^i)nput|(T|^t)extarea)$/
-
 const SCHEMA = []
 
-const checkHasMaxLength = (attr) => attr.name?.name === 'maxLength'
-
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
  */
@@ -14,17 +10,15 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) => {
-        if (node.name.type === 'JSXIdentifier' && INPUT_COMPONENT_NAMES.test(node.name.name) && node.attributes.find(checkHasMaxLength)) {
-          context.report({
-            node,
-            message: `${node.name.name}にmaxLength属性を設定しないでください。
+      [`JSXOpeningElement[name.name=/((I|^i)nput|(T|^t)extarea)$/]:has(JSXAttribute[name.name="maxLength"])`]: (node) => {
+        context.report({
+          node,
+          message: `${node.name.name}にmaxLength属性を設定しないでください。
 - maxLength属性がついた要素に、テキストをペーストすると、maxLength属性の値を超えた範囲が意図せず切り捨てられてしまう場合があります
 - 以下のいずれかの方法で修正をおこなってください
   - 方法1: pattern属性とtitle属性を組み合わせ、form要素でラップする
   - 方法2: JavaScriptを用いたバリデーションを実装する`,
-          })
-        }
+        })
       },
     }
   },

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

@@ -1,6 +1,7 @@
-const INPUT_TAG_REGEX = /((I|^i)nput|(T|^t)extarea|FieldSet|Combo(B|b)ox|(Date|Wareki|Time)Picker)$/
-const SEARCH_INPUT_REGEX = /SearchInput$/
-const COMBOBOX_REGEX = /Combo(B|b)ox$/
+const PLACEHOLDER_ATTRIBUTE = 'JSXAttribute[name.name="placeholder"]'
+const COMBOBOX_ELEMENT = 'JSXOpeningElement[name.name=/Combo(B|b)ox$/]'
+const DEFAULT_ITEM_ATTRIBUTE = 'JSXAttribute[name.name="defaultItem"]'
+const SEARCH_INPUT_NAME = '[name.name=/SearchInput$/]'
 
 /**
  * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
@@ -12,59 +13,37 @@ module.exports = {
   },
   create(context) {
     return {
-      JSXOpeningElement: (node) => {
-        const name = node.name.name
-
-        if (name && INPUT_TAG_REGEX.test(name)) {
-          const placeholder = node.attributes.find((a) => a.name?.name === 'placeholder')
-
-          if (placeholder) {
-            if (SEARCH_INPUT_REGEX.test(name)) {
-              const tooltipMessage = node.attributes.find((a) => a.name?.name === 'tooltipMessage')
-
-              if (!tooltipMessage) {
-                context.report({
-                  node: placeholder,
-                  message: `${name} にはplaceholder属性を単独で利用せず、tooltipMessageオプションのみ、もしくはplaceholderとtooltipMessageの併用を検討してください。 (例: '<${name} tooltipMessage="ヒント" />', '<${name} tooltipMessage={hint} placeholder={hint} />')`,
-                })
-              }
-            } else if (COMBOBOX_REGEX.test(name)) {
-              let defaultItem
-              let dropdownHelpMessage
-
-              node.attributes.forEach((a) => {
-                switch(a.name?.name) {
-                  case 'defaultItem':
-                    defaultItem = a
-                    break
-                  case 'dropdownHelpMessage':
-                    dropdownHelpMessage = a
-                    break
-                }
-              })
+      [`${COMBOBOX_ELEMENT}:has(${DEFAULT_ITEM_ATTRIBUTE}) ${PLACEHOLDER_ATTRIBUTE}`]: (node) => {
+        context.report({
+          node,
+          message: `${node.parent.name.name} にはdefaultItemが設定されているため、placeholder属性を閲覧出来ません。削除してください。`,
+        })
+      },
+      [`${COMBOBOX_ELEMENT}:not(:has(${DEFAULT_ITEM_ATTRIBUTE}, JSXAttribute[name.name="dropdownHelpMessage"])) ${PLACEHOLDER_ATTRIBUTE}`]: (node) => {
+        const name = node.parent.name.name
 
-              if (defaultItem) {
-                context.report({
-                  node: placeholder,
-                  message: `${name} にはdefaultItemが設定されているため、placeholder属性を閲覧出来ません。削除してください。`,
-                })
-              } else if (!dropdownHelpMessage) {
-                context.report({
-                  node: placeholder,
-                  message: `${name} にはplaceholder属性は設定せず、以下のいずれか、もしくは組み合わせての対応を検討してください。
+        context.report({
+          node,
+          message: `${name} にはplaceholder属性は設定せず、以下のいずれか、もしくは組み合わせての対応を検討してください。
  - 選択肢をどんな値で絞り込めるかの説明をしたい場合は dropdownHelpMessage 属性に変更してください。
  - 空の値の説明のためにplaceholderを利用している場合は defaultItem 属性に変更してください。
  - 上記以外の説明を行いたい場合、ヒント用要素を設置してください。(例: '<div><${name} /><Hint>ヒント</Hint></div>')`,
-                })
-              }
-            } else {
-              context.report({
-                node: placeholder,
-                message: `${name} にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><${name} /><Hint>ヒント</Hint></div>')`,
-              })
-            }
-          }
-        }
+        })
+      },
+      [`JSXOpeningElement${SEARCH_INPUT_NAME}:not(:has(JSXAttribute[name.name="tooltipMessage"])) ${PLACEHOLDER_ATTRIBUTE}`]: (node) => {
+        const inputName = node.parent.name.name
+        context.report({
+          node,
+          message: `${inputName} にはplaceholder属性を単独で利用せず、tooltipMessageオプションのみ、もしくはplaceholderとtooltipMessageの併用を検討してください。 (例: '<${inputName} tooltipMessage="ヒント" />', '<${inputName} tooltipMessage={hint} placeholder={hint} />')`,
+        })
+      },
+      [`JSXOpeningElement[name.name=/((I|^i)nput|(T|^t)extarea|FieldSet|(Date|Wareki|Time)Picker)$/]:not(${SEARCH_INPUT_NAME}) ${PLACEHOLDER_ATTRIBUTE}`]: (node) => {
+        const name = node.parent.name.name
+
+        context.report({
+          node,
+          message: `${name} にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><${name} /><Hint>ヒント</Hint></div>')`,
+        })
       },
     }
   },

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

@@ -142,10 +142,6 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
       code: `<button><SmartHRLogoSuffix /></button>`,
       errors: [{ message: defaultErrorMessage }]
     },
-    {
-      code: `<a><div role="article" aria-label="hoge" /></a>`,
-      errors: [{ message: defaultErrorMessage }]
-    },
     {
       code: `<a><TextWithHoge /></a>`,
       errors: [{ message: defaultErrorMessage }]

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

@@ -33,7 +33,6 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
   invalid: [
     { code: '<img />', errors: [ { message: messageNotExistAlt } ] },
     { code: '<HogeImage alt="" />', errors: [ { message: messageNullAlt } ] },
-    { code: '<hoge><image /></hoge>', errors: [ { message: messageNotExistAlt } ] },
     { code: '<AnyImg {...hoge} />', errors: [ { message: messageNotExistAlt } ]  },
     { code: '<AnyImg {...hoge} />', options: [{ checkType: 'always' }], errors: [ { message: messageNotExistAlt } ] },
   ]

package/test/a11y-input-in-form-control.js

@@ -111,6 +111,8 @@ ruleTester.run('a11y-input-in-form-control', rule, {
     { code: '<Fieldset><HogeCheckBoxs /></Fieldset>' },
     { code: '<Fieldset><HogeCheckBoxes /></Fieldset>' },
     { code: '<HogeFormControl>{ dateInput ? <DateInput /> : <Input /> }</HogeFormControl>'},
+    { code: '<Input aria-label="hoge" />' },
+    { code: '<Select aria-labelledby="hoge" />' },
   ],
   invalid: [
     { code: `<input />`, errors: [ { message: noLabeledInput('input') } ] },

package/rules/a11y-replace-unreadable-symbol/README.md

@@ -1,38 +0,0 @@
-# smarthr/a11y-replace-unreadable-symbol
-
-- 一部記号はスクリーンリーダーで読み上げられない、もしくは記号名そのままで読み上げられてしまい、意図が正しく伝えられない場合があります
-- それらの記号を適切に読み上げられるコンポーネントに置き換えることを促すルールです
-
-## rules
-
-```js
-{
-  rules: {
-    'smarthr/a11y-replace-unreadable-symbol': 'error', // 'warn', 'off',
-  },
-}
-```
-
-## ❌ Incorrect
-
-```jsx
-<>XXXX年YY月ZZ日 〜 XXXX年YY月ZZ日</>
-// スクリーンリーダーは "XXXX年YY月ZZ日XXXX年YY月ZZ日" と読み上げる場合があります
-
-<p>選択できる数値の範囲は 0 ~ 9999 です</p>
-// スクリーンリーダーは "選択できる数値の範囲は09999です" と読み上げる場合があります
-```
-
-## ✅ Correct
-
-```jsx
-//
-<>XXXX年YY月ZZ日 <RangeSeparator /> XXXX年YY月ZZ日</>
-// スクリーンリーダーは "XXXX年YY月ZZ日からXXXX年YY月ZZ日" と読み上げます
-
-<p>選択できる数値の範囲は 0 <RangeSeparator /> 9999 です</p>
-// スクリーンリーダーは "選択できる数値の範囲は0から9999です" と読み上げます
-
-<p>入力できる記号は <RangeSeparator decorators={{ text: '~', visuallyHiddenText: '半角チルダ' }} /> です</p>
-// スクリーンリーダーは "入力できる記号は半角チルダです" と読み上げます
-```

package/rules/a11y-replace-unreadable-symbol/index.js

@@ -1,31 +0,0 @@
-const TILDE_REGEX = /([~〜])/
-
-const SCHEMA = []
-
-/**
- * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
- */
-module.exports = {
-  meta: {
-    type: 'problem',
-    schema: SCHEMA,
-  },
-  create(context) {
-    return {
-      JSXText: (node) => {
-        const matcher = node.value.match(TILDE_REGEX)
-
-        if (matcher) {
-          context.report({
-            node,
-            message: `"${matcher[1]}"はスクリーンリーダーが正しく読み上げることができない場合があるため、smarthr-ui/RangeSeparatorに置き換えてください。
- - エラー表示されている行に"${matcher[1]}"が存在しない場合、改行文字を含む関係で行番号がずれている場合があります。数行下の範囲を確認してください
- - smarthr-ui/RangeSeparatorに置き換えることでスクリーンリーダーが "から" と読み上げることができます
- - 前後の文脈などで "から" と読まれることが不適切な場合 \`<RangeSeparator decorators={{ visuallyHiddenText: () => "ANY" }} />\` のようにdecoratorsを指定してください`,
-          })
-        }
-      },
-    }
-  },
-}
-module.exports.schema = SCHEMA

package/test/a11y-replace-unreadable-symbol.js

@@ -1,35 +0,0 @@
-const rule = require('../rules/a11y-replace-unreadable-symbol')
-const RuleTester = require('eslint').RuleTester
-
-const generateErrorText = (symbol, replaced, read) => `"${symbol}"はスクリーンリーダーが正しく読み上げることができない場合があるため、smarthr-ui/${replaced}に置き換えてください。
- - エラー表示されている行に"${symbol}"が存在しない場合、改行文字を含む関係で行番号がずれている場合があります。数行下の範囲を確認してください
- - smarthr-ui/${replaced}に置き換えることでスクリーンリーダーが "${read}" と読み上げることができます
- - 前後の文脈などで "${read}" と読まれることが不適切な場合 \`<RangeSeparator decorators={{ visuallyHiddenText: () => "ANY" }} />\` のようにdecoratorsを指定してください`
-
-const ruleTester = new RuleTester({
-  languageOptions: {
-    parserOptions: {
-      ecmaFeatures: {
-        jsx: true,
-      },
-    },
-  },
-})
-
-ruleTester.run('a11y-replace-unreadable-symbol', rule, {
-  valid: [
-    { code: `<>ほげふが</>` },
-    { code: `<RangeSeparator />` },
-    { code: `<p>ほげ<RangeSeparator />ふが</p>` },
-    { code: `<p>
-      ほげ
-      <RangeSeparator />
-      ふが
-    </p>` },
-  ],
-  invalid: [
-    { code: `<>~</>`, errors: [ { message: generateErrorText('~', 'RangeSeparator', 'から') } ] },
-    { code: `<>ほげ~ふが</>`, errors: [ { message: generateErrorText('~', 'RangeSeparator', 'から') } ] },
-    { code: `<p>ほげ〜ふが</p>`, errors: [ { message: generateErrorText('〜', 'RangeSeparator', 'から') } ] },
-  ]
-})