eslint-plugin-smarthr - npm Package Compare versions

Comparing version 0.3.16 to 0.3.17

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+### [0.3.17](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.16...v0.3.17) (2023-12-30)
+
+
+### Bug Fixes
+
+* a11y-delegate-element-has-role-presentationのインタラクティブなコンポーネントであることの判定で、小文字始まりのコンポーネントの場合判定ミスされるバグを修正 ([#94](https://github.com/kufu/eslint-plugin-smarthr/issues/94)) ([50a8296](https://github.com/kufu/eslint-plugin-smarthr/commit/50a8296b6d22c5a6475469b1ed2ea1a46234f6fd))
+
 ### [0.3.16](https://github.com/kufu/eslint-plugin-smarthr/compare/v0.3.15...v0.3.16) (2023-12-30)
@@ -7,0 +14,0 @@

package.json

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

README.md

@@ -5,2 +5,3 @@ # eslint-plugin-smarthr
 - [a11y-clickable-element-has-text](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-clickable-element-has-text)
+- [a11y-delegate-element-has-role-presentation](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-delegate-element-has-role-presentation)
 - [a11y-heading-in-sectioning-content](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-heading-in-sectioning-content)
@@ -7,0 +8,0 @@ - [a11y-image-has-alt-attribute](https://github.com/kufu/eslint-plugin-smarthr/tree/main/rules/a11y-image-has-alt-attribute)

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

@@ -35,3 +35,3 @@ const { generateTagFormatter } = require('../../libs/format_styled_components');
 
-const INTERACTIVE_COMPONENT_NAMES = Object.values(EXPECTED_NAMES)
+const INTERACTIVE_COMPONENT_NAMES = Object.keys(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)$/
@@ -44,3 +44,3 @@
  - 方法1:  ${nodeName}がinput、buttonやaなどのインタラクティブな要素の場合、コンポーネント名の末尾をインタラクティブなコンポーネントであることがわかる名称に変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchする名称に変更してください
+   - "${interactiveComponentRegex}" の正規表現にmatchするコンポーネントに差し替える、もしくは名称を変更してください
  - 方法2: インタラクティブな親要素、もしくは子要素が存在する場合、直接${onAttrsText}を設定することを検討してください
@@ -52,3 +52,3 @@ - 方法3: インタラクティブな親要素、もしくは子要素が存在しない場合、インタラクティブな要素を必ず持つようにマークアップを修正後、${onAttrsText}の設定要素を検討してください
  - 方法1: 子要素にインタラクティブな要素が存在するにも関わらずこのエラーが表示されている場合、子要素の名称を変更してください
-   - "${interactiveComponentRegex}" の正規表現にmatchするよう、インタラクティブな子要素全ての名称を変更してください
+   - "${interactiveComponentRegex}" の正規表現にmatchするよう、インタラクティブな子要素全てを差し替える、もしくは名称を変更してください
  - 方法2: ${nodeName}自体がインタラクティブな要素の場合、'role="presentation"'を削除した上で名称を変更してください
@@ -55,0 +55,0 @@ - "${interactiveComponentRegex}" の正規表現にmatchするよう、${nodeName}の名称を変更してください

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

@@ -15,2 +15,23 @@ const rule = require('../rules/a11y-delegate-element-has-role-presentation');
 
+const defaultInteractiveRegex = '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|FieldSet$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$)/'
+const messageNonInteractiveEventHandler = (nodeName, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => {
+  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, onAttrs, interactiveComponentRegex = defaultInteractiveRegex) => `${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 = defaultInteractiveRegex) => `${nodeName}はinput、buttonやaなどのインタラクティブな要素にもかかわらず 'role="presentation"' が設定されているため、ブラウザが正しく解釈が行えず、ユーザーが利用することが出来ない場合があるため、以下のいずれかの対応をおこなってください。
+ - 方法1: 'role="presentation"' を削除してください
+ - 方法2: ${nodeName}の名称を "${interactiveComponentRegex}" とマッチしない名称に変更してください`
+
 ruleTester.run('smarthr/a11y-delegate-element-has-role-presentation', rule, {
@@ -23,2 +44,3 @@ valid: [
     { code: '<div onClick={any} role="presentation"><Link /></div>' },
+    { code: '<div onClick={any} role="presentation"><button /></div>' },
     { code: '<Wrapper onClick={any} role="presentation"><Link /></Wrapper>' },
@@ -29,45 +51,12 @@ { code: '<Wrapper onClick={any} role="presentation"><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }] },
   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"' を設定してください` } ] },
+    { code: '<Input role="presentation" />', errors: [ { message: messageInteractiveHasRolePresentation('Input') } ] },
+    { code: '<HogeForm role="presentation">any</HogeForm>', errors: [ { message: messageInteractiveHasRolePresentation('HogeForm') } ] },
+    { code: '<FugaButton role="presentation">any</FugaButton>', errors: [ { message: messageInteractiveHasRolePresentation('FugaButton') } ] },
+    { code: '<Link role="presentation" />', errors: [ { message: messageInteractiveHasRolePresentation('Link') } ] },
+    { code: '<div onClick={any} onSubmit={any2} role="presentation"><Hoge /></div>', errors: [ { message: messageRolePresentationNotHasInteractive('div', ['onClick', 'onSubmit']) } ] },
+    { code: '<div onClick={any}><Link /></div>', errors: [ { message: messageNonInteractiveEventHandler('div', ['onClick']) } ] },
+    { code: '<Wrapper onClick={any}><Link /></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick']) } ] },
+    { code: '<Wrapper onSubmit={any}><Hoge /></Wrapper>', options: [{ additionalInteractiveComponentRegex: ['^Hoge$'] }], errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onSubmit'], '/((i|I)nput$|(t|T)extarea$|(s|S)elect$|InputFile$|RadioButtonPanel$|Check(b|B)ox$|Combo(b|B)ox$|DatePicker$|DropZone$|FieldSet$|(b|B)utton$|Anchor$|Link$|TabItem$|^a$|(f|F)orm$|ActionDialogWithTrigger$|RemoteDialogTrigger$|RemoteTrigger(.+)Dialog$|Pagination$|SideNav$|AccordionPanel$|^Hoge$)/') } ] },
+    { code: '<Wrapper onClick={any} onChange={anyany}><any><Link /></any></Wrapper>', errors: [ { message: messageNonInteractiveEventHandler('Wrapper', ['onClick', 'onChange']) } ] },
   ],
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

27

increased by3.85%

Worsened metrics

Total package byte prevSize

259317

decreased by-1.87%

Lines of code

4314

decreased by-0.64%

No dependency changes