eslint-plugin-smarthr 0.3.23 → 0.3.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/README.md +2 -1
- package/libs/format_styled_components.js +1 -2
- package/package.json +1 -1
- package/rules/a11y-heading-in-sectioning-content/README.md +6 -8
- package/rules/a11y-heading-in-sectioning-content/index.js +2 -1
- package/rules/a11y-input-has-name-attribute/index.js +1 -1
- package/rules/a11y-input-in-form-control/README.md +103 -0
- package/rules/a11y-input-in-form-control/index.js +441 -0
- package/rules/a11y-prohibit-useless-sectioning-fragment/README.md +60 -0
- package/rules/a11y-prohibit-useless-sectioning-fragment/index.js +74 -0
- package/test/a11y-anchor-has-href-attribute.js +7 -5
- package/test/a11y-clickable-element-has-text.js +26 -20
- package/test/a11y-heading-in-sectioning-content.js +37 -24
- package/test/a11y-image-has-alt-attribute.js +11 -8
- package/test/a11y-input-has-name-attribute.js +21 -12
- package/test/a11y-input-in-form-control.js +155 -0
- package/test/a11y-prohhibit-input-placeholder.js +19 -13
- package/test/a11y-prohibit-useless-sectioning-fragment.js +31 -0
- package/test/a11y-trigger-has-button.js +22 -15
- package/test/best-practice-for-remote-trigger-dialog.js +2 -2
|
@@ -49,22 +49,28 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
|
|
|
49
49
|
],
|
|
50
50
|
invalid: [
|
|
51
51
|
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
52
|
-
{ code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatch
|
|
53
|
-
|
|
54
|
-
{ code: `import {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
{ code:
|
|
58
|
-
|
|
59
|
-
{ code:
|
|
60
|
-
|
|
61
|
-
{ code:
|
|
62
|
-
|
|
52
|
+
{ code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatchする名称に変更してください。
|
|
53
|
+
- Inputが型の場合、'import type { Input as InputHoge }' もしくは 'import { type Input as InputHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
54
|
+
{ code: `import { SearchInput as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。
|
|
55
|
+
- SearchInputが型の場合、'import type { SearchInput as Hoge }' もしくは 'import { type SearchInput as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` }, { message: `Hogeを正規表現 "/SearchInput$/" がmatchする名称に変更してください。
|
|
56
|
+
- SearchInputが型の場合、'import type { SearchInput as Hoge }' もしくは 'import { type SearchInput as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
57
|
+
{ code: `import { HogeTextarea as HogeTextareaFuga } from './hoge'`, errors: [ { message: `HogeTextareaFugaを正規表現 "/Textarea$/" がmatchする名称に変更してください。
|
|
58
|
+
- HogeTextareaが型の場合、'import type { HogeTextarea as HogeTextareaFuga }' もしくは 'import { type HogeTextarea as HogeTextareaFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
59
|
+
{ code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください。
|
|
60
|
+
- HogeComboBoxが型の場合、'import type { HogeComboBox as ComboBoxFuga }' もしくは 'import { type HogeComboBox as ComboBoxFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
61
|
+
{ code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/DatePicker$/" がmatchする名称に変更してください。
|
|
62
|
+
- DatePickerが型の場合、'import type { DatePicker as HogeDatePickerFuga }' もしくは 'import { type DatePicker as HogeDatePickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
63
|
+
{ code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
|
|
64
|
+
{ code: 'const Hoge = styled(StyledInput)``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
|
|
65
|
+
{ code: 'const Hoge = styled.textarea``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください。` } ] },
|
|
66
|
+
{ code: 'const Hoge = styled(StyledTextarea)``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください。` } ] },
|
|
67
|
+
{ code: 'const Hoge = styled(FieldSet)``', errors: [ { message: `Hogeを正規表現 "/FieldSet$/" がmatchする名称に変更してください。` } ] },
|
|
68
|
+
{ code: 'const Hoge = styled(ComboBox)``', errors: [ { message: `Hogeを正規表現 "/ComboBox$/" がmatchする名称に変更してください。` } ] },
|
|
63
69
|
{
|
|
64
70
|
code: 'const Hoge = styled(SearchInput)``',
|
|
65
71
|
errors: [
|
|
66
|
-
{ message: `Hogeを正規表現 "/Input$/" がmatch
|
|
67
|
-
{ message: `Hogeを正規表現 "/SearchInput$/" がmatch
|
|
72
|
+
{ message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` },
|
|
73
|
+
{ message: `Hogeを正規表現 "/SearchInput$/" がmatchする名称に変更してください。` },
|
|
68
74
|
],
|
|
69
75
|
},
|
|
70
76
|
{ code: `<input placeholder />`, errors: [ { message: `input にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><input /><Hint>ヒント</Hint></div>')` } ] },
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
const rule = require('../rules/a11y-prohibit-useless-sectioning-fragment')
|
|
2
|
+
const RuleTester = require('eslint').RuleTester
|
|
3
|
+
|
|
4
|
+
const ruleTester = new RuleTester({
|
|
5
|
+
parserOptions: {
|
|
6
|
+
ecmaVersion: 2018,
|
|
7
|
+
ecmaFeatures: {
|
|
8
|
+
experimentalObjectRestSpread: true,
|
|
9
|
+
jsx: true,
|
|
10
|
+
},
|
|
11
|
+
sourceType: 'module',
|
|
12
|
+
},
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
const error = (tag) => `無意味なSectioningFragmentが記述されています。子要素である${tag}で問題なくセクションは設定されているため、このSectioningFragmentは削除してください`
|
|
16
|
+
|
|
17
|
+
ruleTester.run('a11y-prohibit-useless-sectioning-fragment', rule, {
|
|
18
|
+
valid: [
|
|
19
|
+
{ code: `<SectioningFragment>hoge</SectioningFragment>` },
|
|
20
|
+
{ code: `<Section><SectioningFragment>hoge</SectioningFragment></Section>` },
|
|
21
|
+
{ code: `<AnyAside><SectioningFragment>hoge</SectioningFragment></AnyAside>` },
|
|
22
|
+
{ code: `<AnyNav>hoge</AnyNav>` },
|
|
23
|
+
{ code: `<AnyArticle>hoge</AnyArticle>` },
|
|
24
|
+
],
|
|
25
|
+
invalid: [
|
|
26
|
+
{ code: `<SectioningFragment><AnySection /></SectioningFragment>`, errors: [ { message: error('<AnySection>') } ] },
|
|
27
|
+
{ code: `<SectioningFragment><AnyAside>hoge</AnyAside></SectioningFragment>`, errors: [ { message: error('<AnyAside>') } ] },
|
|
28
|
+
{ code: `<SectioningFragment><HogeStack as="aside">hoge</HogeStack></SectioningFragment>`, errors: [ { message: error('<HogeStack as="aside">') } ] },
|
|
29
|
+
{ code: `<SectioningFragment><HogeReel forwardedAs="nav">hoge</HogeReel></SectioningFragment>`, errors: [ { message: error('<HogeReel forwardedAs="nav">') } ] },
|
|
30
|
+
]
|
|
31
|
+
})
|
|
@@ -39,21 +39,28 @@ ruleTester.run('a11y-trigger-has-button', rule, {
|
|
|
39
39
|
],
|
|
40
40
|
invalid: [
|
|
41
41
|
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
42
|
-
{ code: `import { DropdownTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatch
|
|
43
|
-
|
|
44
|
-
{ code: `import {
|
|
45
|
-
|
|
46
|
-
{ code: `import {
|
|
47
|
-
|
|
48
|
-
{ code:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
{ code:
|
|
52
|
-
|
|
53
|
-
{ code:
|
|
54
|
-
|
|
55
|
-
{ code: 'const Hoge = styled
|
|
56
|
-
{ code: 'const Hoge = styled
|
|
42
|
+
{ code: `import { DropdownTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください。
|
|
43
|
+
- DropdownTriggerが型の場合、'import type { DropdownTrigger as Hoge }' もしくは 'import { type DropdownTrigger as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
44
|
+
{ code: `import { DialogTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください。
|
|
45
|
+
- DialogTriggerが型の場合、'import type { DialogTrigger as Hoge }' もしくは 'import { type DialogTrigger as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
46
|
+
{ code: `import { Button as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。
|
|
47
|
+
- Buttonが型の場合、'import type { Button as Hoge }' もしくは 'import { type Button as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
48
|
+
{ code: `import { AbcAnchorButton as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。
|
|
49
|
+
- AbcAnchorButtonが型の場合、'import type { AbcAnchorButton as Hoge }' もしくは 'import { type AbcAnchorButton as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` }, { message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください。
|
|
50
|
+
- AbcAnchorButtonが型の場合、'import type { AbcAnchorButton as Hoge }' もしくは 'import { type AbcAnchorButton as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
51
|
+
{ code: `import { Anchor as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。
|
|
52
|
+
- Anchorが型の場合、'import type { Anchor as Hoge }' もしくは 'import { type Anchor as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
53
|
+
{ code: `import { Link as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください。
|
|
54
|
+
- Linkが型の場合、'import type { Link as Hoge }' もしくは 'import { type Link as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
55
|
+
{ code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` } ] },
|
|
56
|
+
{ code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください。` } ] },
|
|
57
|
+
{ code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` } ] },
|
|
58
|
+
{ code: 'const Hoge = styled(AnchorButton)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` },{ message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください。` } ] },
|
|
59
|
+
{ code: 'const Hoge = styled(ButtonAnchor)``', errors: [ { message: `Hogeを正規表現 "/ButtonAnchor$/" がmatchする名称に変更してください。` }, { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。` } ] },
|
|
60
|
+
{ code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。` } ] },
|
|
61
|
+
{ code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください。` } ] },
|
|
62
|
+
{ code: 'const Hoge = styled(DropdownTrigger)``', errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください。` } ] },
|
|
63
|
+
{ code: 'const Hoge = styled(DialogTrigger)``', errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください。` } ] },
|
|
57
64
|
{ code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
|
|
58
65
|
{ code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
|
|
59
66
|
{ code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
|
|
@@ -24,8 +24,8 @@ ruleTester.run('best-practice-for-remote-trigger-dialog', rule, {
|
|
|
24
24
|
],
|
|
25
25
|
invalid: [
|
|
26
26
|
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
27
|
-
{ code: 'const Hoge = styled(RemoteDialogTrigger)``', errors: [ { message: 'Hogeを正規表現 "/RemoteDialogTrigger$/" がmatch
|
|
28
|
-
{ code: 'const Fuga = styled(RemoteTriggerActionDialog)``', errors: [ { message: 'Fugaを正規表現 "/RemoteTrigger(.+)Dialog$/" がmatch
|
|
27
|
+
{ code: 'const Hoge = styled(RemoteDialogTrigger)``', errors: [ { message: 'Hogeを正規表現 "/RemoteDialogTrigger$/" がmatchする名称に変更してください。' } ] },
|
|
28
|
+
{ code: 'const Fuga = styled(RemoteTriggerActionDialog)``', errors: [ { message: 'Fugaを正規表現 "/RemoteTrigger(.+)Dialog$/" がmatchする名称に変更してください。' } ] },
|
|
29
29
|
{ code: '<RemoteDialogTrigger targetId={hoge}>open.</RemoteDialogTrigger>', errors: [ { message: `RemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
|
|
30
30
|
- 変数などは利用できません（これは関連するTriggerとDialogを検索しやすくするためです）
|
|
31
31
|
- RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
|