eslint-plugin-smarthr 4.0.2 → 6.0.0

package/rules/best-practice-for-interactive-element/README.md

@@ -0,0 +1,178 @@
+# smarthr/best-practice-for-interactive-element
+
+インタラクティブな要素・コンポーネントの利用方法のベストプラクティスを定義するルールです。<br />
+以下の内容をチェックします
+
+- インタラクティブな要素にrole属性が設定されている場合エラーとします
+- インタラクティブではないコンポーネントに対して、デフォルトで用意されているonXxx形式の属性を設定しようとするとエラーにします
+  - 例: `CrewDetail` コンポーネントに `onChange` を設定するとエラー、 `onChangeName` ならOK
+
+## インタラクティブな要素・コンポーネントとは何か
+
+ユーザーが操作・やり取りが可能な要素を指します。<br />
+このルールに置いてはHTMLとしての要素以外にsmarthr-uiにおけるコンポーネントも含めます。
+
+### 具体的な要素・コンポーネントの一覧
+
+下記要素・コンポーネント名と一致、もしくはsuffixがコンポーネント名として指定されている場合、その要素はインタラクティブな要素として扱われます。<br />
+また複数形(末尾にsを設定するなど)の場合も同様に扱われます。
+
+#### HTMLの対象要素
+
+- a
+- button
+- details
+- dialog
+- fieldset
+- form
+- input
+- legend
+- select(option)
+- summary
+- textarea
+
+#### smarthr-uiの対象要素
+
+- AccordionPanel
+- Anchor
+- Checkbox
+- Date
+- DatetimeLocal
+- Dialog
+- DropZone
+- FormControl
+- InputFile
+- Link
+- MonthPicker
+- RadioButton
+- RadioButtonPanel
+- RemoteDialogTrigger
+- SegmentedControl
+- SideNav
+- Switch
+- TabItem
+- TimePicker
+- WarekiPicker
+
+## チェックする内容について
+
+### なぜrole属性を設定するべきではないのか
+
+role属性はhtmlの要素の意味(role)を変更するための属性です。<br />
+すべてのhtmlの要素はデフォルトの属性を持っており、**基本的にrole属性を利用することは推奨されません**。<br />
+不用意に利用した場合、ブラウザが適切な解釈を行うことが出来ず、必要な機能が有効にならない、などの問題が発生する可能性があります。<br />
+特に`role="presentation"`は **設定した要素は見た目やJSで利用するためのもので意味づけはない** という設定になるため大変強力な設定になります。
+
+以上の理由からこのルールは **特に問題が起きやすい、インタラクティブな要素に対して`role`属性を使っていたら忠告する**ことを目的としたものになっています。
+
+```jsx
+// button要素にrole="presentation"で意味付けを消してしまっていて大変危険なのでNG
+<button role="presentation">...</button>
+```
+
+additionalInteractiveComponentRegexオプションに独自コンポーネントの名称を正規表現で設定することで、インタラクティブな要素として判定することも可能です。
+
+```jsx
+// additionalInteractiveComponentRegex: ['^InteractiveComponent%']
+// インタラクティブなコンポーネントとして扱われるものに対してrole="presentation"を指定しており危険なのでNG
+<InteractiveComponent role="presentation">...</InteractiveComponent>
+```
+
+### なぜインタラクティブではないコンポーネントに対してデフォルトのonXxx形式の属性を設定するべきではないのか
+
+例として前述の `CrewDetail` を使って説明します。
+
+```jsx
+<CrewDetail onChange={onChange} />
+```
+
+上記例の場合、**CrewDetailの何が変更された場合利用される属性なのか？** がわかりません。<br />
+`CrewDetail` という名称から **従業員詳細の何かが変わった場合** に利用されることは予測出来ますが、不明瞭です。<br />
+おそらく入力要素ではないか？ということは予想できるかもしれませんが、例えばURLやDBに保存されている値の変更などの可能性もありえます。<br />
+そのため**どんな用途で利用されるものか**を明確にした名称にすることを推奨しています。
+
+```jsx
+<CrewDetail onChangeName={onChange} />
+```
+
+逆にインタラクティブな要素・コンポーネントはそれ自体にイベントハンドラを設定する場合が多いため問題なくonXxx形式の属性を設定出来ます。
+
+```jsx
+<XxxInput onChange={onChange} />
+```
+
+このチェックはインタラクティブではないコンポーネントのみが対象のため、以下は対象外です。
+
+- インタラクティブ・非インタラクティブを問わずすべての要素(a, divなどすべての要素)
+- インタラクティブなコンポーネント(InputやXxxFormControlなどのコンポーネント)
+
+対象となる属性は以下になります。
+
+- onChange
+- onInput
+- onFocus
+- onBlur
+- onClick
+- onDoubleClick
+- onKeyDown
+- onKeyUp
+- onKeyPress
+- onMouseEnter
+- onMouseOver
+- onMouseDown
+- onMouseUp
+- onMouseLeave
+- onSelect
+- onSubmit
+
+
+## rules
+
+```js
+{
+  rules: {
+    'smarthr/best-practice-for-interactive-element': 'error', // 'warn', 'off'
+  },
+}
+```
+
+## ❌ Incorrect
+
+```jsx
+// button要素にrole="presentation"で意味付けを消してしまっていて大変危険なのでNG
+<button role="presentation">...</button>
+```
+
+```jsx
+// additionalInteractiveComponentRegex: ['^InteractiveComponent%']
+// インタラクティブなコンポーネントとして扱われるものに対してrole="presentation"を指定しており危険なのでNG
+<InteractiveComponent role="presentation">...</InteractiveComponent>
+```
+
+```jsx
+// 非インタラクティブなコンポーネントと推測されるものにonXxxx形式のデフォルトに存在する属性を設定しているためNG
+<CrewDetail onChange={onChange} />
+```
+
+## ✅ Correct
+
+```jsx
+// role属性を設定していないのでOK
+<button>...</button>
+```
+
+```jsx
+// additionalInteractiveComponentRegex: ['^InteractiveComponent%']
+// インタラクティブなコンポーネントとして扱われるものに対してroleを指定していないのでOK
+<InteractiveComponent any={hoge}>...</InteractiveComponent>
+```
+
+```jsx
+// 非インタラクティブなコンポーネントと推測されるものにonXxxx形式のデフォルト属性ではない名前のイベントハンドラを設定しているのでOK
+<CrewDetail onChangeName={onChange} />
+```
+
+```jsx
+// インタラクティブな要素なのでonXxx形式のデフォルト属性を設定してもOK
+<XxxInput onChange={onChange} />
+```

package/rules/best-practice-for-interactive-element/index.js

@@ -0,0 +1,82 @@
+const INTERACTIVE_COMPONENT_NAMES = `(${[
+  '(ActionDialogWith|RemoteDialog)Trigger(s)?',
+  '(B|b)utton(s)?',
+  '(Check|Combo)(B|b)ox(es|s)?',
+  '(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?',
+  '(F|f)orm(Control|Group|Dialog)?(s)?',
+  '(I|i)nput(File)?(s)?',
+  '(L|l)egend(s)$',
+  '(S|s)elect(s)?',
+  '(T|t)extarea(s)?',
+  'AccordionPanel(s)?',
+  'Anchor',
+  'DropZone(s)?',
+  'Field(S|s)et(s)?',
+  'FilterDropdown(s)?',
+  'Link(s)?',
+  'Pagination(s)?',
+  'RadioButton(Panel)?(s)?',
+  'RemoteTrigger(.+)Dialog(s)?',
+  'RightFixedNote(s)?',
+  'SegmentedControl(s)?',
+  'SideNav(s)?',
+  'Switch(s)?',
+  'TabItem(s)?',
+  '^a',
+  '^details',
+  '^dialog',
+  '^option',
+  '^summary',
+].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 SCHEMA = [
+  {
+    type: 'object',
+    properties: {
+      additionalInteractiveComponentRegex: { type: 'array', items: { type: 'string' } },
+    },
+    additionalProperties: false,
+  }
+]
+
+/**
+ * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
+ */
+module.exports = {
+  meta: {
+    type: 'problem',
+    schema: SCHEMA,
+  },
+  create(context) {
+    const options = context.options[0]
+    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
+
+    const interactiveAction = (node) => {
+      context.report({
+        node,
+        message: `${node.name.name}にrole属性は指定しないでください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element`,
+      });
+    }
+
+    return {
+      [`JSXOpeningElement[name.name=${interactiveComponentRegex}]:has(JSXAttribute[name.name="role"])`]: interactiveAction,
+      'JSXOpeningElement:has(JSXAttribute[name.name=/^(as|forwardedAs)$/][value.value=/^f(orm|ieldset)$/]):has(JSXAttribute[name.name="role"])': interactiveAction,
+      [`JSXOpeningElement:not([name.name=${interactiveComponentRegex}]):has(JSXAttribute[name.name=${INTERACTIVE_ON_REGEX}])`]: (node) => {
+        context.report({
+          node,
+          message: `${node.name.name}にデフォルトで用意されているonXxx形式の属性は設定しないでください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element
+ - 対応方法1: 対象の属性がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
+   - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
+   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
+ - 対応方法2: 対象の属性が設定されているコンポーネントがインタラクティブなコンポーネントの場合、名称を調整してください
+   - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに変更、もしくは名称を調整してください
+ - 対応方法3: インタラクティブな親要素、もしくは子要素が存在する場合、onXxx属性を移動して設定することを検討してください`,
+        });
+      }
+    };
+  },
+};
+module.exports.schema = SCHEMA;

package/rules/best-practice-for-spread-syntax/README.md

@@ -7,7 +7,7 @@
 
 # spread syntax を通常の属性より後に記述した場合に発生する問題
 
-spread syntaxより先に通常の属性を記述した場合、** spread syntaxで値が上書きされる ** 可能性があります。
+spread syntaxより先に通常の属性を記述した場合、**spread syntaxで値が上書きされる** 可能性があります。
 
 ```jsx
 const AnyComponent = (props: Props) => {
@@ -16,10 +16,10 @@ const AnyComponent = (props: Props) => {
 }
 ```
 
-上記例の場合、** Props型がidを含むか? 含む場合必須か？などの確認 ** が必要になります。
-(idが必須の場合、Fugaにベタ書きしているidがそもそも不要になるため)
-また`idのデフォルト値が"ABC", propsでidが指定された場合そちらを優先` というロジックが必要かどうかを該当コードの部分だけで判断出来ず、広範囲の確認が必要になりがちです。
-特にidなど多用され、HTMLの要素が持つ属性と名前が被っている場合、意図せず上書きされてしまう問題が発生する可能性が高く危険です。
+上記例の場合、**Props型がidを含むか? 含む場合必須か？などの確認** が必要になります。  
+(idが必須の場合、Fugaにベタ書きしているidがそもそも不要になるため)  
+また`idのデフォルト値が"ABC", propsでidが指定された場合そちらを優先` というロジックが必要かどうかを該当コードの部分だけで判断出来ず、広範囲の確認が必要になりがちです。  
+特にidなど多用され、HTMLの要素が持つ属性と名前が被っている場合、意図せず上書きされてしまう問題が発生する可能性が高く危険です。  
 そのため下記の様に記述することを推奨します。
 
 ```jsx

package/test/best-practice-for-interactive-element.js

@@ -0,0 +1,71 @@
+const rule = require('../rules/best-practice-for-interactive-element')
+const RuleTester = require('eslint').RuleTester
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+})
+
+const INTERACTIVE_COMPONENT_NAMES = `(${[
+  '(ActionDialogWith|RemoteDialog)Trigger(s)?',
+  '(B|b)utton(s)?',
+  '(Check|Combo)(B|b)ox(es|s)?',
+  '(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?',
+  '(F|f)orm(Control|Group|Dialog)?(s)?',
+  '(I|i)nput(File)?(s)?',
+  '(L|l)egend(s)$',
+  '(S|s)elect(s)?',
+  '(T|t)extarea(s)?',
+  'AccordionPanel(s)?',
+  'Anchor',
+  'DropZone(s)?',
+  'Field(S|s)et(s)?',
+  'FilterDropdown(s)?',
+  'Link(s)?',
+  'Pagination(s)?',
+  'RadioButton(Panel)?(s)?',
+  'RemoteTrigger(.+)Dialog(s)?',
+  'RightFixedNote(s)?',
+  'SegmentedControl(s)?',
+  'SideNav(s)?',
+  'Switch(s)?',
+  'TabItem(s)?',
+  '^a',
+  '^details',
+  '^dialog',
+  '^option',
+  '^summary',
+].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 interactiveError = (name) => `${name}にrole属性は指定しないでください。
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element`
+const uninteractiveError = (name) => `${name}にデフォルトで用意されているonXxx形式の属性は設定しないでください
+ - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/best-practice-for-interactive-element
+ - 対応方法1: 対象の属性がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
+   - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
+   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
+ - 対応方法2: 対象の属性が設定されているコンポーネントがインタラクティブなコンポーネントの場合、名称を調整してください
+   - "${new RegExp(`(${INTERACTIVE_COMPONENT_NAMES})`)}" の正規表現にmatchするコンポーネントに変更、もしくは名称を調整してください
+ - 対応方法3: インタラクティブな親要素、もしくは子要素が存在する場合、onXxx属性を移動して設定することを検討してください`
+
+ruleTester.run('best-practice-for-interactive-element', rule, {
+  valid: [
+    { code: `<button>...</button>` },
+    { code: `<InteractiveComponent>...</InteractiveComponent>`, options: [{ additionalInteractiveComponentRegex: ['^InteractiveComponent%'] }] },
+    { code: `<CrewDetail onChangeName={onChange} />` },
+  ],
+  invalid: [
+    { code: `<button role="presentation">...</button>`, errors: [{ message: interactiveError('button') }] },
+    { code: `<Hoge as="form" role="menu" />`, errors: [{ message: interactiveError('Hoge') }] },
+    { code: `<FormControl role="menu" />`, errors: [{ message: interactiveError('FormControl') }] },
+    { code: `<InteractiveComponent role="group">...</InteractiveComponent>`, options: [{ additionalInteractiveComponentRegex: ['^Interactive'] }], errors: [{ message: interactiveError('InteractiveComponent') }] },
+    { code: `<CrewDetail onChange={onChange} />`, errors: [{ message: uninteractiveError('CrewDetail') }] },
+  ]
+})
+

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

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

@@ -1,225 +0,0 @@
-const INTERACTIVE_COMPONENT_NAMES = `(${[
-  '(B|b)utton(s)?',
-  '(Check|Combo)(B|b)ox(es|s)?',
-  '(Date(timeLocal)?|Time|Month|Wareki)Picker(s)?',
-  '(I|i)nput(File)?(s)?',
-  '(S|s)elect(s)?',
-  '(T|t)extarea(s)?',
-  '(ActionDialogWith|RemoteDialog)Trigger(s)?',
-  'AccordionPanel(s)?',
-  '^a',
-  'Anchor',
-  'Link(s)?',
-  'DropZone(s)?',
-  'Field(S|s)et(s)?',
-  'FilterDropdown(s)?',
-  '(F|f)orm(Control|Group|Dialog)?(s)?',
-  'Pagination(s)?',
-  'RadioButton(Panel)?(s)?',
-  'RemoteTrigger(.+)Dialog(s)?',
-  'RightFixedNote(s)?',
-  'SegmentedControl(s)?',
-  'SideNav(s)?',
-  'Switch(s)?',
-  'TabItem(s)?',
-].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 AS_REGEX = /^(as|forwardedAs)$/
-const AS_VALUE_REGEX = /^(form|fieldset)$/
-
-const messageNonInteractiveEventHandler = (nodeName, interactiveComponentRegex, onAttrs) => {
-  const onAttrsText = onAttrs.join(', ')
-
-  return `${nodeName} に${onAttrsText}を設定するとブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation
- - 方法1:  ${nodeName}がinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
- - 方法2: ${onAttrsText} がコンポーネント内の特定のインタラクティブな要素に設定される場合、名称を具体的なものに変更してください
-   - 属性名を"${INTERACTIVE_ON_REGEX}"に一致しないものに変更してください
-   - 例: 対象コンポーネント内に '追加ボタン' が存在する場合、'onClick' という属性名を 'onClickAddButton' に変更する
- - 方法3: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
- - 方法4: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
- - 方法5: インタラクティブな子要素から発生したイベントをキャッチすることが目的で${onAttrsText}を設定している場合、'role="presentation"' を設定してください
-   - 'role="presentation"' を設定した要素はマークアップとしての意味がなくなるため、div・span などマークアップとしての意味を持たない要素に設定してください
-   - 'role="presentation"' を設定する適切な要素が存在しない場合、div、またはspanでイベントが発生する要素を囲んだ上でrole属性を設定してください`
-}
-const messageRolePresentationNotHasInteractive = (nodeName, interactiveComponentRegex, onAttrs, roleMean) => `${nodeName}に 'role="${roleMean}"' が設定されているにも関わらず、子要素にinput、buttonやaなどのインタラクティブな要素が見つからないため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
- - 詳細: https://github.com/kufu/tamatebako/tree/master/packages/eslint-plugin-smarthr/rules/a11y-delegate-element-has-role-presentation
- - 方法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,
-  }
-]
-
-/**
- * @type {import('@typescript-eslint/utils').TSESLint.RuleModule<''>}
- */
-module.exports = {
-  meta: {
-    type: 'problem',
-    schema: SCHEMA,
-  },
-  create(context) {
-    const options = context.options[0]
-    const interactiveComponentRegex = new RegExp(`(${INTERACTIVE_COMPONENT_NAMES}${options?.additionalInteractiveComponentRegex ? `|${options.additionalInteractiveComponentRegex.join('|')}` : ''})`)
-    const findInteractiveNode = (ec) => ec && INTERACTIVE_NODE_TYPE_REGEX.test(ec.type) && isHasInteractive(ec)
-    const isHasInteractive = (c) => {
-      switch (c.type) {
-        case 'JSXElement': {
-          const name = c.openingElement.name.name
-
-          if (name && interactiveComponentRegex.test(name)) {
-            return true
-          } else if (c.children.length > 0) {
-            return !!c.children.find(isHasInteractive)
-          }
-        }
-        case 'JSXExpressionContainer':
-        case 'ConditionalExpression': {
-          let e = c
-
-          if (c.expression) {
-            e = c.expression
-          }
-
-          return !![e.right, e.consequent, e.alternate].find(findInteractiveNode)
-        }
-      }
-
-      return false
-    }
-
-    return {
-      JSXOpeningElement: (node) => {
-        const nodeName = node.name.name || '';
-
-        let onAttrs = []
-        let roleMean = undefined
-        let isRolePresentation = false
-        let isAsInteractive = false
-
-        node.attributes.forEach((a) => {
-          const aName = a.name?.name || ''
-
-          if (INTERACTIVE_ON_REGEX.test(aName)) {
-            onAttrs.push(aName)
-          } else if (AS_REGEX.test(aName) && AS_VALUE_REGEX.test(a.value?.value || '')) {
-            isAsInteractive = true
-          } else if (aName === 'role') {
-            const v = a.value?.value || ''
-
-            if (v === 'presentation') {
-              isRolePresentation = true
-              roleMean = v
-            } else if (MEANED_ROLE_REGEX.test(v)) {
-              roleMean = v
-            }
-          }
-        })
-
-        if (isAsInteractive || interactiveComponentRegex.test(nodeName)) {
-          if (isRolePresentation) {
-            context.report({
-              node,
-              message: messageInteractiveHasRolePresentation(nodeName, interactiveComponentRegex)
-            })
-          }
-        } else if (onAttrs.length > 0) {
-          // HINT: role="presentation"以外で意味があるroleが設定されている場合はエラーにしない
-          // 基本的にsmarthr-uiでroleの設定などは巻き取る &&　そもそもroleを設定するよりタグを適切にマークアップすることが優先されるため
-          // エラーなどには表示しない
-          if (!roleMean) {
-            context.report({
-              node,
-              message: messageNonInteractiveEventHandler(nodeName, interactiveComponentRegex, onAttrs),
-            });
-          // HINT: role='slider' はインタラクティブな要素扱いとするため除外する
-          } else if (roleMean !== 'slider') {
-            const searchChildren = (n) => {
-              switch (n.type) {
-                case 'BinaryExpression':
-                case 'Identifier':
-                case 'JSXEmptyExpression':
-                case 'JSXText':
-                case 'Literal':
-                case 'VariableDeclaration':
-                  // これ以上childrenが存在しないため終了
-                  return false
-                case 'JSXAttribute':
-                  return n.value ? searchChildren(n.value) : false
-                case 'LogicalExpression':
-                  return searchChildren(n.right)
-                case 'ArrowFunctionExpression':
-                  return searchChildren(n.body)
-                case 'MemberExpression':
-                  return searchChildren(n.property)
-                case 'ReturnStatement':
-                case 'UnaryExpression':
-                  return searchChildren(n.argument)
-                case 'ChainExpression':
-                case 'JSXExpressionContainer':
-                  return searchChildren(n.expression)
-                case 'BlockStatement':
-                  return forInSearchChildren(n.body)
-                case 'ConditionalExpression':
-                  return searchChildren(n.consequent) || searchChildren(n.alternate)
-                case 'CallExpression': {
-                  return forInSearchChildren(n.arguments)
-                }
-                case 'JSXFragment':
-                  break
-                case 'JSXElement': {
-                  const name = n.openingElement.name.name || ''
-
-                  if (
-                    interactiveComponentRegex.test(name) ||
-                    forInSearchChildren(n.openingElement.attributes)
-                  ) {
-                    return true
-                  }
-
-                  break
-                }
-              }
-
-              return n.children ? forInSearchChildren(n.children) : false
-            }
-
-            const forInSearchChildren = (ary) => {
-              for (const i in ary) {
-                if (searchChildren(ary[i])) {
-                  return true
-                }
-              }
-
-              return false
-            }
-
-            if (!forInSearchChildren(node.parent.children)) {
-              context.report({
-                node,
-                message: messageRolePresentationNotHasInteractive(nodeName, interactiveComponentRegex, onAttrs, roleMean)
-              })
-            }
-          }
-        }
-      },
-    };
-  },
-};
-module.exports.schema = SCHEMA;