eslint-plugin-smarthr 0.3.15 → 0.3.16

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-smarthr",
-  "version": "0.3.15",
+  "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-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"' を設定してください` } ] },
+  ],
+});