eslint-plugin-smarthr 0.3.14 → 0.3.16

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.16](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.15...v0.3.16) (2023-12-30)
+
+
+### Features
+
+* a11y-delegate-element-has-role-presantation を追加 ([#92](https://github.com/kufu/eslint-plugin-smarthr/issues/92)) ([c211ffb](https://github.com/kufu/eslint-plugin-smarthr/commit/c211ffb7e698d010ca639d0bdda9ea82cb31033a))
+
+### [0.3.15](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.14...v0.3.15) (2023-11-29)
+
+
+### Features
+
+* a11y系ruleに "import時のasでのrename内容をチェックする" 処理を追加 ([#90](https://github.com/kufu/eslint-plugin-smarthr/issues/90)) ([2eab779](https://github.com/kufu/eslint-plugin-smarthr/commit/2eab77960985e7c52bd262ff674ae31cb2c6008e))
+
 ### [0.3.14](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.13...v0.3.14) (2023-11-05)
 
 

package/libs/format_styled_components.js

@@ -3,6 +3,21 @@ const STYLED_COMPONENTS = `${STYLED_COMPONENTS_METHOD}-components`
 
 const findInvalidImportNameNode = (s) => s.type === 'ImportDefaultSpecifier' && s.local.name !== STYLED_COMPONENTS_METHOD
 
+const checkImportStyledComponents = (node, context) => {
+  if (node.source.value !== STYLED_COMPONENTS) {
+    return
+  }
+
+  const invalidNameNode = node.specifiers.find(findInvalidImportNameNode)
+
+  if (invalidNameNode) {
+    context.report({
+      node: invalidNameNode,
+      message: `${STYLED_COMPONENTS} をimportする際は、名称が"${STYLED_COMPONENTS_METHOD}" となるようにしてください。例: "import ${STYLED_COMPONENTS_METHOD} from '${STYLED_COMPONENTS}'"`,
+    });
+  }
+}
+
 const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) => {
   const entriesesTagNames = Object.entries(EXPECTED_NAMES).map(([b, e]) => [ new RegExp(b), new RegExp(e) ])
   const entriesesUnTagNames = UNEXPECTED_NAMES ? Object.entries(UNEXPECTED_NAMES).map(([b, e]) => {
@@ -11,20 +26,27 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
     return [ new RegExp(b), new RegExp(auctualE), messageTemplate ]
   }) : []
 
-  return {
-    ImportDeclaration: (node) => {
-      if (node.source.value !== STYLED_COMPONENTS) {
-        return
-      }
-
-      const invalidNameNode = node.specifiers.find(findInvalidImportNameNode)
 
-      if (invalidNameNode) {
+  const checkImportedNameToLocalName = (node, base, extended) => {
+    entriesesTagNames.forEach(([b, e]) => {
+      if (base.match(b) && !extended.match(e)) {
         context.report({
-          node: invalidNameNode,
-          message: `${STYLED_COMPONENTS} をimportする際は、名称が"${STYLED_COMPONENTS_METHOD}" となるようにしてください。例: "import ${STYLED_COMPONENTS_METHOD} from '${STYLED_COMPONENTS}'"`,
+          node,
+          message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください`,
         });
       }
+    })
+  }
+
+  return {
+    ImportDeclaration: (node) => {
+      checkImportStyledComponents(node, context)
+
+      node.specifiers.forEach((s) => {
+        if (s.imported && s.imported.name !== s.local.name) {
+          checkImportedNameToLocalName(node, s.imported.name, s.local.name)
+        }
+      })
     },
     VariableDeclarator: (node) => {
       if (!node.init) {
@@ -64,14 +86,7 @@ const generateTagFormatter = ({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }) =>
       if (base) {
         const extended = node.id.name
 
-        entriesesTagNames.forEach(([b, e]) => {
-          if (base.match(b) && !extended.match(e)) {
-            context.report({
-              node,
-              message: `${extended}を正規表現 "${e.toString()}" がmatchする名称に変更してください`,
-            });
-          }
-        })
+        checkImportedNameToLocalName(node, base, extended)
 
         entriesesUnTagNames.forEach(([b, e, m]) => {
           const matcher = extended.match(e)

package/package.json

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

package/rules/a11y-delegate-element-has-role-presentation/README.md

@@ -0,0 +1,55 @@
+# smarthr/a11y-delegate-element-has-role-presantation
+
+- 'role="presantation"'を適切に設定することを促すルールです
+- インタラクティブな要素に対して'role="presantation"'が設定されている場合、エラーになります
+  - インタラクティブな要素とは form, inputなどの入力要素、button, a などのクリッカブルな要素を指します
+- インタラクティブな要素から発生するイベントを親要素でキャッチする場合、親要素に 'role="presantation"' を設定することを促します
+  - インタラクティブではない要素でイベントをキャッチしており、かつ'role="presantation"'を設定しているにも関わらず、子要素にインタラクティブな要素がない場合はエラーになります
+- additionalInteractiveComponentRegexオプションに独自コンポーネントの名称を正規表現で設定することで、インタラクティブな要素として判定することが可能です
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/a11y-delegate-element-has-role-presantation': [
+      'error', // 'warn', 'off'
+      // { additionalInteractiveComponentRegex: ['^InteractiveComponent%'] }
+    ]
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// インタラクティブな要素に対して role="presantation" は設定できない
+<Button role="presantation">text.</Button>
+<input type="text" role="presantation" />
+
+// インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
+// role="presantation" を設定する必要がある
+<div onClick={hoge}>
+  <Button>text.</Button>
+</div>
+
+// 非インタラクティブな要素でイベントをキャッチする場合、
+// 子要素にインタラクティブな要素がない場合はエラー
+<div onClick={hoge} role="presentation">
+  <Text>hoge.</Text>
+</div>
+```
+
+## ✅ Correct
+
+```jsx
+// インタラクティブな要素で発生するイベントを非インタラクティブな要素でキャッチする場合
+// role="presantation" を設定する
+<div onClick={hoge} role="presentation">
+  <Button>text.</Button>
+</div>
+
+<div onClick={hoge} role="presentation">
+  <AnyForm />
+</div>
+```

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

@@ -0,0 +1,135 @@
+const { generateTagFormatter } = require('../../libs/format_styled_components');
+
+const EXPECTED_NAMES = {
+  '(i|I)nput$': 'Input$',
+  '(t|T)extarea$': 'Textarea$',
+  '(s|S)elect$': 'Select$',
+  'InputFile$': 'InputFile$',
+  'RadioButtonPanel$': 'RadioButtonPanel$',
+  'Check(b|B)ox$': 'CheckBox$',
+  'Combo(b|B)ox$': 'ComboBox$',
+  'DatePicker$': 'DatePicker$',
+  'DropZone$': 'DropZone$',
+  'FieldSet$': 'FieldSet$',
+  '(b|B)utton$': 'Button$',
+  'Anchor$': 'Anchor$',
+  'Link$': 'Link$',
+  'TabItem$': 'TabItem$',
+  '^a$': '(Anchor|Link)$',
+
+  '(f|F)orm$': 'Form$',
+  'ActionDialogWithTrigger$': 'ActionDialogWithTrigger$',
+  'RemoteDialogTrigger$': 'RemoteDialogTrigger$',
+  'RemoteTrigger(.+)Dialog$': 'RemoteTrigger(.+)Dialog$',
+  'Pagination$': 'Pagination$',
+  'SideNav$': 'SideNav$',
+  'AccordionPanel$': 'AccordionPanel$',
+}
+
+const UNEXPECTED_NAMES = {
+  '(B|^b)utton$': '(Button)$',
+  '(Anchor|^a)$': '(Anchor)$',
+  '(Link|^a)$': '(Link)$',
+}
+
+const INTERACTIVE_COMPONENT_NAMES = Object.values(EXPECTED_NAMES)
+const INTERACTIVE_ON_REGEX = /^on(Change|Input|Focus|Blur|(Double)?Click|Key(Down|Up|Press)|Mouse(Enter|Over|Down|Up|Leave)|Select|Submit)$/
+
+const messageNonInteractiveEventHandler = (nodeName, interactiveComponentRegex, onAttrs) => {
+  const onAttrsText = onAttrs.join(', ')
+
+  return `${nodeName} に${onAttrsText}を設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1:  ${nodeName}がinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
+   - "${interactiveComponentRegex}" の正規表現にmatchする名称に変更してください
+ - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
+ - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください`
+}
+const messageRolePresentationNotHasInteractive = (nodeName, interactiveComponentRegex, onAttrs) => `${nodeName}に 'role="presentation"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1: 子要素にインタラクティブな要素が存在するにも関わらずこのエラーが表示されている場合、子要素の名称を変更してください
+   - "${interactiveComponentRegex}" の正規表現にmatchするよう、インタラクティブな子要素全ての名称を変更してください
+ - 方法2: ${nodeName}自体がインタラクティブな要素の場合、'role="presentation"'を削除した上で名称を変更してください
+   - "${interactiveComponentRegex}" の正規表現にmatchするよう、${nodeName}の名称を変更してください
+ - 方法3: 子要素にインタラクティブな要素が存在し、${onAttrs.join(', ')}全属性をそれらの要素に移動させられる場合、'role="presentation"'を消した上で実施してください`
+const messageInteractiveHasRolePresentation = (nodeName, interactiveComponentRegex) => `${nodeName}はinput、buttonやaなどのインタラクティブな要素にもかかわらず 'role="presentation"' が設定されているため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1: 'role="presentation"' を削除してください
+ - 方法2: ${nodeName}の名称を "${interactiveComponentRegex}" とマッチしない名称に変更してください`
+
+const SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      additionalInteractiveComponentRegex: { type: 'array', items: { type: 'string' } },
+    },
+    additionalProperties: false,
+  }
+]
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const options = context.options[0]
+    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES.join('|')}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
+
+    return {
+      ...generateTagFormatter({ context, EXPECTED_NAMES, UNEXPECTED_NAMES }),
+      JSXOpeningElement: (node) => {
+        const nodeName = node.name.name || '';
+
+        let onAttrs = []
+        let isRolePresentation = false
+
+        node.attributes.forEach((a) => {
+          const aName = a.name?.name || ''
+
+          if (aName.match(INTERACTIVE_ON_REGEX)) {
+            onAttrs.push(aName)
+          } else if (aName === 'role' && a.value?.value === 'presentation') {
+            isRolePresentation = true
+          }
+        })
+
+        if (!nodeName.match(interactiveComponentRegex)) {
+          if (onAttrs.length > 0) {
+            if (!isRolePresentation) {
+              context.report({
+                node,
+                message: messageNonInteractiveEventHandler(nodeName, interactiveComponentRegex, onAttrs),
+              });
+            } else {
+              const isHasInteractive = (c) => {
+                if (c.type === 'JSXElement') {
+                  if ((c.openingElement.name.name || '').match(interactiveComponentRegex)) {
+                    return true
+                  }
+
+                  if (c.children.length > 0) {
+                    return c.children.find(isHasInteractive)
+                  }
+                }
+
+                return false
+              }
+
+              if (!node.parent.children.find(isHasInteractive)) {
+                context.report({
+                  node,
+                  message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs)
+                })
+              }
+            }
+          }
+        } else if (isRolePresentation) {
+          context.report({
+            node,
+            message: messageInteractiveHasRolePresentation(nodeName, interactiveComponentRegex)
+          })
+        }
+      },
+    };
+  },
+};
+module.exports.schema = SCHEMA;

package/rules/a11y-input-has-name-attribute/README.md

@@ -1,7 +1,7 @@
 # smarthr/a11y-input-has-name-attribute
 
-- input, textarea, select に name 属性を設定することを強制するルールです。
-  - input は name を設定することでブラウザの補完機能が有効になる可能性が高まります。
+- input, textarea, select など入力要素に name 属性を設定することを強制するルールです。
+  - 入力要素は name を設定することでブラウザの補完機能が有効になる可能性が高まります。
     - 補完機能はブラウザによって異なるため、補完される可能性が上がるよう、name には半角英数の小文字・大文字と一部記号(`_ , [, ]`)のみ利用可能です。
   - input[type="radio"] は name を適切に設定することでラジオグループが確立され、キーボード操作しやすくなる等のメリットがあります。
 - checkTypeオプションに 'smart' を指定することで spread attributeが設定されている場合はcorrectに出来ます。

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

@@ -6,6 +6,7 @@ const EXPECTED_NAMES = {
   '(s|S)elect$': 'Select$',
   'InputFile$': 'InputFile$',
   'RadioButton$': 'RadioButton$',
+  'RadioButtonPanel$': 'RadioButtonPanel$',
   'Check(b|B)ox$': 'CheckBox$',
   'Combo(b|B)ox$': 'ComboBox$',
   'DatePicker$': 'DatePicker$',

package/test/a11y-anchor-has-href-attribute.js

@@ -25,6 +25,8 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { HogeAnchor as FugaAnchor } from './hoge'` },
+    { code: `import { Link as FugaLink } from './hoge'` },
     { code: 'const HogeAnchor = styled.a``' },
     { code: 'const HogeLink = styled.a``' },
     { code: 'const HogeAnchor = styled(Anchor)``' },
@@ -39,6 +41,8 @@ ruleTester.run('a11y-anchor-has-href-attribute', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { Anchor as AnchorHoge } from './hoge'`, errors: [ { message: `AnchorHogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeLink as HogeLinkFuga } from './hoge'`, errors: [ { message: `HogeLinkFugaを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },

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

@@ -22,6 +22,12 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { SmartHRLogo as HogeSmartHRLogo } from './hoge'` },
+    { code: `import { AbcButton as StyledAbcButton } from './hoge'` },
+    { code: `import { HogeAnchor as FugaAnchor } from './hoge'` },
+    { code: `import { Link as FugaLink } from './hoge'` },
+    { code: `import { FugaText as HogeFugaText } from './hoge'` },
+    { code: `import { FugaMessage as HogeFugaMessage } from './hoge'` },
     { code: 'const HogeAnchor = styled.a``' },
     { code: 'const HogeLink = styled.a``' },
     { code: 'const HogeButton = styled.button``' },
@@ -128,6 +134,12 @@ ruleTester.run('a11y-clickable-element-has-text', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { SmartHRLogo as SmartHRLogoHoge } from './hoge'`, errors: [ { message: `SmartHRLogoHogeを正規表現 "/SmartHRLogo$/" がmatchする名称に変更してください` } ] },
+    { code: `import { AbcButton as AbcButtonFuga } from './hoge'`, errors: [ { message: `AbcButtonFugaを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Anchor as AnchorHoge } from './hoge'`, errors: [ { message: `AnchorHogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeLink as HogeLinkFuga } from './hoge'`, errors: [ { message: `HogeLinkFugaを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
+    { code: `import { FugaText as FugaTextFuga } from './hoge'`, errors: [ { message: `FugaTextFugaを正規表現 "/Text$/" がmatchする名称に変更してください` } ] },
+    { code: `import { FugaMessage as FugaMessageFuga } from './hoge'`, errors: [ { message: `FugaMessageFugaを正規表現 "/Message$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ]  },
     { code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ]  },

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

@@ -0,0 +1,70 @@
+const rule = require('../rules/a11y-delegate-element-has-role-presentation');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2018,
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    sourceType: 'module',
+  },
+});
+
+ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
+  valid: [
+    { code: '<Input />' },
+    { code: '<HogeForm>any</HogeForm>' },
+    { code: '<FugaButton>any</FugaButton>' },
+    { code: '<Link />' },
+    { code: '<div onClick={any} role="presentation"><Link /></div>' },
+    { code: '<Wrapper onClick={any} role="presentation"><Link /></Wrapper>' },
+    { code: '<Wrapper onClick={any} role="presentation"><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }] },
+    { code: '<Wrapper onClick={any} role="presentation"><any><Link /></any></Wrapper>' },
+  ],
+  invalid: [
+    { code: '<Input role="presentation" />', errors: [ { message: `Inputはinput、buttonやaなどのインタラクティブな要素にもかかわらず 'role="presentation"' が設定されているため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1: 'role="presentation"' を削除してください
+ - 方法2: Inputの名称を "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" とマッチしない名称に変更してください` } ] },
+    { code: '<HogeForm role="presentation">any</HogeForm>', errors: [ { message: `HogeFormはinput、buttonやaなどのインタラクティブな要素にもかかわらず 'role=\"presentation\"' が設定されているため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1: 'role="presentation"' を削除してください
+ - 方法2: HogeFormの名称を "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" とマッチしない名称に変更してください` } ] },
+    { code: '<FugaButton role="presentation">any</FugaButton>', errors: [ { message: `FugaButtonはinput、buttonやaなどのインタラクティブな要素にもかかわらず 'role="presentation"' が設定されているため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1: 'role="presentation"' を削除してください
+ - 方法2: FugaButtonの名称を "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" とマッチしない名称に変更してください` } ] },
+    { code: '<Link role="presentation" />', errors: [ { message: `Linkはinput、buttonやaなどのインタラクティブな要素にもかかわらず 'role="presentation"' が設定されているため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1: 'role="presentation"' を削除してください
+ - 方法2: Linkの名称を "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" とマッチしない名称に変更してください` } ] },
+    { code: '<div onClick={any} onSubmit={any2} role="presentation"><Hoge /></div>', errors: [ { message: `divに 'role="presentation"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1: 子要素にインタラクティブな要素が存在するにも関わらずこのエラーが表示されている場合、子要素の名称を変更してください
+   - "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" の正規表現にmatchするよう、インタラクティブな子要素全ての名称を変更してください
+ - 方法2: div自体がインタラクティブな要素の場合、'role="presentation"'を削除した上で名称を変更してください
+   - "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" の正規表現にmatchするよう、divの名称を変更してください
+ - 方法3: 子要素にインタラクティブな要素が存在し、onClick, onSubmit全属性をそれらの要素に移動させられる場合、'role="presentation"'を消した上で実施してください` } ] },
+    { code: '<div onClick={any}><Link /></div>', errors: [ { message: `div にonClickを設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1:  divがinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
+   - "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" の正規表現にmatchする名称に変更してください
+ - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接onClickを設定することを検討してください
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、onClickの設定要素を検討してください
+ - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的でonClickを設定している場合、'role="presentation"' を設定してください` } ] },
+    { code: '<Wrapper onClick={any}><Link /></Wrapper>', errors: [ { message: `Wrapper にonClickを設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1:  Wrapperがinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
+   - "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" の正規表現にmatchする名称に変更してください
+ - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接onClickを設定することを検討してください
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、onClickの設定要素を検討してください
+ - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的でonClickを設定している場合、'role="presentation"' を設定してください` } ] },
+    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: `Wrapper にonSubmitを設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1:  Wrapperがinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
+   - "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$|^Hoge$)/" の正規表現にmatchする名称に変更してください
+ - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接onSubmitを設定することを検討してください
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、onSubmitの設定要素を検討してください
+ - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的でonSubmitを設定している場合、'role="presentation"' を設定してください` } ] },
+    { code: '<Wrapper onClick={any} onChange={anyany}><any><Link /></any></Wrapper>', errors: [ { message: `Wrapper にonClick, onChangeを設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1:  Wrapperがinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
+   - "/(Input$|Textarea$|Select$|InputFile$|RadioButtonPanel$|CheckBox$|ComboBox$|DatePicker$|DropZone$|FieldSet$|Button$|Anchor$|Link$|TabItem$|(Anchor|Link)$|Form$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/" の正規表現にmatchする名称に変更してください
+ - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接onClick, onChangeを設定することを検討してください
+ - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、onClick, onChangeの設定要素を検討してください
+ - 方法4: インタラクティブな子要素から発生したイベントをキャッチすることが目的でonClick, onChangeを設定している場合、'role="presentation"' を設定してください` } ] },
+  ],
+});

package/test/a11y-heading-in-sectioning-content.js

@@ -26,6 +26,13 @@ const noTagAttrMessage = `tag属性を指定せず、smarthr-uiのArticle, Aside
 ruleTester.run('a11y-heading-in-sectioning-content', rule, {
   valid: [
     { code: `import styled from 'styled-components'` },
+    { code: `import { PageHeading as HogePageHeading } from './hoge'` },
+    { code: `import { HogeHeading as FugaHeading } from './hoge'` },
+    { code: `import { HogeArticle as FugaArticle } from './hoge'` },
+    { code: `import { HogeAside as FugaAside } from './hoge'` },
+    { code: `import { HogeNav as FugaNav } from './hoge'` },
+    { code: `import { HogeSection as FugaSection } from './hoge'` },
+    { code: `import { ModelessDialog as FugaModelessDialog } from './hoge'` },
     { code: 'const HogePageHeading = styled.h1``' },
     { code: 'const HogeHeading = styled.h2``' },
     { code: 'const HogeHeading = styled.h3``' },
@@ -47,6 +54,13 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { HogePageHeading as PageHeadingAbc } from './hoge'`, errors: [ { message: `PageHeadingAbcを正規表現 "/PageHeading$/" がmatchする名称に変更してください` }, { message: `PageHeadingAbcを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Heading as HeadingHoge } from './hoge'`, errors: [ { message: `HeadingHogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeArticle as HogeArticleFuga } from './hoge'`, errors: [ { message: `HogeArticleFugaを正規表現 "/Article$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeAside as HogeAsideFuga } from './hoge'`, errors: [ { message: `HogeAsideFugaを正規表現 "/Aside$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeNav as HogeNavFuga } from './hoge'`, errors: [ { message: `HogeNavFugaを正規表現 "/Nav$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeSection as HogeSectionFuga } from './hoge'`, errors: [ { message: `HogeSectionFugaを正規表現 "/Section$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeModelessDialog as HogeModelessDialogFuga } from './hoge'`, errors: [ { message: `HogeModelessDialogFugaを正規表現 "/ModelessDialog$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h1``', errors: [ { message: `Hogeを正規表現 "/PageHeading$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h2``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.h3``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください` } ] },

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

@@ -26,6 +26,9 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { HogeImg as FugaImg } from './hoge'` },
+    { code: `import { HogeImage as FugaImage } from './hoge'` },
+    { code: `import { HogeIcon as FugaIcon } from './hoge'` },
     { code: 'const HogeImg = styled.img``' },
     { code: 'const HogeImage = styled.img``' },
     { code: 'const HogeIcon = styled.img``' },
@@ -46,6 +49,9 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { HogeImg as ImgFuga } from './hoge'`, errors: [ { message: `ImgFugaを正規表現 "/Img$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeImage as HogeImageFuga } from './hoge'`, errors: [ { message: `HogeImageFugaを正規表現 "/Image$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Icon as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.img``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.svg``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Icon)``', errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください` } ] },

package/test/a11y-input-has-name-attribute.js

@@ -23,6 +23,15 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { Input as HogeInput } from './hoge'` },
+    { code: `import { HogeTextarea as FugaTextarea } from './hoge'` },
+    { code: `import { Select as HogeSelect } from './hoge'` },
+    { code: `import { InputFile as HogeInputFile } from './hoge'` },
+    { code: `import { HogeRadioButton as FugaRadioButton } from './hoge'` },
+    { code: `import { CheckBox as FugaCheckBox } from './hoge'` },
+    { code: `import { HogeComboBox as FugaComboBox } from './hoge'` },
+    { code: `import { DatePicker as HogeDatePicker } from './hoge'` },
+    { code: `import { HogeDropZone as HogeFugaDropZone } from './hoge'` },
     { code: 'const HogeInput = styled.input``' },
     { code: 'const HogeInput = styled(Input)``' },
     { code: 'const HogeRadioButton = styled(RadioButton)``' },
@@ -43,6 +52,15 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeTextarea as HogeTextareaFuga } from './hoge'`, errors: [ { message: `HogeTextareaFugaを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeSelect as SelectFuga } from './hoge'`, errors: [ { message: `SelectFugaを正規表現 "/Select$/" がmatchする名称に変更してください` } ] },
+    { code: `import { InputFile as HogeInputFileFuga } from './hoge'`, errors: [ { message: `HogeInputFileFugaを正規表現 "/InputFile$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeRadioButton as FugaRadioButtonAbc } from './hoge'`, errors: [ { message: `FugaRadioButtonAbcを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },
+    { code: `import { CheckBox as FugaCheckBoxHoge } from './hoge'`, errors: [ { message: `FugaCheckBoxHogeを正規表現 "/CheckBox$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください` } ] },
+    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/DatePicker$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeDropZone as HogeFugaDropZoneAbc } from './hoge'`, errors: [ { message: `HogeFugaDropZoneAbcを正規表現 "/DropZone$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.Input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(RadioButton)``', errors: [ { message: `Hogeを正規表現 "/RadioButton$/" がmatchする名称に変更してください` } ] },

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

@@ -17,6 +17,11 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { Input as HogeInput } from './hoge'` },
+    { code: `import { HogeSearchInput as FugaSearchInput } from './hoge'` },
+    { code: `import { HogeTextarea as FugaHogeTextarea } from './hoge'` },
+    { code: `import { ComboBox as FugaHogeComboBox } from './hoge'` },
+    { code: `import { AbcDatePicker as StyledDatePicker } from './hoge'` },
     { code: 'const HogeInput = styled.input``' },
     { code: 'const HogeTextarea = styled.textarea``' },
     { code: 'const HogeInput = styled(Input)``' },
@@ -44,6 +49,11 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
+    { code: `import { SearchInput as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` }, { message: `Hogeを正規表現 "/SearchInput$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeTextarea as HogeTextareaFuga } from './hoge'`, errors: [ { message: `HogeTextareaFugaを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },
+    { code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください` } ] },
+    { code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/DatePicker$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(StyledInput)``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.textarea``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください` } ] },

package/test/a11y-trigger-has-button.js

@@ -17,6 +17,12 @@ ruleTester.run('a11y-trigger-has-button', rule, {
     { code: `import styled from 'styled-components'` },
     { code: `import styled, { css } from 'styled-components'` },
     { code: `import { css } from 'styled-components'` },
+    { code: `import { DropdownTrigger as HogeDropdownTrigger } from './hoge'` },
+    { code: `import { FugaDialogTrigger as HogeDialogTrigger } from './hoge'` },
+    { code: `import { AbcButton as HogeAbcButton } from './hoge'` },
+    { code: `import { AnchorButton as FugaAnchorButton } from './hoge'` },
+    { code: `import { HogeAnchor as HogeFugaAnchor } from './hoge'` },
+    { code: `import { FugaLink as HogeLink } from './hoge'` },
     { code: 'const HogeButton = styled.button``' },
     { code: 'const HogeAnchor = styled.a``' },
     { code: 'const HogeLink = styled.a``' },
@@ -33,6 +39,12 @@ ruleTester.run('a11y-trigger-has-button', rule, {
   ],
   invalid: [
     { code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
+    { code: `import { DropdownTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください` } ] },
+    { code: `import { DialogTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Button as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },
+    { code: `import { AbcAnchorButton as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` }, { message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Anchor as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください` } ] },
+    { code: `import { Link as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください` } ] },
     { code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください` } ] },