eslint-plugin-smarthr 1.4.1 → 1.5.0
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 +14 -0
- package/libs/common_domain.js +5 -8
- package/libs/util.js +4 -0
- package/package.json +4 -4
- package/rules/a11y-anchor-has-href-attribute/index.js +31 -20
- package/rules/a11y-clickable-element-has-text/index.js +4 -25
- package/rules/a11y-delegate-element-has-role-presentation/index.js +34 -55
- package/rules/a11y-form-control-in-form/index.js +5 -31
- package/rules/a11y-heading-in-sectioning-content/index.js +7 -63
- package/rules/a11y-image-has-alt-attribute/index.js +0 -16
- package/rules/a11y-input-has-name-attribute/index.js +15 -33
- package/rules/a11y-input-in-form-control/README.md +5 -5
- package/rules/a11y-input-in-form-control/index.js +30 -76
- package/rules/a11y-numbered-text-within-ol/index.js +2 -11
- package/rules/a11y-prohibit-input-maxlength-attribute/index.js +8 -20
- package/rules/a11y-prohibit-input-placeholder/index.js +41 -57
- package/rules/a11y-prohibit-sectioning-content-in-form/index.js +5 -37
- package/rules/a11y-prohibit-useless-sectioning-fragment/index.js +5 -23
- package/rules/a11y-required-layout-as-attribute/index.js +0 -25
- package/rules/a11y-trigger-has-button/index.js +10 -18
- package/rules/best-practice-for-data-test-attribute/index.js +3 -6
- package/rules/best-practice-for-layouts/index.js +2 -16
- package/rules/best-practice-for-remote-trigger-dialog/index.js +3 -11
- package/rules/best-practice-for-tailwind-prohibit-root-margin/index.js +38 -30
- package/rules/best-practice-for-tailwind-variants/index.js +10 -18
- package/rules/component-name/README.md +44 -0
- package/rules/component-name/index.js +139 -0
- package/rules/design-system-guideline-prohibit-double-icons/index.js +1 -11
- package/rules/format-import-path/index.js +14 -6
- package/rules/format-translate-component/index.js +3 -1
- package/rules/no-import-other-domain/index.js +8 -8
- package/rules/prohibit-file-name/index.js +1 -1
- package/rules/prohibit-import/index.js +21 -23
- package/rules/prohibit-path-within-template-literal/index.js +1 -1
- package/rules/require-barrel-import/index.js +6 -8
- package/rules/require-declaration/index.js +5 -3
- package/rules/require-export/index.js +34 -30
- package/rules/require-import/index.js +10 -10
- package/rules/trim-props/index.js +9 -8
- package/test/a11y-anchor-has-href-attribute.js +0 -29
- package/test/a11y-clickable-element-has-text.js +0 -66
- package/test/{a11y-delegate-element-has-role-presantation.js → a11y-delegate-element-has-role-presentation.js} +3 -2
- package/test/a11y-form-control-in-form.js +1 -1
- package/test/a11y-heading-in-sectioning-content.js +0 -82
- package/test/a11y-image-has-alt-attribute.js +0 -45
- package/test/a11y-input-has-name-attribute.js +0 -44
- package/test/a11y-input-in-form-control.js +11 -35
- package/test/a11y-prohhibit-input-placeholder.js +0 -45
- package/test/a11y-trigger-has-button.js +0 -42
- package/test/best-practice-for-remote-trigger-dialog.js +0 -6
- package/test/component-name.js +247 -0
- package/test/prohibit-import.js +13 -13
|
@@ -26,31 +26,6 @@ const notHaveHeadingMessage = (elementName) => `${elementName} はHeading要素
|
|
|
26
26
|
|
|
27
27
|
ruleTester.run('a11y-heading-in-sectioning-content', rule, {
|
|
28
28
|
valid: [
|
|
29
|
-
{ code: `import styled from 'styled-components'` },
|
|
30
|
-
{ code: `import { PageHeading as HogePageHeading } from './hoge'` },
|
|
31
|
-
{ code: `import { HogeHeading as FugaHeading } from './hoge'` },
|
|
32
|
-
{ code: `import { HogeArticle as FugaArticle } from './hoge'` },
|
|
33
|
-
{ code: `import { HogeAside as FugaAside } from './hoge'` },
|
|
34
|
-
{ code: `import { HogeNav as FugaNav } from './hoge'` },
|
|
35
|
-
{ code: `import { HogeSection as FugaSection } from './hoge'` },
|
|
36
|
-
{ code: `import { ModelessDialog as FugaModelessDialog } from './hoge'` },
|
|
37
|
-
{ code: 'const HogePageHeading = styled.h1``' },
|
|
38
|
-
{ code: 'const HogeHeading = styled.h2``' },
|
|
39
|
-
{ code: 'const HogeHeading = styled.h3``' },
|
|
40
|
-
{ code: 'const HogeHeading = styled.h4``' },
|
|
41
|
-
{ code: 'const HogeHeading = styled.h5``' },
|
|
42
|
-
{ code: 'const HogeHeading = styled.h6``' },
|
|
43
|
-
{ code: 'const FugaHeading = styled(Heading)``' },
|
|
44
|
-
{ code: 'const FugaHeading = styled(HogeHeading)``' },
|
|
45
|
-
{ code: 'const FugaArticle = styled(HogeArticle)``' },
|
|
46
|
-
{ code: 'const FugaAside = styled(HogeAside)``' },
|
|
47
|
-
{ code: 'const FugaNav = styled(HogeNav)``' },
|
|
48
|
-
{ code: 'const FugaSection = styled(HogeSection)``' },
|
|
49
|
-
{ code: "const FugaHeading = styled(Heading).attrs(() => ({ type: 'blockTitle' }))``" },
|
|
50
|
-
{ code: 'const FugaCenter = styled(HogeCenter)``' },
|
|
51
|
-
{ code: 'const FugaReel = styled(HogeReel)``' },
|
|
52
|
-
{ code: 'const FugaSidebar = styled(HogeSidebar)``' },
|
|
53
|
-
{ code: 'const FugaStack = styled(HogeStack)``' },
|
|
54
29
|
{ code: '<PageHeading>hoge</PageHeading>' },
|
|
55
30
|
{ code: '<Section><Heading>hoge</Heading></Section>' },
|
|
56
31
|
{ code: '<FugaSection heading={<Heading>hoge</Heading>}>abc</FugaSection>' },
|
|
@@ -75,67 +50,10 @@ ruleTester.run('a11y-heading-in-sectioning-content', rule, {
|
|
|
75
50
|
{ code: '<HogeBaseColumn forwardedAs="nav"><Heading>hoge</Heading></HogeBaseColumn>' },
|
|
76
51
|
],
|
|
77
52
|
invalid: [
|
|
78
|
-
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
79
|
-
{ code: `import { HogePageHeading as PageHeadingAbc } from './hoge'`, errors: [ { message: `PageHeadingAbcを正規表現 "/PageHeading$/" がmatchする名称に変更してください。
|
|
80
|
-
- HogePageHeadingが型の場合、'import type { HogePageHeading as PageHeadingAbc }' もしくは 'import { type HogePageHeading as PageHeadingAbc }' のように明示的に型であることを宣言してください。名称変更が不要になります` }, { message: `PageHeadingAbcを正規表現 "/Heading$/" がmatchする名称に変更してください。
|
|
81
|
-
- HogePageHeadingが型の場合、'import type { HogePageHeading as PageHeadingAbc }' もしくは 'import { type HogePageHeading as PageHeadingAbc }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
82
|
-
{ code: `import { Heading as HeadingHoge } from './hoge'`, errors: [ { message: `HeadingHogeを正規表現 "/Heading$/" がmatchする名称に変更してください。
|
|
83
|
-
- Headingが型の場合、'import type { Heading as HeadingHoge }' もしくは 'import { type Heading as HeadingHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
84
|
-
{ code: `import { HogeArticle as HogeArticleFuga } from './hoge'`, errors: [ { message: `HogeArticleFugaを正規表現 "/Article$/" がmatchする名称に変更してください。
|
|
85
|
-
- HogeArticleが型の場合、'import type { HogeArticle as HogeArticleFuga }' もしくは 'import { type HogeArticle as HogeArticleFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
86
|
-
{ code: `import { HogeAside as HogeAsideFuga } from './hoge'`, errors: [ { message: `HogeAsideFugaを正規表現 "/Aside$/" がmatchする名称に変更してください。
|
|
87
|
-
- HogeAsideが型の場合、'import type { HogeAside as HogeAsideFuga }' もしくは 'import { type HogeAside as HogeAsideFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
88
|
-
{ code: `import { HogeNav as HogeNavFuga } from './hoge'`, errors: [ { message: `HogeNavFugaを正規表現 "/Nav$/" がmatchする名称に変更してください。
|
|
89
|
-
- HogeNavが型の場合、'import type { HogeNav as HogeNavFuga }' もしくは 'import { type HogeNav as HogeNavFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
90
|
-
{ code: `import { HogeSection as HogeSectionFuga } from './hoge'`, errors: [ { message: `HogeSectionFugaを正規表現 "/Section$/" がmatchする名称に変更してください。
|
|
91
|
-
- HogeSectionが型の場合、'import type { HogeSection as HogeSectionFuga }' もしくは 'import { type HogeSection as HogeSectionFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
92
|
-
{ code: `import { HogeModelessDialog as HogeModelessDialogFuga } from './hoge'`, errors: [ { message: `HogeModelessDialogFugaを正規表現 "/ModelessDialog$/" がmatchする名称に変更してください。
|
|
93
|
-
- HogeModelessDialogが型の場合、'import type { HogeModelessDialog as HogeModelessDialogFuga }' もしくは 'import { type HogeModelessDialog as HogeModelessDialogFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
94
|
-
{ code: 'const Hoge = styled.h1``', errors: [ { message: `Hogeを正規表現 "/PageHeading$/" がmatchする名称に変更してください。` } ] },
|
|
95
|
-
{ code: 'const Hoge = styled.h2``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください。` } ] },
|
|
96
|
-
{ code: 'const Hoge = styled.h3``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください。` } ] },
|
|
97
|
-
{ code: 'const Hoge = styled.h4``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください。` } ] },
|
|
98
|
-
{ code: 'const Hoge = styled.h5``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください。` } ] },
|
|
99
|
-
{ code: 'const Hoge = styled.h6``', errors: [ { message: `Hogeを正規表現 "/Heading$/" がmatchする名称に変更してください。` } ] },
|
|
100
|
-
{ code: 'const Fuga = styled(Heading)``', errors: [ { message: `Fugaを正規表現 "/Heading$/" がmatchする名称に変更してください。` } ] },
|
|
101
|
-
{ code: 'const Fuga = styled(HogeHeading)``', errors: [ { message: `Fugaを正規表現 "/Heading$/" がmatchする名称に変更してください。` } ] },
|
|
102
|
-
{ code: 'const Fuga = styled(HogeHeading).attrs(() => ({ type: "blockTitle" }))``', errors: [ { message: `Fugaを正規表現 "/Heading$/" がmatchする名称に変更してください。` } ] },
|
|
103
|
-
{ code: 'const Fuga = styled(HogeArticle)``', errors: [ { message: `Fugaを正規表現 "/Article$/" がmatchする名称に変更してください。` } ] },
|
|
104
|
-
{ code: 'const Fuga = styled(HogeAside)``', errors: [ { message: `Fugaを正規表現 "/Aside$/" がmatchする名称に変更してください。` } ] },
|
|
105
|
-
{ code: 'const Fuga = styled(HogeNav)``', errors: [ { message: `Fugaを正規表現 "/Nav$/" がmatchする名称に変更してください。` } ] },
|
|
106
|
-
{ code: 'const Fuga = styled(HogeSection)``', errors: [ { message: `Fugaを正規表現 "/Section$/" がmatchする名称に変更してください。` } ] },
|
|
107
|
-
{ code: 'const Fuga = styled(HogeCenter)``', errors: [ { message: `Fugaを正規表現 "/Center$/" がmatchする名称に変更してください。` } ] },
|
|
108
|
-
{ code: 'const Fuga = styled(HogeReel)``', errors: [ { message: `Fugaを正規表現 "/Reel$/" がmatchする名称に変更してください。` } ] },
|
|
109
|
-
{ code: 'const Fuga = styled(HogeSidebar)``', errors: [ { message: `Fugaを正規表現 "/Sidebar$/" がmatchする名称に変更してください。` } ] },
|
|
110
|
-
{ code: 'const Fuga = styled(HogeStack)``', errors: [ { message: `Fugaを正規表現 "/Stack$/" がmatchする名称に変更してください。` } ] },
|
|
111
53
|
{ code: 'const StyledArticle = styled.article``', errors: [ { message: `"article"を利用せず、smarthr-ui/Articleを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.article" -> "styled(Article)")` } ] },
|
|
112
54
|
{ code: 'const StyledAside = styled.aside``', errors: [ { message: `"aside"を利用せず、smarthr-ui/Asideを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.aside" -> "styled(Aside)")` } ] },
|
|
113
55
|
{ code: 'const StyledNav = styled.nav``', errors: [ { message: `"nav"を利用せず、smarthr-ui/Navを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.nav" -> "styled(Nav)")` } ] },
|
|
114
56
|
{ code: 'const StyledSection = styled.section``', errors: [ { message: `"section"を利用せず、smarthr-ui/Sectionを拡張してください。Headingのレベルが自動計算されるようになります。(例: "styled.section" -> "styled(Section)")` } ] },
|
|
115
|
-
{ code: 'const StyledSection = styled.div``', errors: [ { message: `StyledSection は smarthr-ui/Section をextendすることを期待する名称になっています
|
|
116
|
-
- childrenにHeadingを含まない場合、コンポーネントの名称から"Section"を取り除いてください
|
|
117
|
-
- childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/Sectionをexendしてください
|
|
118
|
-
- "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"Section"を設定し、そのコンポーネント内でsmarthr-ui/Sectionを利用してください` } ] },
|
|
119
|
-
{ code: 'const StyledArticle = styled(Hoge)``', errors: [ { message: `StyledArticle は smarthr-ui/Article をextendすることを期待する名称になっています
|
|
120
|
-
- childrenにHeadingを含まない場合、コンポーネントの名称から"Article"を取り除いてください
|
|
121
|
-
- childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/Articleをexendしてください
|
|
122
|
-
- "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"Article"を設定し、そのコンポーネント内でsmarthr-ui/Articleを利用してください` } ] },
|
|
123
|
-
{ code: 'const StyledAside = styled(AsideXxxx)``', errors: [ { message: `StyledAside は smarthr-ui/Aside をextendすることを期待する名称になっています
|
|
124
|
-
- childrenにHeadingを含まない場合、コンポーネントの名称から"Aside"を取り除いてください
|
|
125
|
-
- childrenにHeadingを含み、アウトラインの範囲を指定するためのコンポーネントならば、smarthr-ui/Asideをexendしてください
|
|
126
|
-
- "styled(Xxxx)" 形式の場合、拡張元であるXxxxコンポーネントの名称の末尾に"Aside"を設定し、そのコンポーネント内でsmarthr-ui/Asideを利用してください` } ] },
|
|
127
|
-
{ code: 'const StyledHeading = styled(Hoge)``', errors: [ { message: `StyledHeading は /(Heading|^h(1|2|3|4|5|6))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
|
|
128
|
-
- StyledHeading の名称の末尾が"Heading" という文字列ではない状態にしつつ、"Hoge"を継承していることをわかる名称に変更してください
|
|
129
|
-
- もしくは"Hoge"を"StyledHeading"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
|
|
130
|
-
- 修正例1: const StyledXxxx = styled(Hoge)
|
|
131
|
-
- 修正例2: const StyledHeadingXxxx = styled(Hoge)
|
|
132
|
-
- 修正例3: const StyledHeading = styled(XxxxHeading)` } ] },
|
|
133
|
-
{ code: 'const StyledHeading = styled.div``', errors: [ { message: `StyledHeading は /(Heading|^h(1|2|3|4|5|6))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
|
|
134
|
-
- StyledHeading の名称の末尾が"Heading" という文字列ではない状態にしつつ、"div"を継承していることをわかる名称に変更してください
|
|
135
|
-
- もしくは"div"を"StyledHeading"の継承元であることがわかるような適切なタグや別コンポーネントに差し替えてください
|
|
136
|
-
- 修正例1: const StyledXxxx = styled.div
|
|
137
|
-
- 修正例2: const StyledHeadingXxxx = styled.div
|
|
138
|
-
- 修正例3: const StyledHeading = styled(XxxxHeading)` } ] },
|
|
139
57
|
{ code: '<><PageHeading>hoge</PageHeading><PageHeading>fuga</PageHeading></>', errors: [ { message: pageMessage } ] },
|
|
140
58
|
{ code: '<Heading>hoge</Heading>', errors: [ { message } ] },
|
|
141
59
|
{ code: '<><Heading>hoge</Heading><Heading>fuga</Heading></>', errors: [ { message }, { message } ] },
|
|
@@ -21,21 +21,6 @@ const messageNullAlt = `画像の情報をテキストにした代替テキス
|
|
|
21
21
|
|
|
22
22
|
ruleTester.run('a11y-image-has-alt-attribute', rule, {
|
|
23
23
|
valid: [
|
|
24
|
-
{ code: `import styled from 'styled-components'` },
|
|
25
|
-
{ code: `import styled, { css } from 'styled-components'` },
|
|
26
|
-
{ code: `import { css } from 'styled-components'` },
|
|
27
|
-
{ code: `import { HogeImg as FugaImg } from './hoge'` },
|
|
28
|
-
{ code: `import { HogeImage as FugaImage } from './hoge'` },
|
|
29
|
-
{ code: `import { HogeIcon as FugaIcon } from './hoge'` },
|
|
30
|
-
{ code: 'const HogeImg = styled.img``' },
|
|
31
|
-
{ code: 'const HogeImage = styled.img``' },
|
|
32
|
-
{ code: 'const HogeIcon = styled.img``' },
|
|
33
|
-
{ code: 'const HogeImg = styled.svg``' },
|
|
34
|
-
{ code: 'const HogeImage = styled.svg``' },
|
|
35
|
-
{ code: 'const HogeIcon = styled.svg``' },
|
|
36
|
-
{ code: 'const HogeImg = styled(Img)``' },
|
|
37
|
-
{ code: 'const HogeImage = styled(Image)``' },
|
|
38
|
-
{ code: 'const HogeIcon = styled(Icon)``' },
|
|
39
24
|
{ code: '<img alt="hoge" />' },
|
|
40
25
|
{ code: '<HogeImg alt="hoge" />' },
|
|
41
26
|
{ code: '<HogeImage alt="hoge" />' },
|
|
@@ -46,36 +31,6 @@ ruleTester.run('a11y-image-has-alt-attribute', rule, {
|
|
|
46
31
|
{ code: '<AnyImg {...hoge} />', options: [{ checkType: 'allow-spread-attributes' }] },
|
|
47
32
|
],
|
|
48
33
|
invalid: [
|
|
49
|
-
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
50
|
-
{ code: `import { HogeImg as ImgFuga } from './hoge'`, errors: [ { message: `ImgFugaを正規表現 "/Img$/" がmatchする名称に変更してください。
|
|
51
|
-
- HogeImgが型の場合、'import type { HogeImg as ImgFuga }' もしくは 'import { type HogeImg as ImgFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
52
|
-
{ code: `import { HogeImage as HogeImageFuga } from './hoge'`, errors: [ { message: `HogeImageFugaを正規表現 "/Image$/" がmatchする名称に変更してください。
|
|
53
|
-
- HogeImageが型の場合、'import type { HogeImage as HogeImageFuga }' もしくは 'import { type HogeImage as HogeImageFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
54
|
-
{ code: `import { Icon as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください。
|
|
55
|
-
- Iconが型の場合、'import type { Icon as Hoge }' もしくは 'import { type Icon as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
56
|
-
{ code: 'const Hoge = styled.img``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください。` } ] },
|
|
57
|
-
{ code: 'const Hoge = styled.svg``', errors: [ { message: `Hogeを正規表現 "/(Img|Image|Icon)$/" がmatchする名称に変更してください。` } ] },
|
|
58
|
-
{ code: 'const Hoge = styled(Icon)``', errors: [ { message: `Hogeを正規表現 "/Icon$/" がmatchする名称に変更してください。` } ] },
|
|
59
|
-
{ code: 'const Hoge = styled(Img)``', errors: [ { message: `Hogeを正規表現 "/Img$/" がmatchする名称に変更してください。` } ] },
|
|
60
|
-
{ code: 'const Hoge = styled(Image)``', errors: [ { message: `Hogeを正規表現 "/Image$/" がmatchする名称に変更してください。` } ] },
|
|
61
|
-
{ code: 'const StyledImage = styled.span``', errors: [ { message: `StyledImage は /(Image|^(img|svg))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
|
|
62
|
-
- StyledImage の名称の末尾が"Image" という文字列ではない状態にしつつ、"span"を継承していることをわかる名称に変更してください
|
|
63
|
-
- もしくは"span"を"StyledImage"の継承元であることがわかるような適切なタグや別コンポーネントに差し替えてください
|
|
64
|
-
- 修正例1: const StyledXxxx = styled.span
|
|
65
|
-
- 修正例2: const StyledImageXxxx = styled.span
|
|
66
|
-
- 修正例3: const StyledImage = styled(XxxxImage)` } ] },
|
|
67
|
-
{ code: 'const StyledImg = styled(Hoge)``', errors: [ { message: `StyledImg は /(Img|^(img|svg))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
|
|
68
|
-
- StyledImg の名称の末尾が"Img" という文字列ではない状態にしつつ、"Hoge"を継承していることをわかる名称に変更してください
|
|
69
|
-
- もしくは"Hoge"を"StyledImg"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
|
|
70
|
-
- 修正例1: const StyledXxxx = styled(Hoge)
|
|
71
|
-
- 修正例2: const StyledImgXxxx = styled(Hoge)
|
|
72
|
-
- 修正例3: const StyledImg = styled(XxxxImg)` } ] },
|
|
73
|
-
{ code: 'const FugaIcon = styled(Fuga)``', errors: [ { message: `FugaIcon は /(Icon|^(img|svg))$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
|
|
74
|
-
- FugaIcon の名称の末尾が"Icon" という文字列ではない状態にしつつ、"Fuga"を継承していることをわかる名称に変更してください
|
|
75
|
-
- もしくは"Fuga"を"FugaIcon"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
|
|
76
|
-
- 修正例1: const FugaXxxx = styled(Fuga)
|
|
77
|
-
- 修正例2: const FugaIconXxxx = styled(Fuga)
|
|
78
|
-
- 修正例3: const FugaIcon = styled(XxxxIcon)` } ] },
|
|
79
34
|
{ code: '<img />', errors: [ { message: messageNotExistAlt } ] },
|
|
80
35
|
{ code: '<HogeImage alt="" />', errors: [ { message: messageNullAlt } ] },
|
|
81
36
|
{ code: '<hoge><image /></hoge>', errors: [ { message: messageNotExistAlt } ] },
|
|
@@ -19,26 +19,6 @@ const MESSAGE_RADIO_SUFFIX = `
|
|
|
19
19
|
|
|
20
20
|
ruleTester.run('a11y-input-has-name-attribute', rule, {
|
|
21
21
|
valid: [
|
|
22
|
-
{ code: `import styled from 'styled-components'` },
|
|
23
|
-
{ code: `import styled, { css } from 'styled-components'` },
|
|
24
|
-
{ code: `import { css } from 'styled-components'` },
|
|
25
|
-
{ code: `import { Input as HogeInput } from './hoge'` },
|
|
26
|
-
{ code: `import { HogeTextarea as FugaTextarea } from './hoge'` },
|
|
27
|
-
{ code: `import { Select as HogeSelect } from './hoge'` },
|
|
28
|
-
{ code: `import { InputFile as HogeInputFile } from './hoge'` },
|
|
29
|
-
{ code: `import { HogeRadioButton as FugaRadioButton } from './hoge'` },
|
|
30
|
-
{ code: `import { CheckBox as FugaCheckBox } from './hoge'` },
|
|
31
|
-
{ code: `import { HogeComboBox as FugaComboBox } from './hoge'` },
|
|
32
|
-
{ code: `import { DatePicker as HogeDatePicker } from './hoge'` },
|
|
33
|
-
{ code: `import { WarekiPicker as HogeWarekiPicker } from './hoge'` },
|
|
34
|
-
{ code: `import { HogeDropZone as HogeFugaDropZone } from './hoge'` },
|
|
35
|
-
{ code: 'const HogeInput = styled.input``' },
|
|
36
|
-
{ code: 'const HogeInput = styled(Input)``' },
|
|
37
|
-
{ code: 'const HogeRadioButton = styled(RadioButton)``' },
|
|
38
|
-
{ code: 'const HogeSelect = styled(Select)``' },
|
|
39
|
-
{ code: 'const HogeSelect = styled.select``' },
|
|
40
|
-
{ code: 'const HogeTextarea = styled(Textarea)``' },
|
|
41
|
-
{ code: 'const HogeTextarea = styled.textarea``' },
|
|
42
22
|
{ code: '<input type="radio" name="hoge" />' },
|
|
43
23
|
{ code: '<HogeInput type="radio" name="hoge" />' },
|
|
44
24
|
{ code: '<HogeRadioButton name="hoge" />' },
|
|
@@ -51,30 +31,6 @@ ruleTester.run('a11y-input-has-name-attribute', rule, {
|
|
|
51
31
|
{ code: '<Input {...args} hoge="fuga" />', options: [{ checkType: 'allow-spread-attributes' }] },
|
|
52
32
|
],
|
|
53
33
|
invalid: [
|
|
54
|
-
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
55
|
-
{ code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatchする名称に変更してください。
|
|
56
|
-
- Inputが型の場合、'import type { Input as InputHoge }' もしくは 'import { type Input as InputHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
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 { HogeSelect as SelectFuga } from './hoge'`, errors: [ { message: `SelectFugaを正規表現 "/Select$/" がmatchする名称に変更してください。
|
|
60
|
-
- HogeSelectが型の場合、'import type { HogeSelect as SelectFuga }' もしくは 'import { type HogeSelect as SelectFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
61
|
-
{ code: `import { InputFile as HogeInputFileFuga } from './hoge'`, errors: [ { message: `HogeInputFileFugaを正規表現 "/InputFile$/" がmatchする名称に変更してください。
|
|
62
|
-
- InputFileが型の場合、'import type { InputFile as HogeInputFileFuga }' もしくは 'import { type InputFile as HogeInputFileFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
63
|
-
{ code: `import { HogeRadioButton as FugaRadioButtonAbc } from './hoge'`, errors: [ { message: `FugaRadioButtonAbcを正規表現 "/RadioButton$/" がmatchする名称に変更してください。
|
|
64
|
-
- HogeRadioButtonが型の場合、'import type { HogeRadioButton as FugaRadioButtonAbc }' もしくは 'import { type HogeRadioButton as FugaRadioButtonAbc }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
65
|
-
{ code: `import { CheckBox as FugaCheckBoxHoge } from './hoge'`, errors: [ { message: `FugaCheckBoxHogeを正規表現 "/CheckBox$/" がmatchする名称に変更してください。
|
|
66
|
-
- CheckBoxが型の場合、'import type { CheckBox as FugaCheckBoxHoge }' もしくは 'import { type CheckBox as FugaCheckBoxHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
67
|
-
{ code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください。
|
|
68
|
-
- HogeComboBoxが型の場合、'import type { HogeComboBox as ComboBoxFuga }' もしくは 'import { type HogeComboBox as ComboBoxFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
69
|
-
{ code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
|
|
70
|
-
- DatePickerが型の場合、'import type { DatePicker as HogeDatePickerFuga }' もしくは 'import { type DatePicker as HogeDatePickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
71
|
-
{ code: `import { WarekiPicker as HogeWarekiPickerFuga } from './hoge'`, errors: [ { message: `HogeWarekiPickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
|
|
72
|
-
- WarekiPickerが型の場合、'import type { WarekiPicker as HogeWarekiPickerFuga }' もしくは 'import { type WarekiPicker as HogeWarekiPickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
73
|
-
{ code: `import { HogeDropZone as HogeFugaDropZoneAbc } from './hoge'`, errors: [ { message: `HogeFugaDropZoneAbcを正規表現 "/DropZone$/" がmatchする名称に変更してください。
|
|
74
|
-
- HogeDropZoneが型の場合、'import type { HogeDropZone as HogeFugaDropZoneAbc }' もしくは 'import { type HogeDropZone as HogeFugaDropZoneAbc }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
75
|
-
{ code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
|
|
76
|
-
{ code: 'const Hoge = styled.Input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
|
|
77
|
-
{ code: 'const Hoge = styled(RadioButton)``', errors: [ { message: `Hogeを正規表現 "/RadioButton$/" がmatchする名称に変更してください。` } ] },
|
|
78
34
|
{ code: '<input />', errors: [ { message: `input にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
|
|
79
35
|
{ code: '<input type="date" />', errors: [ { message: `input にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
|
|
80
36
|
{ code: '<Input type="checkbox" />', errors: [ { message: `Input にname属性を指定してください${MESSAGE_SUFFIX}` } ] },
|
|
@@ -12,14 +12,14 @@ const ruleTester = new RuleTester({
|
|
|
12
12
|
})
|
|
13
13
|
const noLabeledInput = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
|
|
14
14
|
- FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
|
|
15
|
-
- ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((
|
|
16
|
-
- ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput
|
|
15
|
+
- ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/(Form(Control|Group)|(F|^f)ieldset)$/とマッチするように修正してください
|
|
16
|
+
- ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?|(Search)?(I|^i)nput(File)?|(T|^t)extarea|(S|^s)elect|Combo(B|b)ox|(Date|Wareki|Time)Picker)$/とマッチするように修正してください
|
|
17
17
|
- 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を入力すれば良いのか" の説明を設定してください
|
|
18
18
|
- 例: <${name} title="姓を全角カタカナのみで入力してください" />`
|
|
19
19
|
const noLabeledSelect = (name) => `${name} を、smarthr-ui/FormControl もしくはそれを拡張したコンポーネントが囲むようマークアップを変更してください。
|
|
20
20
|
- FormControlで入力要素を囲むことでラベルと入力要素が適切に紐づき、操作性が高まります
|
|
21
|
-
- ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/((
|
|
22
|
-
- ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/((I|^i)nput
|
|
21
|
+
- ${name}が入力要素とラベル・タイトル・説明など含む概念を表示するコンポーネントの場合、コンポーネント名を/(Form(Control|Group)|(F|^f)ieldset)$/とマッチするように修正してください
|
|
22
|
+
- ${name}が入力要素自体を表現するコンポーネントの一部である場合、ルートとなるコンポーネントの名称を/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?|(Search)?(I|^i)nput(File)?|(T|^t)extarea|(S|^s)elect|Combo(B|b)ox|(Date|Wareki|Time)Picker)$/とマッチするように修正してください
|
|
23
23
|
- 上記のいずれの方法も適切ではない場合、${name}のtitle属性に "どんな値を選択すれば良いのか" の説明を設定してください
|
|
24
24
|
- 例: <${name} title="検索対象を選択してください" />`
|
|
25
25
|
const invalidPureCheckboxInFormControl = (name) => `HogeFormControl が ${name} を含んでいます。smarthr-ui/FormControl を smarthr-ui/Fieldset に変更し、正しくグルーピングされるように修正してください。
|
|
@@ -34,13 +34,13 @@ const invalidMultiInputsInFormControl = () => `HogeFormControl が複数の入
|
|
|
34
34
|
- 方法1: 入力要素ごとにラベルを設定できる場合、HogeFormControlをsmarthr-ui/Fieldset、もしくはそれを拡張したコンポーネントに変更した上で、入力要素を一つずつsmarthr-ui/FormControlで囲むようにマークアップを変更してください
|
|
35
35
|
- 方法2: 郵便番号や電話番号など、本来一つの概念の入力要素を分割して複数の入力要素にしている場合、一つの入力要素にまとめることを検討してください
|
|
36
36
|
- コピーアンドペーストがしやすくなる、ブラウザの自動補完などがより適切に反映されるなど多大なメリットがあります
|
|
37
|
-
- 方法3: HogeFormControl が smarthr-ui/FormControl、もしくはそれを拡張しているコンポーネントではない場合、名称を /((
|
|
37
|
+
- 方法3: HogeFormControl が smarthr-ui/FormControl、もしくはそれを拡張しているコンポーネントではない場合、名称を /(Form(Control|Group)|(F|^f)ieldset)$/ にマッチしないものに変更してください
|
|
38
38
|
- 方法4: 上記方法のいずれも対応出来ない場合、HogeFormControl に 'role="group"' 属性を設定してください`
|
|
39
39
|
const noLabeledInputInFieldset = (name) => `HogeFieldset が ラベルを持たない入力要素(${name})を含んでいます。入力要素が何であるかを正しく伝えるため、以下の方法のいずれかで修正してください。
|
|
40
40
|
- 方法1: HogeFieldset を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
|
|
41
41
|
- 方法2: ${name} がlabel要素を含むコンポーネントである場合、名称を/(Form(Control|Group))$/にマッチするものに変更してください
|
|
42
42
|
- smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
|
|
43
|
-
- 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton
|
|
43
|
+
- 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?)$/にマッチするものに変更してください
|
|
44
44
|
- smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
|
|
45
45
|
- 方法4: HogeFieldset が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を /Fieldset$/ にマッチしないものに変更してください
|
|
46
46
|
- 方法5: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${name}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
|
|
@@ -50,7 +50,7 @@ const noLabeledInputInFieldsetWithSelect = (name) => `HogeFieldset が ラベル
|
|
|
50
50
|
- 方法1: HogeFieldset を smarthr-ui/FormControl、もしくはそれを拡張したコンポーネントに変更してください
|
|
51
51
|
- 方法2: ${name} がlabel要素を含むコンポーネントである場合、名称を/(Form(Control|Group))$/にマッチするものに変更してください
|
|
52
52
|
- smarthr-ui/FormControl、smarthr-ui/FormGroup はlabel要素を内包しています
|
|
53
|
-
- 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton
|
|
53
|
+
- 方法3: ${name} がRadioButton、もしくはCheckboxを表すコンポーネントの場合、名称を/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?)$/にマッチするものに変更してください
|
|
54
54
|
- smarthr-ui/RadioButton、smarthr-ui/RadioButtonPanel、smarthr-ui/Checkbox はlabel要素を内包しています
|
|
55
55
|
- 方法4: HogeFieldset が smarthr-ui/Fieldset、もしくはそれを拡張しているコンポーネントではない場合、名称を /Fieldset$/ にマッチしないものに変更してください
|
|
56
56
|
- 方法5: 別途label要素が存在し、それらと紐づけたい場合はlabel要素のhtmlFor属性、${name}のid属性に同じ文字列を指定してください。この文字列はhtml内で一意である必要があります
|
|
@@ -68,29 +68,16 @@ const useFormControlInsteadOfSectionInRadio = (name, section) => `${name}は${se
|
|
|
68
68
|
- ${section} 内のHeading要素はFieldsetのtitle属性に変更してください
|
|
69
69
|
- 方法2: ${section} と ${name} の間に Fieldset が存在するようにマークアップを変更してください`
|
|
70
70
|
const invalidFieldsetHasRoleGroup = (fieldset, base) => `${fieldset}に 'role="group" が設定されています。${base} をつかってマークアップする場合、'role="group"' は不要です
|
|
71
|
-
- ${fieldset} が ${base}、もしくはそれを拡張しているコンポーネントではない場合、名称を /((
|
|
71
|
+
- ${fieldset} が ${base}、もしくはそれを拡張しているコンポーネントではない場合、名称を /(Form(Control|Group)|(F|^f)ieldset)$/ にマッチしないものに変更してください`
|
|
72
72
|
const invalidChildreninFormControl = (children) => `FormControl が、${children} を子要素として持っており、マークアップとして正しくない状態になっています。以下のいずれかの方法で修正を試みてください。
|
|
73
73
|
- 方法1: 親要素であるFormControlをsmarthr-ui/FormControl、もしくはそれを拡張していないコンポーネントでマークアップしてください
|
|
74
74
|
- FormControlではなく、smarthr-ui/Fieldset、もしくはsmarthr-ui/Section + smarthr-ui/Heading などでのマークアップを検討してください
|
|
75
75
|
- 方法2: 親要素であるFormControlがsmarthr-ui/FormControlを拡張したコンポーネントではない場合、コンポーネント名を/(Form(Control|Group))$/と一致しない名称に変更してください`
|
|
76
76
|
const requireMultiInputInFormControlWithRoleGroup = () => `HogeFormControl内に入力要素が2個以上存在しないため、'role=\"group\"'を削除してください。'role=\"group\"'は複数の入力要素を一つのグループとして扱うための属性です。
|
|
77
|
-
- HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/((I|^i)nput
|
|
77
|
+
- HogeFormControl内に2つ以上の入力要素が存在する場合、入力要素を含むコンポーネント名全てを/(RadioButton(Panel)?(s)?|Check(B|b)ox(es|s)?|(Search)?(I|^i)nput(File)?|(T|^t)extarea|(S|^s)elect|Combo(B|b)ox|(Date|Wareki|Time)Picker)$/、もしくは/(Form(Control|Group)|(F|^f)ieldset)$/にマッチする名称に変更してください`
|
|
78
78
|
|
|
79
79
|
ruleTester.run('a11y-input-in-form-control', rule, {
|
|
80
80
|
valid: [
|
|
81
|
-
{ code: `import styled from 'styled-components'` },
|
|
82
|
-
{ code: `import styled, { css } from 'styled-components'` },
|
|
83
|
-
{ code: `import { css } from 'styled-components'` },
|
|
84
|
-
{ code: `import { HogeAInput as FugaInput } from './hoge'` },
|
|
85
|
-
{ code: `import { Textarea as HogeTextarea } from './hoge'` },
|
|
86
|
-
{ code: 'const HogeInput = styled.input``' },
|
|
87
|
-
{ code: 'const HogeTextarea = styled.textarea``' },
|
|
88
|
-
{ code: 'const HogeSelect = styled(Select)``' },
|
|
89
|
-
{ code: 'const HogeRadioButton = styled(FugaRadioButton)``' },
|
|
90
|
-
{ code: 'const HogeRadioButtonPanel = styled(FugaRadioButtonPanel)``' },
|
|
91
|
-
{ code: 'const HogeCheckBox = styled(FugaCheckbox)``' },
|
|
92
|
-
{ code: 'const DatePicker = styled(AnyDatePicker)``' },
|
|
93
|
-
{ code: 'const WarekiPicker = styled(AnyWarekiPicker)``' },
|
|
94
81
|
{ code: '<input type="hidden" />' },
|
|
95
82
|
{ code: '<input title="any"/>' },
|
|
96
83
|
{ code: '<HogeInput title="any"/>' },
|
|
@@ -139,17 +126,6 @@ ruleTester.run('a11y-input-in-form-control', rule, {
|
|
|
139
126
|
{ code: '<HogeFormControl>{ dateInput ? <DateInput /> : <Input /> }</HogeFormControl>'},
|
|
140
127
|
],
|
|
141
128
|
invalid: [
|
|
142
|
-
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
143
|
-
{ code: `import { ComboBox as ComboBoxHoge } from './hoge'`, errors: [ { message: `ComboBoxHogeを正規表現 "/(ComboBox)$/" がmatchする名称に変更してください。
|
|
144
|
-
- ComboBoxが型の場合、'import type { ComboBox as ComboBoxHoge }' もしくは 'import { type ComboBox as ComboBoxHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
145
|
-
{ code: 'const RadioButton = styled(FugaRadioButtonPanel)``', errors: [
|
|
146
|
-
{ message: `RadioButtonを正規表現 "/(RadioButtonPanel)$/" がmatchする名称に変更してください。` },
|
|
147
|
-
{ message: `RadioButton は /RadioButton$/ にmatchする名前のコンポーネントを拡張することを期待している名称になっています
|
|
148
|
-
- RadioButton の名称の末尾が"RadioButton" という文字列ではない状態にしつつ、"FugaRadioButtonPanel"を継承していることをわかる名称に変更してください
|
|
149
|
-
- もしくは"FugaRadioButtonPanel"を"RadioButton"の継承元であることがわかるような名称に変更するか、適切な別コンポーネントに差し替えてください
|
|
150
|
-
- 修正例1: const Xxxx = styled(FugaRadioButtonPanel)
|
|
151
|
-
- 修正例2: const RadioButtonXxxx = styled(FugaRadioButtonPanel)
|
|
152
|
-
- 修正例3: const RadioButton = styled(XxxxRadioButton)` } ] },
|
|
153
129
|
{ code: `<input />`, errors: [ { message: noLabeledInput('input') } ] },
|
|
154
130
|
{ code: `<HogeInput />`, errors: [ { message: noLabeledInput('HogeInput') } ] },
|
|
155
131
|
{ code: '<textarea />', errors: [ { message: noLabeledInput('textarea') } ] },
|
|
@@ -157,8 +133,8 @@ ruleTester.run('a11y-input-in-form-control', rule, {
|
|
|
157
133
|
{ code: '<select />', errors: [ { message: noLabeledSelect('select') } ] },
|
|
158
134
|
{ code: '<HogeSelect />', errors: [ { message: noLabeledSelect('HogeSelect') } ] },
|
|
159
135
|
{ code: '<HogeInputFile />', errors: [ { message: noLabeledInput('HogeInputFile') } ] },
|
|
160
|
-
{ code: '<
|
|
161
|
-
{ code: '<
|
|
136
|
+
{ code: '<HogeCombobox />', errors: [ { message: noLabeledInput('HogeCombobox') } ] },
|
|
137
|
+
{ code: '<HogeCombobox inputAttributes={{ any }} />', errors: [ { message: noLabeledInput('HogeCombobox') } ] },
|
|
162
138
|
{ code: '<HogeDatePicker />', errors: [ { message: noLabeledInput('HogeDatePicker') } ] },
|
|
163
139
|
{ code: '<HogeWarekiPicker />', errors: [ { message: noLabeledInput('HogeWarekiPicker') } ] },
|
|
164
140
|
{ code: '<HogeFormControl><Input type="checkbox" /><Input type="checkbox" /></HogeFormControl>', errors: [ { message: invalidPureCheckboxInFormControl('Input') } ] },
|
|
@@ -12,24 +12,6 @@ const ruleTester = new RuleTester({
|
|
|
12
12
|
})
|
|
13
13
|
ruleTester.run('a11y-prohibit-input-placeholder', rule, {
|
|
14
14
|
valid: [
|
|
15
|
-
{ code: `import styled from 'styled-components'` },
|
|
16
|
-
{ code: `import styled, { css } from 'styled-components'` },
|
|
17
|
-
{ code: `import { css } from 'styled-components'` },
|
|
18
|
-
{ code: `import { Input as HogeInput } from './hoge'` },
|
|
19
|
-
{ code: `import { HogeSearchInput as FugaSearchInput } from './hoge'` },
|
|
20
|
-
{ code: `import { HogeTextarea as FugaHogeTextarea } from './hoge'` },
|
|
21
|
-
{ code: `import { ComboBox as FugaHogeComboBox } from './hoge'` },
|
|
22
|
-
{ code: `import { AbcDatePicker as StyledDatePicker } from './hoge'` },
|
|
23
|
-
{ code: `import { AbcWarekiPicker as StyledWarekiPicker } from './hoge'` },
|
|
24
|
-
{ code: 'const HogeInput = styled.input``' },
|
|
25
|
-
{ code: 'const HogeTextarea = styled.textarea``' },
|
|
26
|
-
{ code: 'const HogeInput = styled(Input)``' },
|
|
27
|
-
{ code: 'const HogeInput = styled(StyledInput)``' },
|
|
28
|
-
{ code: 'const HogeTextarea = styled(Textarea)``' },
|
|
29
|
-
{ code: 'const hoge = styled.fieldset``' },
|
|
30
|
-
{ code: 'const HogeFieldSet = styled(FieldSet)``' },
|
|
31
|
-
{ code: 'const HogeComboBox = styled(ComboBox)``' },
|
|
32
|
-
{ code: 'const HogeSearchInput = styled(SearchInput)``' },
|
|
33
15
|
{ code: `<input />` },
|
|
34
16
|
{ code: `<textarea />` },
|
|
35
17
|
{ code: `<FieldSet />` },
|
|
@@ -49,33 +31,6 @@ ruleTester.run('a11y-prohibit-input-placeholder', rule, {
|
|
|
49
31
|
{ code: `<ComboBox placeholder="hoge" dropdownHelpMessage="fuga" />` },
|
|
50
32
|
],
|
|
51
33
|
invalid: [
|
|
52
|
-
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
53
|
-
{ code: `import { Input as InputHoge } from './hoge'`, errors: [ { message: `InputHogeを正規表現 "/Input$/" がmatchする名称に変更してください。
|
|
54
|
-
- Inputが型の場合、'import type { Input as InputHoge }' もしくは 'import { type Input as InputHoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
55
|
-
{ code: `import { SearchInput as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。
|
|
56
|
-
- SearchInputが型の場合、'import type { SearchInput as Hoge }' もしくは 'import { type SearchInput as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` }, { message: `Hogeを正規表現 "/SearchInput$/" がmatchする名称に変更してください。
|
|
57
|
-
- SearchInputが型の場合、'import type { SearchInput as Hoge }' もしくは 'import { type SearchInput as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
58
|
-
{ code: `import { HogeTextarea as HogeTextareaFuga } from './hoge'`, errors: [ { message: `HogeTextareaFugaを正規表現 "/Textarea$/" がmatchする名称に変更してください。
|
|
59
|
-
- HogeTextareaが型の場合、'import type { HogeTextarea as HogeTextareaFuga }' もしくは 'import { type HogeTextarea as HogeTextareaFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
60
|
-
{ code: `import { HogeComboBox as ComboBoxFuga } from './hoge'`, errors: [ { message: `ComboBoxFugaを正規表現 "/ComboBox$/" がmatchする名称に変更してください。
|
|
61
|
-
- HogeComboBoxが型の場合、'import type { HogeComboBox as ComboBoxFuga }' もしくは 'import { type HogeComboBox as ComboBoxFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
62
|
-
{ code: `import { DatePicker as HogeDatePickerFuga } from './hoge'`, errors: [ { message: `HogeDatePickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
|
|
63
|
-
- DatePickerが型の場合、'import type { DatePicker as HogeDatePickerFuga }' もしくは 'import { type DatePicker as HogeDatePickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
64
|
-
{ code: `import { WarekiPicker as HogeWarekiPickerFuga } from './hoge'`, errors: [ { message: `HogeWarekiPickerFugaを正規表現 "/(Date|Wareki)Picker$/" がmatchする名称に変更してください。
|
|
65
|
-
- WarekiPickerが型の場合、'import type { WarekiPicker as HogeWarekiPickerFuga }' もしくは 'import { type WarekiPicker as HogeWarekiPickerFuga }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
66
|
-
{ code: 'const Hoge = styled.input``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
|
|
67
|
-
{ code: 'const Hoge = styled(StyledInput)``', errors: [ { message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` } ] },
|
|
68
|
-
{ code: 'const Hoge = styled.textarea``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください。` } ] },
|
|
69
|
-
{ code: 'const Hoge = styled(StyledTextarea)``', errors: [ { message: `Hogeを正規表現 "/Textarea$/" がmatchする名称に変更してください。` } ] },
|
|
70
|
-
{ code: 'const Hoge = styled(FieldSet)``', errors: [ { message: `Hogeを正規表現 "/FieldSet$/" がmatchする名称に変更してください。` } ] },
|
|
71
|
-
{ code: 'const Hoge = styled(ComboBox)``', errors: [ { message: `Hogeを正規表現 "/ComboBox$/" がmatchする名称に変更してください。` } ] },
|
|
72
|
-
{
|
|
73
|
-
code: 'const Hoge = styled(SearchInput)``',
|
|
74
|
-
errors: [
|
|
75
|
-
{ message: `Hogeを正規表現 "/Input$/" がmatchする名称に変更してください。` },
|
|
76
|
-
{ message: `Hogeを正規表現 "/SearchInput$/" がmatchする名称に変更してください。` },
|
|
77
|
-
],
|
|
78
|
-
},
|
|
79
34
|
{ code: `<input placeholder />`, errors: [ { message: `input にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><input /><Hint>ヒント</Hint></div>')` } ] },
|
|
80
35
|
{ code: `<textarea placeholder="hoge" />`, errors: [ { message: `textarea にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><textarea /><Hint>ヒント</Hint></div>')` } ] },
|
|
81
36
|
{ code: `<StyledInput placeholder={any} />`, errors: [ { message: `StyledInput にはplaceholder属性は設定せず、別途ヒント用要素の利用を検討してください。(例: '<div><StyledInput /><Hint>ヒント</Hint></div>')` } ] },
|
|
@@ -12,53 +12,11 @@ const ruleTester = new RuleTester({
|
|
|
12
12
|
})
|
|
13
13
|
ruleTester.run('a11y-trigger-has-button', rule, {
|
|
14
14
|
valid: [
|
|
15
|
-
{ code: `import styled from 'styled-components'` },
|
|
16
|
-
{ code: `import styled, { css } from 'styled-components'` },
|
|
17
|
-
{ code: `import { css } from 'styled-components'` },
|
|
18
|
-
{ code: `import { DropdownTrigger as HogeDropdownTrigger } from './hoge'` },
|
|
19
|
-
{ code: `import { FugaDialogTrigger as HogeDialogTrigger } from './hoge'` },
|
|
20
|
-
{ code: `import { AbcButton as HogeAbcButton } from './hoge'` },
|
|
21
|
-
{ code: `import { AnchorButton as FugaAnchorButton } from './hoge'` },
|
|
22
|
-
{ code: `import { HogeAnchor as HogeFugaAnchor } from './hoge'` },
|
|
23
|
-
{ code: `import { FugaLink as HogeLink } from './hoge'` },
|
|
24
|
-
{ code: 'const HogeButton = styled.button``' },
|
|
25
|
-
{ code: 'const HogeAnchor = styled.a``' },
|
|
26
|
-
{ code: 'const HogeLink = styled.a``' },
|
|
27
|
-
{ code: 'const HogeButton = styled(Button)``' },
|
|
28
|
-
{ code: 'const HogeButtonAnchor = styled(ButtonAnchor)``' },
|
|
29
|
-
{ code: 'const HogeAnchorButton = styled(AnchorButton)``' },
|
|
30
|
-
{ code: 'const HogeLink = styled(FugaLink)``' },
|
|
31
|
-
{ code: 'const HogeAnchor = styled(FugaAnchor)``' },
|
|
32
|
-
{ code: 'const HogeDialogTrigger = styled(DialogTrigger)``' },
|
|
33
|
-
{ code: 'const HogeDropdownTrigger = styled(DropdownTrigger)``' },
|
|
34
15
|
{ code: '<DropdownTrigger><button>hoge</button></DropdownTrigger>' },
|
|
35
16
|
{ code: '<DialogTrigger><button>{hoge}</button></DialogTrigger>' },
|
|
36
17
|
{ code: '<DropdownTrigger>{hoge}</DropdownTrigger>' },
|
|
37
18
|
],
|
|
38
19
|
invalid: [
|
|
39
|
-
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
40
|
-
{ code: `import { DropdownTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください。
|
|
41
|
-
- DropdownTriggerが型の場合、'import type { DropdownTrigger as Hoge }' もしくは 'import { type DropdownTrigger as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
42
|
-
{ code: `import { DialogTrigger as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください。
|
|
43
|
-
- DialogTriggerが型の場合、'import type { DialogTrigger as Hoge }' もしくは 'import { type DialogTrigger as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
44
|
-
{ code: `import { Button as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。
|
|
45
|
-
- Buttonが型の場合、'import type { Button as Hoge }' もしくは 'import { type Button as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
46
|
-
{ code: `import { AbcAnchorButton as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。
|
|
47
|
-
- AbcAnchorButtonが型の場合、'import type { AbcAnchorButton as Hoge }' もしくは 'import { type AbcAnchorButton as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` }, { message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください。
|
|
48
|
-
- AbcAnchorButtonが型の場合、'import type { AbcAnchorButton as Hoge }' もしくは 'import { type AbcAnchorButton as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
49
|
-
{ code: `import { Anchor as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。
|
|
50
|
-
- Anchorが型の場合、'import type { Anchor as Hoge }' もしくは 'import { type Anchor as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
51
|
-
{ code: `import { Link as Hoge } from './hoge'`, errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください。
|
|
52
|
-
- Linkが型の場合、'import type { Link as Hoge }' もしくは 'import { type Link as Hoge }' のように明示的に型であることを宣言してください。名称変更が不要になります` } ] },
|
|
53
|
-
{ code: 'const Hoge = styled.button``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` } ] },
|
|
54
|
-
{ code: 'const Hoge = styled.a``', errors: [ { message: `Hogeを正規表現 "/(Anchor|Link)$/" がmatchする名称に変更してください。` } ] },
|
|
55
|
-
{ code: 'const Hoge = styled(Button)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` } ] },
|
|
56
|
-
{ code: 'const Hoge = styled(AnchorButton)``', errors: [ { message: `Hogeを正規表現 "/Button$/" がmatchする名称に変更してください。` },{ message: `Hogeを正規表現 "/AnchorButton$/" がmatchする名称に変更してください。` } ] },
|
|
57
|
-
{ code: 'const Hoge = styled(ButtonAnchor)``', errors: [ { message: `Hogeを正規表現 "/ButtonAnchor$/" がmatchする名称に変更してください。` }, { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。` } ] },
|
|
58
|
-
{ code: 'const Hoge = styled(Anchor)``', errors: [ { message: `Hogeを正規表現 "/Anchor$/" がmatchする名称に変更してください。` } ] },
|
|
59
|
-
{ code: 'const Hoge = styled(Link)``', errors: [ { message: `Hogeを正規表現 "/Link$/" がmatchする名称に変更してください。` } ] },
|
|
60
|
-
{ code: 'const Hoge = styled(DropdownTrigger)``', errors: [ { message: `Hogeを正規表現 "/DropdownTrigger$/" がmatchする名称に変更してください。` } ] },
|
|
61
|
-
{ code: 'const Hoge = styled(DialogTrigger)``', errors: [ { message: `Hogeを正規表現 "/DialogTrigger$/" がmatchする名称に変更してください。` } ] },
|
|
62
20
|
{ code: '<DropdownTrigger>ほげ</DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
|
|
63
21
|
{ code: '<DialogTrigger><span><Button>ほげ</Button></span></DialogTrigger>', errors: [ { message: 'DialogTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
|
|
64
22
|
{ code: '<DropdownTrigger><AnchorButton>ほげ</AnchorButton></DropdownTrigger>', errors: [ { message: 'DropdownTrigger の直下にはbuttonコンポーネントのみ設置してください' } ] },
|
|
@@ -12,18 +12,12 @@ const ruleTester = new RuleTester({
|
|
|
12
12
|
})
|
|
13
13
|
ruleTester.run('best-practice-for-remote-trigger-dialog', rule, {
|
|
14
14
|
valid: [
|
|
15
|
-
{ code: `import styled from 'styled-components'` },
|
|
16
|
-
{ code: 'const HogeRemoteDialogTrigger = styled(RemoteDialogTrigger)``' },
|
|
17
|
-
{ code: 'const RemoteTriggerHogeDialog = styled(RemoteTriggerActionDialog)``' },
|
|
18
15
|
{ code: '<RemoteDialogTrigger targetId="hoge">open.</RemoteDialogTrigger>' },
|
|
19
16
|
{ code: '<StyledRemoteDialogTrigger targetId="fuga">open.</StyledRemoteDialogTrigger>' },
|
|
20
17
|
{ code: '<RemoteTriggerActionDialog {...args} id="hoge">content.</RemoteTriggerActionDialog>' },
|
|
21
18
|
{ code: '<RemoteTriggerHogeDialog {...args} id="hoge">content.</RemoteTriggerHogeDialog>' },
|
|
22
19
|
],
|
|
23
20
|
invalid: [
|
|
24
|
-
{ code: `import hoge from 'styled-components'`, errors: [ { message: `styled-components をimportする際は、名称が"styled" となるようにしてください。例: "import styled from 'styled-components'"` } ] },
|
|
25
|
-
{ code: 'const Hoge = styled(RemoteDialogTrigger)``', errors: [ { message: 'Hogeを正規表現 "/RemoteDialogTrigger$/" がmatchする名称に変更してください。' } ] },
|
|
26
|
-
{ code: 'const Fuga = styled(RemoteTriggerActionDialog)``', errors: [ { message: 'Fugaを正規表現 "/RemoteTrigger(.+)Dialog$/" がmatchする名称に変更してください。' } ] },
|
|
27
21
|
{ code: '<RemoteDialogTrigger targetId={hoge}>open.</RemoteDialogTrigger>', errors: [ { message: `RemoteDialogTriggerのtargetId属性には直接文字列を指定してください。
|
|
28
22
|
- 変数などは利用できません(これは関連するTriggerとDialogを検索しやすくするためです)
|
|
29
23
|
- RemoteTriggerActionDialogはループやDropdown内にTriggerが存在する場合に利用してください
|